Everybody knows about web forms, isn't it?
Make a <form>, a few <input type="text"> elements, maybe an<input type="password">, finish it off with an <input type="submit"> button, and you’re done.
You don’t know the half of it. HTML5 introduced a selection of new input types and attributes that make the creation and validation of forms far easier than previous methods.
Let's explain how to create a stylish responsive HTML5 form:
1. First step: the basic page
We have to create the basic HTML needed for the page. We are going to build the form as a standalone component.
001 <!doctype html>
002 <html>
003 <head>
004 <title>Awesome HTML5 Form</title>
005 </head>
006 <body>
007 </body>
008 </html>
Step 2: Include fonts
In this tutorial, we’ll use a background image and a Google web font.
Step 3: create a container
Create a <div> and name it #myform. Set the width to 470px, height to auto, add 5px padding left and right and set the margins to auto.
001 #myform {
002 width:470px;
003 padding: 0px 5px;
004 margin: 0 auto;
005 }
Step 4: add input fields
We'll start adding five fields with input type as text and the sixth as submit.
001 <form>
002 <input type=”text”>
003 <input type=”text”>
004 <input type=”text”>
005 <input type=”text”>
006 <input type=”submit”>
007 </form>
Step 5: input type
We have to choose the input types (email, date, url...)
001 <form>
002 <input type=”text”>
003 <input type=”text”>
004 <input type=”email”>
005 <input type=”date”>
006 <input type=”url”>
007 <input type=”submit”>
008 </form>
Step 6: naming fields
We now need to assign a unique name to identify them.
001 <form>
002 <input type=”text” name=”name”>
003 <input type=”text” name=”surname”>
004 <input type=”email” name=”email”>
005 <input type=”date” name=”date”>
006 <input type=”url” name=”website”>
007 <input type=”submit”>
008 </form>
Step 7: labels
For the next step we want to have our labels displayed over the top of our input fields.
001 <label>First name</label>
002 <input type=”text” name=”name” required>
003 <label>Surname</label>
004 <input type=”text” name=”surname” required>
005 <label>Email</label>
006 <input type=”email” name=”email” required>
Step 8 : styling the text
Now let's style the text.
001 font-family: “Open Sans”, Arial, sans-serif;
002 font-size: 12px;
003 font-weight: 300;
004 color: #000;
005 }
Step 9: full width
To make the form responsive, the input fields are going to be given a percentage width. The obvious choice is 100%, but this could be 95% if needed. Add the input selector in the CSS and set the width to 100%, or your chosen width.
001 input {
002 width: 100%;
003 }
Step 10: input style
We have set the height to 30px and then added the desired font weight and size.
001 input {
002 width: 100%;
003 height: 30px;
004 width: 100%;
005 font: 300 24px “Open Sans”, Arial, sans-serif;
006 }
Step 11: add some space
We add a little space between the text and the field, and a top margin of 5px.
001 input {width: 100%;
002 height: 30px;
003 font: 300 24px “Open Sans”, Arial, sans-serif;
004 margin: 5px 0px 10px 0px;}
Step 12: add placeholder text
The placeholder allows text to be added to a field while the field is empty. When the field comes into focus, and the user starts typing then the placeholder, text disappears.
001 <label>First name</label>
002 <input type=”text” name=”name”
003 placeholder=”your text here” required>
Step 13: date input
The input type date renders differently in different browsers. Chrome users will see an arrow that opens a complete datepicker while other browsers will display nothing or other a simplified date picker. For this reason the placeholder text can be called into action to inform the user the format to input a date.
Step 14: add "value" to URL
001 <label>Web address</label
002 <input type=”url” value=”http://”
003 name=”webaddress”>
Step 15: styling the button with CSS
001 input[type=submit] {
002 background-color: #C13A40;
003 height: 50px;
004 width: 100%;
005 border: none;
006 font-weight: 400;
007 font-style: italic;
008 letter-spacing: 2px;
009 color: #FFFFFF;
010 background-color: #FF9900;}
Step 16: add & style up a title
To add a title, add a set of <h1> or <h2>... tags.
001 h2 {
002 font-size: 90px;
003 color: #FF9900;
004 text-shadow: 2px 2px #222;
005 font-family: “Oleo Script”;
006 border-bottom: 2px solid #FFF;
007 text-align: center;
008 margin: 0px 0px 5px 0px;}
Step 17: finish up
To make the form responsive, simply resize the #myform <div> tag and the fields will resize automatically. The height of the form is set to auto to compensate.
001 #myform {
002 width: 470px;
003 height: auto;
004 background-image: url(images/sand02.jpg);
005 margin: 0 auto;
006 padding: 0px 1%;
007 box-shadow: 5px 5px 0px #AAA;
008 border-radius: 5px;}