form element represents a section of interactive controls for submitting information.
There are many different types of information you may want to collect from users, text-based answers, numbers, files, checkboxes, date, email, etc. It is important to specify the type of information you are collecting to make it easier for the computer to parse or translate the information and determine next actions. To collect all of this information, we use the
input element and specify the type of information by using the
Let’s take a look at a few examples of how the
input element is used for a variety of types of information.
<input type=”text”>: The type
textis used to take in a single-line text field. The
placeholderattribute allows us to provide default text to display in the text field when empty.
<input type=”button”>: The type
buttonis used to create a clickable rectangular button. Alternatively, most developers use the
<input type=”checkbox”>: The type
checkboxcreates default boxes that are checked (ticked) when selected.
<input type=”number”>: The type
numbertakes in a number input. By default the
numbertype allows only integers unless otherwise specified by the use of the
<input type=”radio”>: The type
radiocreates a clickable circular button, or a radio button. They act similarly to the
Check out MDN’s docs on the HTML input element to learn more about other types of input and associated values, attributes, and events.