Last updated on March 11th, 2022 at 07:57 am
Here is a simple HTML registration form design with basic CSS, this make the form more attractive for users. You can also create a login form by modifying the below HTML code. When user focus on each input field this form also has ability to change border color of the select text / textarea thereby highlighting them. I have also added autofocus option this will automatically get focus when the web page loads.
Let’s create a simple html form as described below
<form onsubmit="" id="form1" name="form1" method="post" action="">
First Name<br><input id="firstname" type="text" autofocus name="firstname" />
<br>
Last Name<br><input id="lastname" type="text" name="lastname" />
<br>Email Address<br><input id="email" type="text" name="email" />
<br>Comments<br><textarea id="comment" name="comment"></textarea><p>
<input type="submit" value="Submit Form" />
</form>
Now second step is to add CSS style to the above form.
input[type=text]{
margin-bottom:20px;
margin-top:10px;
width:60%;
padding:15px;
border-radius:5px;
border:1px solid #7ac9b7
}
input[type=submit]{
margin-bottom:20px;
width:60%;
padding:15px;
border-radius:5px;
border: 3px solid #000;
background-color: #99FF33;
}
textarea{
width:60%;
padding:15px;
margin-top:10px;
border:1px solid #7ac9b7;
border-radius:5px;
margin-bottom:20px;
resize:none
}
input[type=text]:focus,textarea:focus{
border:3px solid #000;
}
You are all done here is the complete HTML code we discussed above.
<html>
<title>HTML CSS Form With Styling</title><body><style>
input[type=text]{
margin-bottom:20px;
margin-top:10px;
width:60%;
padding:15px;
border-radius:5px;
border:1px solid #7ac9b7
}
input[type=submit]{
margin-bottom:20px;
width:60%;
padding:15px;
border-radius:5px;
border: 3px solid #000;
background-color: #99FF33;
}
textarea{
width:60%;
padding:15px;
margin-top:10px;
border:1px solid #7ac9b7;
border-radius:5px;
margin-bottom:20px;
resize:none
}
input[type=text]:focus,textarea:focus{
border:3px solid #000;
}
</style>
<form onsubmit="" id="form1" name="form1" method="post" action="">
First Name<br><input id="firstname" type="text" autofocus name="firstname" />
<br>
Last Name<br><input id="lastname" type="text" name="lastname" />
<br>Email Address<br><input id="email" type="text" name="email" />
<br>Comments<br><textarea id="comment" name="comment"></textarea><p>
<input type="submit" value="Submit Form" />
</form>
</body>
</html>
Now let us do some validation without using Javascript. This can be done using required option within input field. For example if “EMAIL” field is required
<input required id="email" type="text" name="email" />
If you would like to add a short hint or an example of how the email should be formatted etc., within the email field try this
<input required id="email" placeholder="Your Email, For example : [email protected]" type="text" name="email" />
admin