HTML FORM ELEMENT
HTML FORM
Create employee registration webpage using HTML form objects
<!DOCTYPE html>
<html>
<head>
<title>HTML FORM ELEMENT</title>
<style type="text/css">
body{
margin-left: 400px;
}
h1{
color: red;
}
input,select{
margin-top: 5px;
}
</style>
</head>
<body>
<h1>Employee Registration Form</h1>
<form style="margin-top: -15px; margin-left: 30px;">
<input style="margin-left: 150px;" type="radio" id="Mr." name="gender" value="Mr.">
<label>Mr.</label>
<input type="radio" id="Mrs." name="gender" value="Mrs.">
<label>Mrs.</label>
<input type="radio" id="Ms." name="gender" value="Ms.">
<label>Ms.</label>
<br>
<label for="fname">First Name</label>
<input style="margin-left: 75px;" class="in1" type="text" id="fname" name="fname" value="First Name">
<br>
<label for="lname">Last Name</label>
<input style="margin-left: 77px;" type="text" id="lname" name="lname" value="Last Name">
<br>
<label for="address">Mail Address 1</label>
<input style="margin-left: 50px;" type="text" id="address" name="address" value="">
<br>
<label for="address2">Mail Address 2</label>
<input style="margin-left: 50px;" type="text" id="address2" name="address2" value="">
<br>
<label for="city">City</label>
<input style="margin-left: 120px;" type="text" id="city" name="city" value="">
<br>
<label for="state">State</label>
<select style="margin-left: 115px;" id="state" name="state">
<option value="Punjab">Punjab</option>
<option value="Sindh">Sindh</option>
<option value="KPK">KPK</option>
<option value="Balochistan">Balochistan</option>
<option value="Islamabad Capital Territory">Islamabad Capital Territory</option>
</select>
<br>
<label for="zip">Zip</label>
<input style="margin-left: 125px;" type="text" id="zip" name="zip" value="">
<br>
<label for="picture">Upload Photo</label>
<input style="margin-left: 59px;" type="file" id="picture" name="picture" value="">
<br>
<label for="mail">E-Mail</label>
<input style="margin-left: 102px;" type="text" id="mail" name="mail" value="">
<br>
<label for="mob">Mobile</label>
<input style="margin-left: 102px;" type="text" id="mob" name="mob" value="+92">
<br>
<label for="checkbox">Language known</label>
<input style="margin-left: 38px;" type="checkbox" id="Language" name="Language" value="Urdu">
<label for="checkbox">Urdu</label><br>
<input style="margin-left: 153px;" type="checkbox" id="Language" name="Language" value="English">
<label for="checkbox">English</label><br>
<input style="margin-left: 153px;" type="checkbox" id="Language" name="Language" value="Punjabi">
<label for="checkbox">Punjabi</label><br>
<input style="margin-left: 153px;" type="checkbox" id="Language" name="Language" value="Arabic">
<label for="checkbox">Arabic</label>
<br>
<label style="margin-top: 25px; float: left;" for="mob">Additional Information</label>
<textarea style="float: left; margin-left: 5px;" rows="5" cols="22">Optional</textarea>
<br><br><br><br><br>
<input style="margin-left: 155px;" type="submit" name="Submit">
<input type="Reset" name="Reset">
</form>
</body>
</html>
HTML ELEMENT WITH CSS
<!DOCTYPE html>
<html>
<head>
<title>Activity 1</title>
<style type="text/css">
body{
background-color: white;
}
form{
border: 2px solid red;
margin: 10px 450px 5px 450px;
background-color: rgb(204,255,102);
}
.a1{
margin-top: 3px;
}
.button1{
background-color: rgb(255,124,14);
border: 1px solid white;
border-radius:6px;
width: 150px;
height: 30px;
color: white;
font-family: "Time new roman";
-webkit-text-fill-color: white; /* Will override color (regardless of order) */
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: white;
}
</style>
</head>
<body>
<form>
<center><h3 class="a1" style="color: red;">Personal Details</h3>
<label>Name:</label>
<input type="text" id="name" name="Name"><br><br>
<label>Password:</label>
<input type="text" id="password" name="Password"><br><br>
<label>E-mail id:</label>
<input type="text" id="email" name="E-mail"><br><br>
<label>Gender:</label>
<input type="radio" id="gender" name="gender">Male
<input type="radio" id="gender" name="gender">Female
<h3 style="color: red;">Educational Qualification</h2>
<label>Degree:</label>
<select>
<option value="group">-- Select Group --</option>
<option value="group">Matric</option>
<option value="group">DAE</option>
<option value="group">BSC</option>
<option value="group">MSC</option>
</select><br><br>
<label>Engineering:</label>
<select>
<option value="group">-- Select Group --</option>
<option value="group">Civil</option>
<option value="group">Electrical</option>
<option value="group">Mechanical</option>
<option value="group">IT</option>
</select><br><br>
<label for="checkbox">Hobbies:</label>
<input type="checkbox" id="hobbies" name="hobbies" value="Playing Bedminton">
<label>Playing Bedminton</label>
<input type="checkbox" id="hobbies" name="hobbies" value="Playing Cricket">
<label>Playing Cricket</label><br>
<h3 style="color: red;">Address</h3>
<textarea rows="4" cols="30"></textarea><br><br>
<label for="picture">Attach Resume:</label>
<input type="file" name="picture" id="picture"><br><br><b>
<button class="button1">SUBMIT</button>
<br></center>
<br></b>
</form>
</body>
</html>
FORM ELEMENT WITH CSS
<!DOCTYPE html>
<html>
<head>
<title>Activity 2</title>
<style type="text/css">
body{
background-color: white;
}
form{
border: 2px solid gray;
margin: 30px 430px 5px 430px;
background-color: rgb(255,255,153);
}
.abc1{
background-color: rgb(255,204,0);
margin-top: 0px;
}
.abc2{
margin-top: -10px;
margin-left: 20px;
margin-bottom: 10px;
}
.abc3{
margin-left: 120px;
text-align: left;
}
.abc4{
margin-left: -13px;
margin-bottom: -18px;
}
</style>
</head>
<body>
<form>
<center>
<h3 class="abc1">The World of fruit</h3>
<h4 style="margin-top: -10px;">
Fruit Survey</h4>
</center>
<div class="abc2">
<div class="abc3">
<label>Name</label>
<input type="text" id="name" name="Name" value="Muhammad Bin Jameel"><br><br>
<div class="abc4">
<label>Address</label>
<input type="text" id="Address" name="Address" value="Lahore, Pakistan.">
</div>
<br><br>
<label>Email</label>
<input type="text" id="E-mail" name="E-mail" value="">
<div style="color: red; float: right; margin-right: 65px;">Missing</div>
</div>
<br>
<label">How many piece of fruit<br>do you eat per day?</label>
<div style="margin-top: -35px;">
<input style="margin-left: 164px;" type="radio" id="fruit" name="fruit">0<br>
<input style="margin-left: 164px;" type="radio" id="fruit" name="fruit">1<br>
<input style="margin-left: 164px;" type="radio" id="fruit" name="fruit">2<br>
<input style="margin-left: 164px;" type="radio" id="fruit" name="fruit">More than 2
</div>
<br>
<div style="margin-top: 5px;">
<label style="float: left; margin-left: 40px; margin-top: -10px;">My favourite fruit</label>
<select style="margin-left: 10px; margin-top: -10px; width: 100px;" id="fruit" name="fruit" size="4">
<option value="volvo">Apple</option>
<option value="saab">Mango</option>
<option value="fiat">Bana</option>
<option value="audi">Orange</option>
<option value="audi">Pine Apple</option>
<option value="audi">Grapes</option>
</select>
</div>
<br>
<label style="float: left; margin-left: 40px; margin-top: -10px;" for="checkbox">Would you like a<br><div style="margin-left: 52px;">brochure</div></label>
<div style="margin-top: -10px;">
<input style="margin-left: 18px;" type="checkbox" id="click" name="click" value="">
</div>
<br>
<input style="margin-left: 168px;" type="submit" name="Submit">
</div>
</form>
</body>
</html>
Hello, my name is Muhammad Bin Jameel.
No comments:
Post a Comment