In: Computer Science
Create a form using the following HTML elements at a
minimum. Style the form in your CSS. You do not need to include a
form action (i.e. the form doesn't have to do anything - we're
designing the front end of the form).
textarea
textbox
input type of "email"
select
radio button
checkbox
submit button
style at least three elements of your form in your
stylesheet, including your submit button
Use a comment to delineate the beginning and end of
the section of CSS used in for this form to explain what it is for
future webmasters of your site.
HTML file :registers.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- title for web page -->
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Internal Stylesheet -->
<style>
/* style for body */
body{
background-color: aqua;
}
/* styles for labels */
label{
display: block;
margin-top: 10px;
font-weight: bold;
font-size: 16px;
font-style: italic;
}
/* style for button */
input[type='submit'],input[type='reset']
{
color: white;
background-color: maroon;
}
/* style for texbox */
input[type='text']
{
border: 2px solid green;
}
/* style for form */
form{
padding: 25px;
width: 500px;
border: 2px solid red;
}
</style>
</head>
<body>
<form>
<h1>Registration Form</h1>
<!-- label for the name -->
<label for="name">Name </label>
<!-- textbox for name -->
<input type="text" id="nameTextbox" name="name"/>
<!-- label for the address -->
<label for="address">Address </label>
<!-- textbox for Address -->
<textarea id="AddressTextarea" rows="5" cols="23" name="Address"></textarea>
<!-- label for the gender -->
<label for="gender">Gender </label>
<!-- radio button for gender -->
<input type="radio" id="maleRadio" name="gender"/>Male
<input type="radio" id="femaleRadio" name="gender"/>Female
<!-- label for the email -->
<label for="email">Email </label>
<!-- input type=email -->
<input type="email" id="emailTextbox" name="email"/>
<!-- label for the location -->
<label for="location">Location </label>
<!-- select element -->
<select id="ddlLocation" name="location">
<option value="--Select--" readonly>--Select--</option>
<option value="India">India</option>
<option value="USA">USA</option>
<option value="UK">Uk</option>
</select>
<!-- label for the Education -->
<label for="education">Education </label>
<!-- checkbox for education -->
<input type="checkbox" id="schoolCheckbox" name="education"/>School
<input type="checkbox" id="secondaryCheckbox" name="education"/>Secondary
<input type="checkbox" id="ugCheckbox" name="education"/>UG
<input type="checkbox" id="pgCheckbox" name="education"/>PG
<br><br>
<!-- button to submit form -->
<input type="submit"/>
<!-- button to rest form -->
<input type="reset"/>
</form>
</body>
</html>
==========================================
Output :