A Quick Look at HTML5 Form Features
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 relatedinput
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
- 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 becomeclass=foo
. Use whichever you feel more comfortable with. - You can use
data-*
attibutes to specify custom attributes. For exampledata-user-id="10"
and then maybe use the value in Javascript to perform some action. Quite handy feature.
Got Questions? Ask in the comments :)