Html Form Element Activity
HTML FORM ACTIVITY
Design html form
<!DOCTYPE html>
<html>
<head>
<title>Activity 1</title>
<style type="text/css">
textarea{
resize: none;
overflow-y: scroll;
}
.styled-select{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNOFPtXy4q3Y0cUvZAiaAEchY7ayruEHWUmLkWPAcjkm3rDGYSw0BSLe6wE8cZxOduGrhYI5287fVaDIeWOXZJqg87KEXRhX3dc-p6EbZlOnRw877TrlIsCqUvY8uATCwmr2-svmCvkNU/w945-h600-p-k-no-nu/downarrow5.png.png) no-repeat right white;
}
</style>
</head>
<body>
<form method="get" id="form1">
<h3 style="font-size: 17px;">What kind of car would you like to buy?</h3>
<input style="margin-left: 50px;" type="radio" name="cars" id="proton" value="proton" checked>
<label for="proton">Proton</label>
<input type="radio" name="cars" id="honda" value="honda">
<label for="honda">Honda</label>
<input type="radio" name="cars" id="ferrari" value="ferrari">
<label for="ferrari">Ferrari</label>
<input type="radio" name="cars" id="ford" value="ford">
<label for="ford">Ford</label>
<h3 style="font-size: 17px;">What colour do you want on your car?</h3>
<select class="styled-select" name="colour" id="colour" style="margin-left: 45px; border: 1px solid; border-color: rgb(54,101,143);">
<option value="black">Black</option>
<option value="white">White</option>
<option value="blue">Blue</option>
<option value="gray">Gray</option>
</select>
<label>Other:</label>
<input style="width: 200px; border: 1px solid; border-color: rgb(54,101,143);" type="text" id="other" name="other">
<h3 style="font-size: 17px;">Enetr other specification of your preferred car:</h3>
<textarea id="note" name="note" style="margin-left: 45px; border-color: rgb(54,101,143);" rows="6" cols="55"></textarea>
<h3 style="font-size: 17px;">Tell us how to get in touch with you:</h3>
<div style="margin-top: 5px;">
<label style="margin-left: 45px;">Name</label>
<input style="margin-left: 5.25px; width: 240px; border: 1.75px solid; border-color: rgb(54,101,143);" type="text" id="name" name="name">
</div>
<div style="margin-top: 6px;">
<label style="margin-left: 45px;">E-mail</label>
<input style="margin-left: 0px; width: 240px; border: 1.75px solid; border-color: rgb(54,101,143);" type="Email" name="E-mail">
</div>
<div style="margin-top: 7px;">
<label style="margin-left: 45px;">Tel</label>
<input style="margin-left: 23.25px; width: 240px; border: 1.75px solid; border-color: rgb(54,101,143);" type="tel" name="tel" pattern="[0-9]{4}-[0-9]{7}">
</div>
<div style="margin-top: 15px; margin-left: 43px;">
<input type="checkbox" name="tick" id="tick">
<label for="tick">Please contact me as soon as possible regarding this matter</label>
</div>
<div style="margin-top: 0px; margin-left: 43px;">
<label>My email:</label> <a href="">ezmir.razali@mmu.edu.my</a>
</div>
<div style="margin-top: 15px;">
<button type="submit" form="form1" value="submit" style="border: 1.5px solid; border-radius: 3px; border-color: rgb(54,101,143);">Send</button>
<button type="Clear" value="Clear" style="border: 1.5px solid; border-radius: 3px; border-color: rgb(54,101,143);">Clear</button>
</div>
</form>
<div style="margin-left: 0px; margin-top: 15px; margin-bottom: 15px;">
<a href="file:///D:/E-Rozgar%20(Course%20Training%20Lectures)/12.%207-1-2021/index.html">Back to Main Page</a>
</div>
</body>
</html>
write html code to design html form of below image
<!DOCTYPE html>
<html>
<head>
<title>Activity 2</title>
<style type="">
.abc{
width: 800px;
height: 450px;
margin-left: 200px;
margin-top: 50px;
border: 1px solid;
border-color: rgb(74,52,212);
}
.abc1{
width: 335px;
color: gray;
margin-left: 30px;
border-top: none;
border-right: none;
border-bottom: 1px solid;
border-left: none;
border-color: rgb(226,226,226);
padding-bottom: 8px;
}
.abc2{
width: 155px;
margin-left: -9px;
border-top: none;
border-right: none;
border-bottom: 1px solid;
border-left: none;
border-color: rgb(226,226,226);
padding-bottom: 8px;
}
.abc3{
width: 155px;
float: left;
margin-left: 165px;
margin-top: -38px;
border-top: none;
border-right: none;
border-bottom: 1px solid;
border-left: none;
border-color: rgb(226,226,226);
padding-bottom: 8px;
}
.abc4{
width: 335px;
color: gray;
margin-left: 30px;
border-top: none;
border-right: none;
border-bottom: 1px solid;
border-left: none;
border-color: rgb(226,226,226);
padding-bottom: 8px;
}
.abc5{
width: 335px;
margin-left: -9px;
border-top: none;
border-right: none;
border-bottom: 1px solid;
border-left: none;
border-color: rgb(226,226,226);
padding-bottom: 8px;
}
.abc6{
width: 200px;
margin-left: -9px;
border-top: none;
border-right: none;
border-bottom: 1px solid;
border-left: none;
border-color: rgb(226,226,226);
padding-bottom: 8px;
}
.abc7{
width: 120px;
color: gray;
float: left;
margin-left: 250px;
margin-top: -39px;
border-top: none;
border-right: none;
border-bottom: 1px solid;
border-left: none;
border-color: rgb(226,226,226);
padding-bottom: 8px;
}
.cde{
width: 400px;
height: 450px;
margin-left: 399px;
margin-top: -284px;
border: 1px solid;
border-color: rgb(74,52,212);
background-color: rgb(74,52,212);
float: left;
}
.cde1{
width: 335px;
color: white;
margin-left: 30px;
border-top: none;
border-right: none;
border-bottom: 1px solid;
border-left: none;
background-color: rgb(74,52,212);
border-color: rgb(226,226,226);
padding-bottom: 8px;
}
.cde2{
width: 335px;
color: white;
margin-left: -10px;
border-top: none;
border-right: none;
border-bottom: 1px solid;
border-left: none;
background-color: rgb(74,52,212);
border-color: rgb(226,226,226);
padding-bottom: 8px;
}
.cde3{
width: 125px;
color: white;
margin-left: -9px;
margin-top: -38px;
border-top: none;
border-right: none;
border-bottom: 1px solid;
border-left: none;
background-color: rgb(74,52,212);
border-color: rgb(226,226,226);
padding-bottom: 8px;
}
.cde4{
width: 190px;
float: left;
color: white;
margin-left: 180px;
margin-top: -39px;
border-top: none;
border-right: none;
border-bottom: 1px solid;
border-left: none;
background-color: rgb(74,52,212);
border-color: rgb(226,226,226);
padding-bottom: 8px;
}
.cde5{
width: 339px;
color: white;
margin-left: 30px;
border-top: none;
border-right: none;
border-bottom: 1px solid;
border-left: none;
background-color: rgb(74,52,212);
border-color: rgb(226,226,226);
padding-bottom: 8px;
}
.cde6{
width: 125px;
color: white;
margin-left: -9px;
margin-top: -38px;
border-top: none;
border-right: none;
border-bottom: 1px solid;
border-left: none;
background-color: rgb(74,52,212);
border-color: rgb(226,226,226);
padding-bottom: 8px;
}
.cde7{
width: 190px;
float: left;
color: white;
margin-left: 135px;
margin-top: -39px;
border-top: none;
border-right: none;
border-bottom: 1px solid;
border-left: none;
background-color: rgb(74,52,212);
border-color: rgb(226,226,226);
padding-bottom: 8px;
}
.cde8{
width: 335px;
color: white;
margin-left: -10px;
border-top: none;
border-right: none;
border-bottom: 1px solid;
border-left: none;
background-color: rgb(74,52,212);
border-color: rgb(226,226,226);
padding-bottom: 8px;
}
.cde9{
float: left;
color: white;
margin-left: 168px;
margin-top: -18px;
}
.cde10{
margin-left: 70px;
color: white;
}
.button1{
background-color: white;
width: 150px;
height: 40px;
border-radius: 30px;
margin-top: 18px;
margin-left: 45px;
border: none;
}
</style>
</head>
<body>
<div class="abc">
<form method="get" id="form2">
<div>
<h3 style="margin-left: 30px; color: rgb(87,133,190); margin-top: 30px;">General Information</h3>
<div>
<select class="abc1" name="title" id="title">
<option placeholder="title">Title</option>
<option value="mr">Mr.</option>
<option value="mrs">Mrs.</option>
<option value="ms">Ms.</option>
</select>
</div>
<dir>
<input class="abc2" type="text" id="fname" name="fname" placeholder="First Name">
</dir>
<dir>
<input class="abc3" type="text" id="lname" name="lname" placeholder="Last Name">
</dir>
</div>
<div>
<select class="abc4" name="position" id="position">
<option placeholder="position">Position</option>
<option placeholder="1st">First</option>
<option placeholder="2nd">Second</option>
<option placeholder="3rd">Third</option>
</select>
</div>
<dir>
<input class="abc5" type="text" id="company" name="company" placeholder="Company">
</dir>
<dir>
<input class="abc6" type="text" id="busarea" name="busarea" placeholder="Business Areana">
</dir>
<div>
<select class="abc7" name="employees" id="employees">
<option placeholder="employees">Employees</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="cde">
<h3 style="margin-left: 30px; color: white; margin-top: 30px;">Contact Details</h3>
<div>
<input style="color: white;" class="cde1" type="text" id="street" name="street" value="Street + Nr">
</div>
<dir>
<input class="cde2" type="text" id="addin" name="addin" value="Additional Information">
</dir>
<dir>
<input class="cde3" type="text" id="zipcode" name="zipcode" value="Zip Code" pattern="[0-9]{5}">
</dir>
<div>
<select class="cde4" name="place" id="place">
<option value="place">Place</option>
<option value="lahore">Lahore</option>
<option value="karachi">Karachi</option>
<option value="multan">Multan</option>
</select>
</div>
<div>
<select class="cde5" name="country" id="country">
<option value="country">Country</option>
<option value="1st">Pakistan</option>
<option value="2nd">Saudia Arabia</option>
<option value="3rd">China</option>
</select>
</div>
<dir>
<input class="cde6" type="text" id="code" name="code" value="Code +" pattern="[0-9]{2}">
</dir>
<dir>
<input class="cde7" type="text" id="phnum" name="phnum" value="Phone Number" pattern="[0-9]{10}">
</dir>
<dir>
<input class="cde8" type="Email" id="mail" name="mail" value="Your Email">
</dir>
<div>
<input style="margin-left: 50px;" type="radio" name="terms" id="terms" value="terms" checked>
<label style="color: white;" for="terms">I do accept the</label>
</div>
<div>
<a class="cde9" href="">Terms and Conditions</a>
</div>
<div class="cde10">
of your site
</div>
<div>
<button class="button1" type="submit" form="form2"><b>Register Badge</b></button>
</div>
</div>
</div>
</form>
</body>
</html>
Hello, my name is Muhammad Bin Jameel.
No comments:
Post a Comment