How to create a responsive HTML5 form

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;}