How to create a responsive HTML5 form

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

 

 
 

tags: html5 web tutorials html tools web design web development


We use our own cookies and third-party cookies to improve our services, show products based on your preferences, analyse the browsing habits of our users, and enable interaction with social networks. Continuing to browse our sites implies full acceptance of their use. You can change your cookie setting or get more information here: Cookies policy .