Form, very non exciting thing in a markup language to work with, especially for me. Even though I am a designer, all those form issues, validations still makes me see birds flying around my head. But as soon as HTML5 introduced its form tag with a dozen of new form tags, it gave me full mouth smile.
Today I’ll introduce you few new form elements. I hope after reading this article you will be able to create your own form with HTML5 powered forms.
First let’s have a look how our form will look alike.
Above is the simple form that contains autofocusing, textbox validation, drop box, email validation or email verifier, url validation, textarea validation. Tensed? Don’t be . All these mind blowing properties are now inbuilt facility provided by HTML5.
If you are feeling lazy you can download the working html5 form example.
Here is our code.
[code lang=”html”]
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Code Pixelz|HTML5 form elements</title>
<link href=”style.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
<form id=”detail”>
<ol>
<li>
<label for=”name”>Name</label>
<input id=”name” name=”name” placeholder=”First and last name” required=”” autofocus=”” type=”text”>
</li>
<li>
<label for=”age”>Age</label>
<select>
<option value =”1″>18</option><option value =”19″>19</option><option value =”20″>20</option><option value =”21″>21</option><option value =”22″>22</option>
</select>
</li>
<li>
<label for=”url”>Url</label>
<input id=”url” name=”url” placeholder=”http://example.com” required=”” type=”url”>
</li>
<li>
<label for=”email”>Email</label>
<input id=”email” name=”email” placeholder=”example@domain.com” required=”” type=”email”>
</li>
<li>
<label for=”phone”>Phone</label>
<input id=”phone” name=”phone” placeholder=”Eg. +447500000000″ required=”” type=”tel”>
</li>
<li>
<label for=”address”>Address</label>
<textarea id=”address” name=”address” rows=”5″ required=””></textarea>
</li>
<li>
<label for=”postcode”>Post code</label>
<input id=”postcode” name=”postcode” required=”” type=”text”>
</li>
<li>
<label for=”country”>Country</label>
<input id=”country” name=”country” required=”” type=”text”>
</li>
<li>
<legend>Gender</legend>
<input id=”male” name=”male” type=”radio”>
<label for=”male”>Male</label>
<input id=”female” name=”female” type=”radio”>
<label for=”female”>female</label>
</li>
</ol>
<button type=”submit”>Submit!</button>
</form>
</body>
</html>
[/code]
Here is the CSS file
[code lang=”css”]
@charset “utf-8”;
/* CSS Document */
html, body, h1, form, fieldset, legend, ol, li {
margin: 0;
padding: 0;
}
body {
background: #ffffff;
color: #111111;
font-family: Georgia, “Times New Roman”, Times, serif;
padding: 20px;
}
form#detail {
background:#09C;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 20px;
width: 400px;
}
form#detail legend {
color: #384313;
font-size: 16px;
font-weight: bold;
padding-bottom: 10px;
text-shadow: 0 1px 1px #c0d576;
}
form#detail ol li {
line-height: 30px;
list-style: none;
padding: 5px 10px;
margin-bottom: 2px;
}
form#detail ol ol li {
background: none;
border: none;
float: left;
}
form#detail label {
float: left;
font-size: 13px;
width: 110px;
}
form#detail input:not([type=radio]), form#detail textarea, form#detail select {
background: #ffffff;
border: none;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
font: italic 13px Georgia, “Times New Roman”, Times, serif;
outline: none;
padding: 5px;
width: 200px;
}
form#detail input:not([type=submit]):focus, form#detail textarea:focus {
background: #eaeaea;
}
form#detail input[type=radio] {
float: left;
margin-right: 5px;
}
form#detail button {
background: #666;
border: 1px solid #384313;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
color: #ffffff;
display: block;
font: 15px Georgia, “Times New Roman”, Times, serif;
letter-spacing: 1px;
margin: auto;
padding: 5px 20px;
text-shadow: 0 1px 1px #000000;
text-transform: uppercase;
margin-top:20px;
}
form#detail button:hover {
background:#333;
cursor: pointer;
}
[/code]
Here we are going to keep our form simple. Everything is put within <form> tag. Ordered list is also used to group each label and input fields which will provide us a clean look of form making it easier to read/view. Here we have used some new tags of HTML5 like,
Email – used for the email field
Tel – used for the telephone field
Url – used for the URL field
Required – used for the required fields
Placeholder – used for the hints within some fields
Autofocus – used to focus the first input field when page loads
Before HTML5, we had to use javascript, jQuery to validate email field , telephone field, url field, etc. But now HTML5 form tags have made it easier. We can do this without any nags. Now let’s move towards our style sheet.
Here is our form style that wraps our all fields
[code lang=”css”]
form#detail {
background:#09C;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 20px;
width: 400px;
}
[/code]
For the list, margin and padding were provided, list-style is set to none.
[code lang=”css”]
form#detail ol li {
line-height: 30px;
list-style: none;
padding: 5px 10px;
margin-bottom: 2px;
}
form#detail ol ol li {
background: none;
border: none;
float: left;
}
[/code]
Here is our style for label, radio button, textarea, and submit button. To provide user friendly look, cursor is set to pointer for submit button and provided rounded corner.
[code lang=”css”]
form#detail label {
float: left;
font-size: 13px;
width: 110px;
}
form#detail input:not([type=radio]), form#detail textarea, form#detail select {
background: #ffffff;
border: none;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
font: italic 13px Georgia, “Times New Roman”, Times, serif;
outline: none;
padding: 5px;
width: 200px;
}
form#detail input:not([type=submit]):focus, form#detail textarea:focus {
background: #eaeaea;
}
form#detail input[type=radio] {
float: left;
margin-right: 5px;
}
[/code]
At last, remember the form will not look same on every browser as border-radius is not supported by IE and Opera. Go ahead and try out for yourself these new form tags
html5guru says
Lovely form, it is pretty clean , I love it… thanks!