Techie Tip of the Week: HTML5 Forms

In earlier “dialects” of HTML (HTML 4.01, XHTML, etc.), you were stuck with only the following ways of accepting input from visitors:

- select (drop down-menus)
- textarea (large text boxes)
- button (to create a button)
- input type=button – to create a button
- input type=checkbox – for selecting multiple choice
- input type=file – to upload a file
- input type=hidden – to send hidden data like information stored in a cookie
- input type=image – to submit the form with a picture
- input type=password – a text field that displays dots or stars instead of the text
- input type=radio – for selecting one from a series
- input type=reset – to restore the form back to the original way it displayed
- input type=submit – to submit the form
- input type=text – for entering in text

Now, with the advent of HTML5, there are many, many new features and choices!

placeholder – <input placeholder=”text text text” type=”text”> will display text in the text box that will disappear when the visitor clicks, tabs, or taps into the field. As an example, Safari by default displays “Google” (or whatever your default search engine is) as placeholder text in the search box until you click into the search box.

autofocus – <input autofocus> will cause the form field to focus when the page loads. Without the need for JavaScript!

input type=email – a special kind of type=”text” specifically for email addresses. On the iOS devices, the keyboard dynamically changes to include the @ symbol and the . key. In addition, if the visitor doesn’t enter in a valid email address, the browser automatically validates, even if the form builder didn’t use JavaScript!

input type=url - a special kind of type=”text” specifically for web addresses. On the iOS devices, the keyboard dynamically changes to include the .com button, the . key and the / key (but no space bar, since spaces are illegal in web addresses). In addition, if the visitor doesn’t enter in a valid URL address, the browser automatically validates, even if the form builder didn’t use JavaScript!

input type=number – a special kind of type=”text” specifically for numbers. On browsers that support this, the text box becomes a spin box with up and down arrows to help the visitor pick the desired number.

input type=range - another special kind of type=”text” specifically for numbers. On browsers that support this, the text box becomes a slider to help the visitor pick the desired number.

input type=date/month/week/time/datetime - a special kind of type=”text” specifically for picking a date (currently only supported in the Opera web browser).

input type=search – a special kind of type=”text” specifically for search boxes. In Safari and Chrome, this will cause the normally rectangular shaped box have rounded corners! And, as a visitor starts to type, a little X appears in the right side of the box enabling the visitor to clear the search without deleting.

input type=color – a special kind of type=”text” specifically for picking a color. Currently, this feature only works in the Opera browser.

input required – adding the attribute “required” to an input tag causes the browser to validate the form and display notification to the visitor that the field cannot be empty.

form novalidate – if you don’t want the browser to validate, add the attribute novalidate to the form tag.

Enjoy!


Tags: , ,

Leave a Reply

You must be logged in to post a comment.