Example Help PDF Help Basic JS Examples

HTML5 Forms

drawn line


Input Types

Input TypehtmlDescription
textinput type="text"Simple text input field
emailinput type="email"Will only accept a suitable email address as input. If browser set up to autofill will automatically fill this field.
passwordinput type="password"For passwords - masks input with *
urlinput type="url"Link to a URL - if on iphone - keyboard will show .com to aid input
radio buttonsinput type="radio"Radio buttons - mutually exclusive - if you select one, you cannot select another, (give each radio button in group the same name)
checkboxinput type="checkbox"Checked = Yes, Unchecked = No
submitinput type="submit"When clicked will run the set form action
resetinput type="reset"Clears the form of any input



I have a bike
I have a car

Autocomplete / Autofocus

autocompleteinput type="text" autocomplete="off"Default is for autocomplete to be on - but you can turn it off
autofocusinput type="text" autofocusSets 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


Refresh the page and you will see the autofocus has been set on the "Simple Text Input" input field at the start - if I had set it on a field in this part of the page, when you loaded the page it would jump down the page immediately.

Placeholder Text

placeholderinput 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.


Required input

requiredinput type="text" required="yes"Form validation - form will not submit until user enters something into field.


Number Input

Input Typehtml + attributeDescription
numberinput type="number" min="5" Minimum valid input equals 5
numberinput type="number" max="15" Maximum valid input equals 15
numberinput type="number" step="5" increment in steps of 5 in this example
rangeinput type="range" min="5" max="15" Slider Bar for selecting input


Date Picker

Input TypehtmlDescription
dateinput type="date" Full calendar
monthinput type="month" Calendar wtih month pull down
weekinput type="month" Calendar wtih week pull down
datetimeinput type="datetime" Calendar wtih time picker also
timeinput type="time" Just time picker


CSS Styling of Form Elements

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