Create HTML CSS Beautiful Form Design
Create HTML CSS Beautiful Form Design
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 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;
}
Complete form code will look like this
<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>
Create HTML CSS Beautiful Form Design, 
