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
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.
Typeattribute 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
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.
Time: It is an input type that allows users to select the time in a specified format.
<form>element to semantically create a form document.
labelelement as a parent element for each input element, to indicate the title for each input type.
timeinput fields, by setting each of the
typeattributes of the input element in each line 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.
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.
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.
View all Courses