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,