Create a form using HTML & CSS
Normally forms are used to collect data from users. HTML form is a collection of text fields, check boxes, ratio buttons and submit buttons. HTML5 introduced new form elements, input types and input attributes.
HTML5 form elements
HTML5 input types
HTML5 input attributes
Here are some of them. Let’s see how they deal with HTML forms.
- Reset
Clicking on reset button we can clear all text areas that we were filled.
Sample code:-
<form>
<label>Username</label>
<input type="text" name="username">
<br><br>
<label>Password</label>
<input type="password" name="password">
<br><br>
<input type="reset" value="Reset">
</form>
2. Select
In select option we can select only one from multiple things. The area is filled with first option by default.
Sample code:-
<form>
<select list="Universities" name="University">
<datalist id="university">
<option value="University of Colombo">University of Colombo</option>
<option value="University of Moratuwa">University of Moratuwa</option>
<option value="University of Peradeniya">University of Peradeniya</option>
<option value="University of Jayawardhanapura">University of Jayawardhanapura</option>
<option value="University of Kelaniya">University of Kelaniya</option>
<option value="University of Ruhuna">University of Ruhuna</option>
<option value="University of Jaffna">University of Jaffna</option>
</datalist>
</form>
3. Date
When clicking on date input text area, it shows us a calendar and we can select the relevant date.
Sample code:-
<form>
<label>Name</label>
<input type="text" name="name">
<br><br>
<label>Birth year</label>
<input type="date" name="date">
<br><br>
<input type="submit" value="Submit">
</form>
4. Autofocus
First input text area is focused by default and curser is blinking there.
Sample code:-
<form>
<label>Username</label>
<input type="text" name="username" autofocus>
<br><br>
<label>Password</label>
<input type="password" name="password" autofocus>
<br><br>
<input type="submit" value="Submit">
</form>
5. Require
Where the text area is with required attribute we can’t submit without filling that area.
Sample code:-
<form>
<label>Email</label>
<input type="email" name="email" required>
<br><br>
<label>Password</label>
<input type="password" name="password" required>
<br><br>
<input type="submit" value="Submit">
</form>
6. Placeholder
When using placeholder we can see some words or a guide to fill the text area. But when we are typing something it is invisible.
Sample code:-
<form>
<label>Username</label>
<input type="text" name="username" placeholder="name">
<br><br>
<label>Email</label>
<input type="email" name="email" placeholder="name@gmail.com">
<br><br>
<label>Password</label>
<input type="password" name="password">
<br><br>
<input type="submit" value="Submit">
</form>
7. Min & Max
We can select a range by adding min and max. when we use min, we can’t select a number below the min value and also when we use max, we can’t select a number above the max value.
Sample code:-
<form>
<label>Name</label>
<input type="text" name="name">
<br><br>
<label>Age</label>
<input type="number" name="age" min="16" max="60">
<br><br>
<input type="submit" value="Submit">
</form>
Task…
Try to create this sample HTML form
Sample answer
HTML code
<html>
<head>
<meta charset="UTF-8">
<title>Sign Up</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="signup">
<img src="https://icons.iconarchive.com/icons/graphicloads/100-flat-2/256/contacts-icon.png" class="avatar">
<h1>Sign Up</h1>
<div id="regwrapper">
<img class="socialIcon" src="googleLogo.png" alt="Google Logo"/>
<img class="socialIcon" src="facebookLogo.png" alt="Facebook Logo"/>
<img class="socialIcon" src="linkedinLogo.png" alt="LinkedIn Logo"/>
</div>
<div>
<input class="inbox" type="text" name="firstname" placeholder="First Name">
</div>
<div>
<input class="inbox" type="text" name="lastname" placeholder="Last Name">
</div>
<div>
<input class="inbox" type="email" name="email" placeholder="Email">
</div>
<div>
<input class="inbox" type="text" name="contact-no" placeholder="Contact Number">
</div>
<div>
<input class="inbox" type="password" name="password" placeholder="Password">
</div>
<div>
<input class="inbox" type="password" name="confirm-password" placeholder="Confirm Password">
</div id="btn">
<input id="btn-submit" type="submit" value="Resister"/>
<div>
<a href="#">Already have an account</a>
</div>
</div>
</body>
</html>CSS code
body{
margin: 0;
padding: 0;
background-image: url(bg.jpg);
background-size: cover;
background-position: left;
font-family: sans-serif;
}
.signup{
width: 320px;
height: 610px;
background: #000;
opacity: 0.8;
color: #fff;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%,-50%);
box-sizing: border-box;
padding: 70px 30px;
}
.avatar{
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
top: -50px;
left:calc(50% - 50px);
}
h1{
margin: 0;
padding: 0 0 20px;
text-align: center;
font-size: 22px;
color: yellow;
}
.socialIcon{
width: 50px;
height: 50px;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 15px;
padding-right: 15px;
}
.inbox{
width: 100%;
margin-bottom: 20px;
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
}
#btn-submit{
border: none;
outline: none;
height: 40px;
width: 100%;
background: yellow;
color: #000;
font-size: 18px;
border-radius: 20px;
}
#btn-submit:hover{
cursor: pointer;
background: yellowgreen;
color: #000;
}
a{
text-decoration: none;
font-size: 12px;
line-height: 20px;
color: darkgrey;
}
a:hover{
color: #886f23;
}Thanks for reading and hope you enjoyed!
