The input types in HTML is form control used within a <form> element to gather various types of user input. The specific kind of input control is resolute by the type attribute.
<Input> Types
type=”text”
This creates a single-line text field where users can enter letters, numbers, and other characters. It’s the default type if none is specified or if the browser doesn’t support the given type. Line breaks are automatically removed from the input value.
Example:
<form action="">
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>In the above example, two text fields are created for the user to enter their first and last names. The name attribute is critical for identifying the input control when the form data is sent to the server.
type=”password”
This creates a single-line text field for sensitive information such as passwords. The text entered by the user is typically masked (e.g., displayed as dots) for security. However, it’s important to note that the data itself is not encrypted by this input type when submitted to the server; HTTPS should be used for secure transmission.
<form>
Password: <input type="password" name="password" placeholder="Enter your password">
</form>The placeholder attribute provides a hint to the user about the expected input.
type=”checkbox”
This creates a checkbox that allows users to select zero or more options from a predefined list. Checkboxes within a group are independent, meaning selecting one doesn’t deselect others. Each checkbox should have a value attribute which represents the data sent to the server if the checkbox is checked, and usually a name attribute to group related checkboxes.
<form action="">
<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle" value="Car"> I have a car<br>
<input type="checkbox" name="vehicle" value="Airplane"> I have an airplane
</form>Here, the name is the same for all vehicle checkboxes, allowing the server to receive an array of selected values. The checked attribute can be used to have a checkbox selected by default.
type=”radio”
Which is used when a user selects exactly one option from a number of predefined choices. Radio buttons that are part of the same group should share the same name attribute. Only one radio button within a group can be selected at a time; selecting one will automatically deselect any other selected button in the same group. Each radio button also needs a value attribute to represent the selected option.
<form name="input" action="html_form_action.asp" method="get">
Male: <input type="radio" name="Sex" value="Male" checked="checked"><br>
Female: <input type="radio" name="Sex" value="Female"><br>
<input type="submit" value="Submit">
</form>In this example, the user can select either “Male” or “Female” for the “Sex” field. The checked attribute indicates the default selected option.
type=”submit”
This creates a submit button, when clicked, sends the form data to the server as specified by the <form> element’s action attribute. The text that appears on the button is usually controlled by the value attribute.
<form action="process_data.php" method="post">
<input type="text" name="username"><br>
<input type="password" name="password"><br>
<input type="submit" value="Login">
</form>Clicking the “Login” button will submit the username and password data to process_data.php using the POST method in this case. The <button> element can also be used to create a submit button and allows for more styling or the inclusion of other elements.
type=”reset”
This creates a reset button that, when clicked, resets all the form controls within the form to their initial or default values. The text on the button is specified by the value attribute.
<form action="">
<input type="text" name="username" value="default_user"><br>
<input type="password" name="password" value=""><br>
<input type="submit" value="Submit">
<input type="reset" value="Clear Form">
</form>Clicking “Clear Form” will set the username field back to “default_user” and clear the password field.
type=”button”
This creates a button, by default, does not do anything when clicked. It is used in conjunction with JavaScript to define custom actions when the button is clicked, using the onclick event handler. The text on the button is set using the value attribute. The <button> element can also be used as a generic button by setting its type attribute to “button”.
<form>
<input type="text" id="myInput" value="Hello">
<input type="button" value="Click Me" onclick="document.getElementById('myInput').value = '';">
</form>In this example, clicking the “Click Me” button will execute the JavaScript code in the onclick attribute, which clears the value of the text input field.
These basic input types form creating interactive HTML forms to collect user data. The <input> element supports various other attributes like name, id, disabled, readonly, size, maxlength, placeholder, required, and others, which further control the behavior and appearance of these form controls. HTML5 has introduced various input types for specific data formats such as email, URL, telephone numbers, dates, and more, which can offer built-in validation and enhance the user interface..
HTML5 Topics