Intro to HTML Input Fields

What are input Fields in HTML?

Anything that allows us to give data, or enter any form of data in to web page can be considered as input field. They can be range sliders, input boxes, number fields, date and time selector etc.

In this article we will briefly look over these input fields and learn what purpose they serve.

Importance of Input field in HTML forms and UI

As mentioned above the input fields are elements which takes user input in a form. They help improve the interactions with the web page.

Some of the Input fields are:

• <input> : This is the most commonly used input field and it has various attributes.

  • <input type="text"> : This is a basic text input field that allows user to enter text.

  • <input type="password"> : This is a password field that allows user to enter password or any sensitive information which the user might not want to show to everyone

  • <input type="checkbox">: This is a checkbox that allows the user to select one or more options from a list.

  • <input type="radio"> : This is a radio button that allows user to select one option out of many other

  • <input type="submit"> : This is used to submit a block of information from the page to server

  • <input type="reset"> : This is used to reset all the input fields

• <textarea> : This is an input field which is used incase we want to enter a large chunk to information

Best Practices for Input fields

The best practices fall under the proper HTML semantics

• Choosing correct type of input field for the requirement is very important. We wouldn't want a password field with type=text.

• Whenever we choose the input fields we must choose the fields while keeping the user experience in mind. If we want to select states we need a drop-down field.

• Using a proper labels to correctly identify the elements of input field helps the crawler as well as the people who use screen readers. This adds to the accessibility of the web page.