HTML5 Forms
| Input Type | html | Description |
|---|---|---|
| text | input type="text" | Simple text input field |
| input type="email" | Will only accept a suitable email address as input. If browser set up to autofill will automatically fill this field. | |
| password | input type="password" | For passwords - masks input with * |
| url | input type="url" | Link to a URL - if on iphone - keyboard will show .com to aid input |
| radio buttons | input type="radio" | Radio buttons - mutually exclusive - if you select one, you cannot select another, (give each radio button in group the same name) |
| checkbox | input type="checkbox" | Checked = Yes, Unchecked = No |
| submit | input type="submit" | When clicked will run the set form action |
| reset | input type="reset" | Clears the form of any input |
| Attribute | html | Description |
|---|---|---|
| autocomplete | input type="text" autocomplete="off" | Default is for autocomplete to be on - but you can turn it off |
| autofocus | input type="text" autofocus | Sets the focus to the field when page loads - be careful - some browsers might jump to this field when page loads - if at bottom then will jump to bottom of page |
| Attribute | html | Description |
|---|---|---|
| placeholder | input type="text" placeholder="please enter last name" | USABILITY - gives user an indication of what to enter into field. Disappears once enter anything into field. If nothing entered into field, placeholder text is not sent when form submitted. |
| Attribute | html | Description |
|---|---|---|
| required | input type="text" required="yes" | Form validation - form will not submit until user enters something into field. |
| Input Type | html + attribute | Description |
|---|---|---|
| number | input type="number" min="5" | Minimum valid input equals 5 |
| number | input type="number" max="15" | Maximum valid input equals 15 |
| number | input type="number" step="5" | increment in steps of 5 in this example |
| range | input type="range" min="5" max="15" | Slider Bar for selecting input |
| Input Type | html | Description |
|---|---|---|
| date | input type="date" | Full calendar |
| month | input type="month" | Calendar wtih month pull down |
| week | input type="month" | Calendar wtih week pull down |
| datetime | input type="datetime" | Calendar wtih time picker also |
| time | input type="time" | Just time picker |
| CSS | Description |
|---|---|
| #idofelement {background-color: red;} | Use the html id to to style in CSS |
| input[type="text"]{background-color: red;} | Applies CSS to all input elements of type text |