Details

Form

autocomplete


When the user starts to type, options are given for that field based on earlier typed information
<form action="return.php" method="get" autocomplete="on">
values: on, off



novalidate


the form will not validate
<form action="return.php" novalidate="novalidate">

Button

A button can overide the information within the form tag
Allows you to add an image or text element
can be located outside of the form
<button name="name" type="button">send</button>

autofocus


autofocus = "autofocus"
focus is given as soon as the page is loaded

<button value="form-id" type="button">send</button>



formaction


overrides the action attribute in the form element
<button formaction="php/contact.php" value="form-id" type="button">send</button>



formnovalidate


the form is submitted without validation
<button type="submit" formnovalidate="formnovalidate">submit</button>




formmethod


get, post, put or delete
overrides the method attribute in the form element
<button type="submit" formmethod="post" formaction="return.php" form="id-of-form">submit </button>




formtarget


_blank, _self, _parent, or _top
<button type="submit" formtarget="_blank">submit </button>



formtype


How the form is encoded.
Overrides the form enctype attribute
<button type="submit" formtype="value">submit </button>



value


value= the form id or submit
Do not use if you are overridding attributes in the form tag
<button value="form-id" type="button">send</button>

input

autofocus


Allows the user to start typing without having to first click inside the input box.
<input autofocus>
The autofocus has been placed on the Email input below



paceholder


Placeholder text is displayed in the input field until a user clicks or tabs onto that field
<input placeholder="this will be displayed">



validation


<input required>
can be added to any input element . The user will be required to fill-out that element correctly before they can submit the form.



number


<input type="number" min="2" max="10" step="2" value="6">
Min and Max allows you to limit the acceptable range
Step: only works if the browser creates arrows then in this case the user would be able to clck from 2 - 4 - 6 etc.



range


<input type="range" min="2" max="10" step="2" value="6">
Range provides a slider but you need to provide a way to show the values which does not seem too practical to me. If the browser just displays an input box they the values will not make sense to the user



email, url, phone


<input type="email">
<input type="tel">
<input type="url">
If the user fills out any of these elements incorrectly they will be prompted immediately. Hints are given. the display format for the hints depends upon the browser.

The hint will only be given if the user information is not in the correct format. You will still need to include required if you want to be sure the information is filled in.
<input type="email" required="true">



color


<input type="color>
Some browsers will allow you to select a color from a drop-down. If not then the user will need to enter a hex number. If you give value="#ff0000"
For browsers with a drop-down the user will see the color. Other will just see the hex number which provides them with the hint of how to enter the color is they cannot select one.

Color words such as RED are not allowed.



dates and time


Some browsers will allow the user to select from a calendar
Include a type
<input type="date">
<input type="datetime">
<input type="datetime-local">
<input type="week">
<input type="month">

add a value
<input value="2011-04-01" type="date">

you can include a min and max
<input value="2011-04-01" type="date" min="2011-04-01" max="2012-04-01" >



date

- year (all four digits), month, day)
2000-12-19




month

- year, month)
2000-12-19



week

- year, W, week's number)
2000-W10



time

- hour, minute, second, 1/100 second
23:20:50.52




date and time

year, month, day, hour, minute, second, 1/100 second, zone
2000-04-12T23:20:50.188Z