The HTML <form> element defines a form that is used to collect user input:
<form>
.
form elements
.
</form>
Form elements are different types of input elements, like text fields, checkboxes, radio buttons, submit buttons, and more. Brief Introduction into HTML 5 NEW ELEMENTS Search input types allows users leverage on the built in web search api attribute like autofocus can also be added that allows the cursor focus on page load
<form>
<input type="search"
placeholder="search"
autofocus
/>
</form>
Text input types allows a stream of characters known as text. It has an attribute pattern (used to enforce strict validation while using regular expression. Here it will allow some text , white space and some more text.
<input
type="text"
placeholder="first and last name"
required
pattern="(.*)\s(.*)"
/>
<input
type="text"
placeholder="username"
pattern="/^[a-zA-Z0-9_]+$/"
maxlength="15"
/>
<!-- leveraging on the power of regular expression to enforce validation rules to the pattern attribute
and also adopting the maxlength which returns true when an element value length is longer than thethe value in the maxlength attribute
-->
Email input type allows users input a a valid email address
<input
type="email"
placeholder="email address"
required
/>
<!-- Pattern attribute can also be adopted here but its believed that the browser will do a better validation of email address -->
Telephone input type allows user enter a valid telephone number format
<input
type="tel"
placeholder="phone number"
required
/>
Url input type allows users enter a valid url format address
<input
type="url"
placeholder="web address"
/>
Range input type has step attribute which tells the number of increments each time you move the slider in our case 10 , it also has a default attribute of value that tells where the slider should start from
<input
type="range"
min="0"
max="100"
step="10"
value="30"
/>
Datalist element represents a set of option elements that represents predefined options for other controls. It’s great if you want to provide suggestion to users and also if want to allow them fill in their own options as well. To achieve desired output list attribute value should be the datalist id value as shown in the example below
<input
type="text"
list="direction-data"
placeholder="directional preference"
required
/>
<datalist id="direction-data">
<option value="North"></option>
<option value="South"></option>
<option value="East"></option>
<option value="West"></option>
</datalist>
Input type color triggers a color picker with a default color of white
<input
type="color"
value="#ffffff"
/>
Input type tel allows users input in a valid telephone number format
<input
type="tel"
/>
Date based input types allows users input based on various date types such as week, month, datetime, datetime-local
<input
type="month"
value="2019-07"
/>
<!-- you need to give a default value of year - month as shown above -->
<input
type="week"
value="2019-W2"
/>
<!-- Default values should be added to a week input tag -->
<input
type="datetime-local"
value="2019-07-21T05:48:00"
/>
<!-- Default values like year-month-day with the T standing for time which can be from hour-minute-seconds -->
CONCLUSION
The HTML <input> element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent.
For more technical contents subscribe
Follow on twitter
Happy coding🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉