Html5 contains lots of elements using which you can have lots of different forms and the extra sugar qoued term "CSS" which provide additional styles to your form. CSS helps to make the forms look attractive and we can also use javascript to make the form more interactive.
Lets have some simple code to create form using html and css
Steps:
1.Add HTML code first:
Use a <form> element to process the input.. Then add inputs (with a matching label) for each field:
Example:
Output will be:
2. Now from the above output image, it is simpe web page without any style so add some CSS code here
Example:
* {box-sizing: border-box}
/* Add padding to containers */
.container {
padding: 16px;
}
/* Full-width input fields */
input[type=text], input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;
}
/* Overwrite default styles of hr */
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
/* Set a style for the submit/register button */
.registerbtn {
background-color: #4CAF50;
color: white;
padding: 16px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
.registerbtn:hover {
opacity:1;
}
/* Add a blue text color to links */
a {
color: dodgerblue;
}
/* Set a grey background color and center the text of the "sign in" section */
.signin {
background-color: #f1f1f1;
text-align: center;
}
Final output:
