A Quick Look at HTML5 Form Features

Rishabh

• 17602
• 46
• 3

A concise tutorial on the new form features that HTML5 brings with it. Let's take a quick look at most of them. Form submission is disabled, so just incase you want to test anything, then write some text in the textbox and hit enter. If there is a validation rule or anything applied on the textbox, related popups will appear.

Two extra elements I have used:

• output - You can use it to display some kind of calculation. Like addition, subtraction, etc. on several numbers. I used it in the first js creation.
• datalist - This is pretty cool! It contains a list of "predefined" options that provides an "auto-complete" feature on the related input element.

Following is the entire list of different values that you can use for input's value attribute:

• button
• checkbox
• color
• date
• datetime
• datetime-local
• email
• file
• hidden
• image
• month
• number
• password
• radio
• range
• reset
• search
• submit
• tel
• text
• time
• url
• week

Few Extra Tips:

• With HTML5 you can skip double quotes to quote values of various attributes. So class="foo" can become class=foo. Use whichever you feel more comfortable with.
• You can use data-* attibutes to specify custom attributes. For example data-user-id="10" and then maybe use the value in Javascript to perform some action. Quite handy feature.

Got Questions? Ask in the comments :)

Related:

• CSS Only Solar System Model
• Minions in pure CSS
• Multiple Box Shadows
• Clicking Game
• CSS3 Room