The HTML5 forms focus on enhancing the existing simple HTML forms to encompass more types of controls and address the limitations that web developers face today. One of the best things about them is that you can use almost all the new input types, elements, and attributes right now and the HTML5 forms are fully backward compatible. The browser, which supports the new HTML5 elements, enhances their features, otherwise the browser, which does not support it, displays them as a textbox.
In this section, we will learn the new HTML5 <form> elements, such as the <input> types, elements, and attributes that are introduced to enhance the capabilities of forms.
date: Thedatetype allows the user to select a date with no time zone.It is supported in
.Syntax:
<input type= "date" name= "#">Attributes:
value: The initial value. The format is yyyy-mm-ddmin,max: The range in which the smallest and largest dates can be selected
datetime: Thedatetimetype allows the user to select a date and a time with the time zone set to UTC.The format is yyyy-mm-dd HH:MM.
It is supported in
.Syntax:
<input type= "datetime" name= "#">datetime-local: Thedatetime-localtype allows the user to select a date and time with no time zone. The format used is yyyy-mm-dd HH:MM.It is supported in
.Syntax:
<input type= "datetime-local" name= "#">color: Thecolortype results in opening a color chooser pop up and is used to choose a color of the<input>type#rrggbb(hex value). It could be represented by a swatch or a wheel picker.The value chosen must be a valid simple color's hex value such as
#ffffff.It is supported in
.Syntax:
<input type= "color" id= "#"name= "#">Attributes:
value: The initial value
number: Thenumbertype allows the user to input the numbers in eitherintegerorfloating point.It is also called a spinner.
We can set restrictions on what numbers are accepted.
It is supported in
.Syntax:
<input type= "number" name= "#">Attributes:
range: Therangetype allows the user to input the numbers in either integer or floating point from a range of numbers. It is displayed in the form of a slider.Using this, the exact value is not shown unless you use JavaScript, so use
<input type="number" />if you want the user to choose an exact value.We can set restrictions on what numbers are accepted.
It is supported in
.Syntax:
<input type= "range" name= "#">Attributes:
value: The initial value. The default value is the mid of the slider.min,max: The range in which the smallest and largest values can be selected. The default for min is 0 and max is 100.step: This tells us how much to change the values when we scroll the spinner. The default is 1.
email: Theemailtype allows the user to enter the text in e-mail address format[email protected].The entered text is automatically validated when clicked on the Submit button.
If multiple attributes are specified, multiple e-mail addresses can be entered, separated by commas.
It is supported in
.Syntax:
<input type= "email" name= "#">Attributes:
Using multiple attributes, that is, more than one e-mail ID, is accepted and each attribute is separated by a comma.
search: The<input>typesearchallows the user to enter text that the user wants to search for.A search field behaves like a standard text field and has inbuilt clear text functionality, such as the cross button in WebKit browsers.
It is supported in
.Syntax:
<input type= "search" name= "#">Attributes:
value: The initial value
tel: Theteltype allows the user to input a telephone number.teldoes not provide any default syntax, so if you want to ensure a particular format, you can usepatternto do additional validation.No browser support till now.
Syntax:
<input type= "tel" name= "#">Attributes:
value: The initial value as a phone number
month: Themonthtype allows the user to select a month and a year with no time zone.It is supported in
.Syntax:
<input type= "month" name= "#" >Attributes:
value: The initial value. The format is yyyy-mm.min,max: The range in which the smallest and largest values can be selected.
time: Thetimetype allows the user to select a time value with hour, minutes, seconds, and fractional seconds with no time zone.It is supported in
.Syntax:
<input type= "time" name= "#">url: Theurltype allows the user to input an absolute URL.The entered text is automatically validated when clicked on the Submit button.
It is supported in
.Syntax:
<input type= "url" name= "#" >Attributes:
value: The initial value as an absolute URL
week: Theweektype allows the user to select a week and a year with no time zone.It is supported in
.Syntax:
<input type= "week" name= "#">
Attributes:
value: The initial value. The format is yyyy-mmW.
So far we have learned about the various <input> types. Now let's see the new HTML5 <form> elements.
<datalist>: The<datalist>element provides a list of predefined options for form controls to the user as they input data. It is used to provide anautocompletefeature on the<form>elements.For instance, if a user enters some text in a text field, a list would drop down with prefilled values that they could choose from.
It is supported in
.For example:
<input list= "browsers" name= "browser"> <datalist id= "browsers"> <option value= "Internet Explorer"> <option value= "Firefox"> </datalist><keygen>: The<keygen>element is used to provide a secure way to authenticate users.When the form is submitted, the private key is stored in the local keystore and the public key is packaged and sent to the server.
It is supported in
.For example:
<form action= "keygen.html" method= "get"><input type= "text" name= "username"><keygen name= "security"><input type= "submit"> </form><output>: The<output>element represents the result of a calculation performed like the one performed by scripts.It is supported in
.For example:
<form onsubmit="return false" oninput="o.value=parseInt(a.value)+parseInt(b.value)"><input name="a" type="number" step="any">+<input name="b" type="number" step= "any"> =<output name="o"></output></form>
autocomplete: Theautocompleteattribute allows users to complete the forms based on earlier inputs. We can have an autocompleteonoption for the form and anoffoption for specific input fields or vice versa.It works with both the
<form>and<input>types such astextbox,datepicker,range,color,url,tel,search, andemail.It is supported in
.For example:
<input type="text" name="city" autocomplete="on">autofocus: When theautofocusattribute is added, an<input>type automatically gets focus when the page loads.For instance, when we open the Google home page or any search engine, the focus automatically goes to the textbox where a user enters the text to perform a search.
It works with the
<input>types,textbox,search,url,email,tel, andpassword.It is supported in
.For example:
<input type="text" name="city"> <input type="text" name="state" autofocus>placeholder: Theplaceholderattribute gives users a hint that describes the expected value of an<input>field.It disappears when the control is clicked on or gains focus.
It should be used only for short descriptions or else use the
titleattribute.It works with the
<input>types,textbox,search,url,email,tel, andpassword.It is supported in
.For example:
<input type="text" name="name" placeholder="First Name">minandmax: Theminandmaxattributes are used to specify the minimum and maximum value to an<input>type.It works with the
<input>types,number,range,date,datetime,datetime-local,month,time, andweek.It is supported in
.For example:
<input type="number" min="1" max="5">
list: Thelistattribute refers to a<datalist>element that contains predefined options for an<input>element.It is used to provide an
autocompletefeature on the<form>elements.For instance, if a user enters some text in a text field, a list would drop down with prefilled values from which they could choose.
It works with the
<input>types,textbox,search,url,email,tel.It is supported in
.For example:
<input list= "browsers" name= "browser"> <datalist id= "browsers"> <option value= "Internet Explorer"> <option value= "Firefox"> </datalist>
formnovalidate: Theformnovalidateattribute specifies that the form should not be validated during submission. It overrides thenovalidateattribute of the<form>elements.It works with the
<input>types,submitandimage.It is supported in
.For example:
<input type="email" name="email"><input type="submit" formnovalidate value="Submit">form: Theformattribute specifies one or more forms that an<input>type belongs to, or in other words, it allows the users to associate any orphaned form control with any<form>element on the page.It is supported in
.For example:
<body> <form action="form.html" id="form1"><input type="text" name="fname"><br><input type="submit" value="Submit"></form> <p>The "Last name" field below is outside the form element, but it is still a part of the form</p> <input type="text" name="lname" form="form1"> </body>
formaction: Theformactionattribute specifies the URL of a file or application that will submit the form.It works with the
<input>types,submitandimage.It is supported in
.For example:
<input type="submit" value="Submit" formaction="form.html">formenctype: Theformenctypeattribute specifies how the form data is encoded when submitting to the server.It works with the
postmethod only.It works with the
<input>types,submitandimage.It is supported in
.For example:
<input type="submit" value="Submit" formenctype="multipart/form-data">formmethod: Theformmethodattribute specifies which HTTP method such asGET,POST,PUT, andDELETEwill be used to submit the form data.It works with the
<input>types,submitandimage.It is supported in
.For example:
<input type="submit" value="Submit" formmethod="post">formtarget: Theformtargetattribute specifies the target window to display the response received after submitting the form.It works with the
<input>types,submitandimage.It is supported in
.For example:
<input type="submit" value="Submit" formtarget="_self">Values:
blankselfparenttopframename
multiple: Themultipleattribute allows users to enter more than one value to the<input>types.It works with the
<input>types,emailandfile.It is supported in
.For example:
<input type= "file" name= "image"multiple>novalidate: Thenovalidateattribute specifies that the form should not be validated when the Submit button is clicked.It is supported in
.For example:
<form action= "form.html" novalidate> <input type= "text" name= "city"> <input type= "text" name= "state" autofocus> </form>step: Let us understand thestepattribute with an example. Ifstep=2, legal numbers could be2,0,2,4, and6.It works with the
<input>types,number,range,date,datetime,datetime-local,month,time, andweek.It is supported in
.For example:
<input type= "range" name= "#" step= "2">required: Therequiredattribute, when added, enforces that an input field must be filled out before submitting the form.Currently, the error messages are specific to the browsers and cannot be controlled by the CSS.
It replaces the basic
<form>validations that were implemented with JavaScript, thus saving development time.It is supported in
.For example:
<input type= "text" name= "city"required>pattern: Using thepatternattribute, you can declare your own requirements for validation usingRegular Expressions(regex).It works with the
<input>types,text,search,url,tel,email, andpassword.In case, the value entered by a user does not match the pattern, it will display a browser generic message.
It is supported in
.For example:
<input type= "text" name= "country_code" pattern= "[A-Za-z]{3}" placeholder= "Three letter country code">