Useful Tags and Attributes for your Frontend HTML Application

We interact with web forms almost everyday. For a Frontend Developer , there is certainity that in every application their in an inclusion of forms.

To make the designs and forms more intutive , with particularly writing validations for them their are numerous HTML5 attributes, input types which we may use for our application. The best ones are listed below.

1. AutoFocus - It automatically focus on the field when the page is rendered.

 <input type="text" name="first-name" id="first-name"autofocus>

HTML5  form attributes are also called as Boolean Attributes where we can use them where it is set.

2. Autocomplete - This attribute helps in users submitting inputs on the basis of their previous inputs.

3. required - It does not need much introduction, however it is added where the field is necessary to be added, before the submittion of the form.

<input type="text" id="given-name" name="given-name"required>

4. list and datalist element - The list attribute enables the user to associate the user  a list of options with a particular field.The value should be same as that of the ID of the datalist element that resides in the document. Example as below:

<label>Your favorite fruit:
<datalist id="fruits">
  <option value="Apple">Apple</option>
  <option value="Grapes">Grapes</option>
  <option value="Orange">Orange</option>
 </datalist>
If other, please specify:
  <input type="text" name="fruit" list="fruits">
</label>

5.multiple - In addition to the datalist we can move ahead by using multiple. The main benefit of using multiple is that we can allow more than one value to be entered from the datalist. Example

<label>Your favorite fruit:
<datalist id="fruits">
  <select name="fruits">
    <option value="Blackberry">Blackberry</option>
    <option value="Blackcurrant">Blackcurrant</option>
    <option value="Blueberry">Blueberry</option>
    <!-- … -->
  </select>
If other, please specify:
</datalist>
  <input type="text" name="fruit" list="fruits"multiple>
</label>