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🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉