How to add the proper type of input element for Html forms

Overview

With the advent of web forms, the interaction between websites and their users has gained substantial ground. Through forms, the interaction between users and websites or applications is facilitated by allowing users to manipulate the available form controls, which may involve inputting text, selecting options on the drop-down menu, checkbox, and so on.

An HTML form can contain a set of elements, which help to receive input from users efficiently. The input element, one of the most commonly used form elements, allows us to present users with diverse interactive controls for inputting data. It has a wide range of functionalities depending on the value we assign to its type attribute.

The input element

An input element is a form element used to create interactive controls for entering data. The input element has several interactive controls that vary in appearance, each of which has a unique way of receiving data from users. Some require text, selecting options, clicking of buttons, and so on. The <input> element function based on the value of its type attribute.

Often, the input element is used with the <label> element to indicate the type of data required from the user.

The Type attribute of the input element

The input element has several attributes that modify its function and appearance, one of which is the type attribute. The type attribute indicates the type of input to be displayed. Several keywords can be assigned to the type attribute. Text is the default value of the type attribute (when the type attribute is not included in the input element, it takes the form of a text field). 

Here's a list of the values—though not limited to the list shown below—that can be assigned to the type attribute:

Values

• text
• password
• checkbox
• radio
• email
• time
• submit
• hidden
• button
• file
• reset
• date
• color
• number

Note: We'll only check 6 of them.

• Text: This creates a fundamental single-line input field that allows users to enter single-line text.
• Password: It is similar to a text field in that it is also a single-line input field. It allows users to safely type in their password by concealing each typed character with a dot or an asterisk(*).
• Checkbox: This is an input type that allows users to select one or more options from a set of related options by clicking on each box. This is made possible by a set of related checkboxes that share the same control name. By default, a check box appears as a small square-like box and the browser marks it with a tick when selected.
• Radio: it is used to create radio buttons. Radio buttons are similar to checkboxes except for the fact that they allow users to choose only one value of a predefined set of options. By default, a radio button appears as a circle and the browser highlights each radio button when selected.
• Email: It is an input type that accepts only email addresses from users.
• Time: It is an input type that allows users to select the time in a specified format.

Code

Explanation

• Line 38: We use the <form> element to semantically create a form document.
• Lines 39, 42, 45, 49, 53, and 56: We use a label element as a parent element for each input element, to indicate the title for each input type.
• Lines 40, 43, 54, and 57: We create text, password, email, and time input fields, by setting each of the type attributes of the input element in each line to text, password, email, and time.
• Lines 46–47: We create two checkboxes by setting the type attribute of the input element to checkbox. Also, a piece of text was wrapped into a paragraph element at the end of the input element to indicate what each checkbox represents.
• Lines 50–51: We create two radio buttons by setting the type attribute of the input element to radio. Also, a piece of text is wrapped into a paragraph element at the end of the input element to indicate what each radio button represents.

Conclusion

Forms help users to interact with websites and help website owners to receive different kinds of data from users. Therefore, our knowledge of input types will enable us to receive accurate information from users and to effectively interact with them.