Since the creation of the web, developers have deal with validation of forms, a way to ensure the correct input of data to benefit both the business logic (not having dirty data) and the development of the rest of the application (ensuring that server side data processing gets already filtered info).
HTML5 has come with many awesome features and one of those is very good news to many people that has to do forms all the time.
HTML5 now has attributes that handles this task, so the browser will take charge of this.
A typical form consist of a opening and closing
<form> tag, and inside we put
<input> tags with different types based on our needs. You might want to use
<label>,
<textarea>,
<select> and
<fieldset> as well.
<form action="" autocomplete="off">
<label for="username">Username</label>
<input id="username" name="username">
<label for="password">Password</label>
<input id="password" name="password" type="password">
<input type="submit" class="btn" value="Login">
</form>
HTML5 comes with useful new types:
- color
- date
- datetime
- datetime-local
- email
- month
- number
- range
- search
- tel
- time
- url
- week
You can see current browser compatibility of these types
here.
Particularly in this post we want to discuss the new attributes, they allow us to validate data input on the fly, without the need of
javascript.
- autocomplete
- autofocus
- form
- formaction
- formenctype
- formmethod
- formnovalidate
- formtarget
- height and width
- list
- min and max
- multiple
- pattern (regexp)
- placeholder
- required
- step
To validate non-empty fields, you simply put the required attribute:
<form action="" autocomplete="off">
<label for="username">Username</label>
<input id="username" name="username" required>
<label for="password">Password</label>
<input id="password" name="password" type="password" required>
<input type="submit" class="btn" value="Login">
</form>
Attributes
url and
email allows to validate for valid
url and
email addresses:
<form action="">
<label for="username2">Username</label>
<input id="username2" name="username" required>
<label for="password2">Password</label>
<input id="password2" name="password" type="password" required>
<label for="email">Email</label>
<input id="email" name="email" type="email" required>
<label for="url">Homepage</label>
<input id="url" name="url" type="url">
<input type="submit" class="btn" value="Register">
</form>
The pattern attribute is particularly useful, you can use regular expressions to validate custom types of data entry. The good old title attribute will allow us to specify a message:
<form action="">
<label for="username2">Username</label>
<input id="username2" name="username" pattern="[a-zA-Z0-9]{5,}" title="Minimum 5 letters or numbers." required>
<label for="password2">Password</label>
<input id="password2" name="password" type="password" pattern=".{5,}" title="Minimum 5 letters or numbers." required>
<label for="email">Email</label>
<input id="email" name="email" type="email" required>
<label for="url">Homepage</label>
<input id="url" name="url" type="url">
<input type="submit" class="btn" value="Register">
</form>
You can check current browser support at
caniuse.com
As you can see, with html5 this and many other features will allow faster
coding and more rich web pages.
Reference:
http://w3schools.com/html5/html5_form_attributes.asp
http://css.dzone.com/articles/look-html5-form-validation
