Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
11th June 2013

Create stylish responsive HTML5 forms

Add validation, style and an all-screen solution with HTML5 input types, attributes and CSS3

Create stylish responsive HTML5 forms

The form is a simple but effective method for feedback and communication. HTML5 introduced a selection of new input types and attributes that make the creation and validation of forms far easier than previous methods. Instead of just input type=text, users can now can add url, date, telephone and email to add instant validation to a field.

Adding an input type such as email means that the user needs to write an email address in the correct format. Adding the ‘required’ element means that a form cannot be submitted until the required field has been populated. Another interesting addition is placeholder, which allows the inclusion of text, until the field comes into focus, which is ideal for search fields. Forms are typically bland, but with some CSS3 effects and a little imagination, we will demonstrate how to make them both attractive and responsive.

DOWNLOAD TUTORIAL FILES

Basic page

The first step is to create the basic HTML needed for the page. We are going to assume that the initial HTML page is already in place with HTML doctype already defined ie, <!doctype html>. We are going to build the form as a standalone component that can be dropped into an existing page, pretty much ready to use.

001 <!doctype html>
002 <html>
003 <head>
004 <title>HTML5 Forms</title>
005 </head>
006 <body>
007 </body>
008 </html>

Include web fonts

The form is going to be placed inside a generic container which can be styled to suit the page. For the purposes of this tutorial, we’ll use a background image and a Google web font. Get the Google Web Font code (eg Open Sans), and place in the head of the page.

Create a container

It is standard practice to create a container for a single column of fields. Create a <div> tag and name it accordingly ie #newform. Set the width to 470px, height to auto, add 5px padding left and right and set the margins to auto. These can be adjusted to suit.

001 #newform {
002 width:470px;
003 padding: 0px 5px;
004 margin: 0 auto;
005 }

Add input fields

The form is going to include a selection of HTML5-supported fields to demonstrate how they operate. The first step is to add an opening and closing set of form tags. We are going to use five fields and a submit button. Start by 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>

Input type

The first two fields are going to be names, so they remain as text. The third is going to be an email address, so this is changed to email, the fourth a date, so text becomes date and the final field will be a web address, so this needs to be made 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>

Naming fields

Form fields need a unique name to identify them. For instance, the first two fields are both names but will be called firstname and surname. The email field will simply be email, date will be startdate and url will be webaddress. The names can be modified to whatever you wish to call them.

001 <form>
002 <input type=”text” name=”firstname”>
003 <input type=”text” name=”surname”>
004 <input type=”email” name=”email”>
005 <input type=”date” name=”startdate”>
006 <input type=”url” name=”webaddress”>
007 <input type=”submit”>
008 </form>

Labels

Currently all the fields do not have an identity, so a label is going to be added to each field. Add a set of opening and closing labels above each field and name accordingly eg, First name, Surname, Email etc. Next add the required attribute to the fields that have to have data to complete the form, eg email.

001 <label>First name</label>
002 <input type=”text” name=”firstname” required>
003 <label>Surname</label>
004 <input type=”text” name=”surname” required>
005 <label>Email</label>
006 <input type=”email” name=”email” required>

Text styling

The basis of the form is now in place, so it is time to start styling. The first step is to style the text. Add the body tag to the CSS and choose a size, weight and colour for global text styling. This will style up the labels, but these can be modified later on if desired.

001 font-family: “Open Sans”, Arial, sans-serif;
002 font-size: 14px;
003 font-weight: 300;
004 color: #000;
005 }

Full width

To make the form more 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. This will immediately place the labels above its accompanying field.

001 input {
002 width: 100%;
003 }

Input style

To add more a bit more panache to the input field, the text is going to be styled up and the height fixed. We have set the height to 40px and then added the desired font weight and size. Next it’s a good idea to
save and preview to make sure that the font and height complement each other. Add a background colour, if you like, to emphasise each field.

001  input {
002 width: 100%;
003 height: 40px;
004 width: 100%;
005 font: 300 24px “Open Sans”, Arial, sans-serif;
006 }

Make some space

The labels and fields currently sit right on top of one another. So in order to give the form some space, first add a bottom margin of 10px to the input attribute. To add space between the text and the field, add a top margin of 5px.

001  input {width: 100%;
002 height: 40px;
003 font: 300 24px “Open Sans”, Arial, sans-serif;
004 margin: 5px 0px 10px 0px;}

Placeholder text

The placeholder attribute allows text to be added to a field while the field is empty. When the field comes into focus – ie it is clicked – and the user starts typing then the placeholder text disappears. To add placeholder text to any field in the form, simply add placeholder=”your text here“.

001 <label>First name</label>
002 <input type=”text” name=”firstname” 
003 placeholder=”your text here” required>

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.

Value to URL

The url field allows users to add a web address and to ensure that the field works correctly, http:// needs to precede the web address. To ensure there is no ambiguity in how a url is added, http:// prefix is to be included by adding value=”http://” to the input field.

001 <label>Web address</label
002 <input type=”url” value=”http://” 
003 name=”webaddress”>

Style button

The default submit button displays differently in different browsers. To overcome this issue, and style the button to match the form, a selection of CSS needs to be added. Add the following syntax input[type=submit] { } and add any CSS styling between the brackets. Note that a border is added to a button; to create a flat effect add border: none.

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

Add a title

To state the purpose of a form a title can be added, or alternatively a logo. To add a title, add a set of <h2> tags (this could be h3), now style up the text. In our example the text has a fixed size, a bottom border, different font to the standard text and a text shadow.

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

Finish up

To give the form some interest an opaque background has been added to the form containing tag, plus a box shadow and a border-radius to finish. To make the form responsive, simply resize the #newform <div> tag and the fields will resize automatically. The height of the form is set to auto to compensate.

001 #newform {
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;}

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • http://www.identifywebdesign.co.uk/ Web Design Wakefield

      Hi Stave!
      Thanks for the post ” Create stylish responsive HTML5 forms” . I found it very helpful and expect other will find it useful too.

      Cheers,
      Michael

    • imagine_digital

      This is a test comment

    • Prorock Comenta

      Ist completely NOT responsive…..