The `<input>` tag is one of the most commonly used elements in HTML. It is used to create different types of form controls such as text boxes, radio buttons, checkboxes, and more. In this tutorial, we will explore the different attributes and types of the `<input>` tag.
Syntax:
The syntax for the `<input>` tag is as follows:
<input type=”type” name=”name” value=”value” />
The `type` attribute is required and specifies the type of form control you want to create. The `name` attribute is used to identify the form control and the `value` attribute is used to set the default value of the form control.
Types of Input Controls:
There are several types of input controls that you can create using the `<input>` tag. Let’s take a look at some of the most common ones:
1. Text Input:
The text input control is used to create a single-line text box where the user can enter text. To create a text input control, you need to set the `type` attribute to `”text”`.
Example:
<label for=”username”>Username:</label>
<input type=”text” id=”username” name=”username”>
2. Password Input:
The password input control is similar to the text input control, but the entered text is hidden by replacing it with asterisks or dots. This is useful when you want the user to enter sensitive information like passwords. To create a password input control, you need to set the `type` attribute to `”password”`.
Example:
<label for=”password”>Password:</label>
<input type=”password” id=”password” name=”password”>
3. Radio Buttons:
Radio buttons are used when you want the user to select only one option from a group of options. To create radio buttons, you need to use the `<input>` tag with the `type` attribute set to `”radio”`. You also need to use the `name` attribute to group the radio buttons together.
Example:
<label>Gender:</label>
<input type=”radio” id=”male” name=”gender” value=”male”>
<label for=”male”>Male</label>
<input type=”radio” id=”female” name=”gender” value=”female”>
<label for=”female”>Female</label>
4. Checkboxes:
Checkboxes are used when you want the user to select one or more options from a group of options. To create checkboxes, you need to use the `<input>` tag with the `type` attribute set to `”checkbox”`. You also need to use the `name` attribute to group the checkboxes together.
Example:
<label>Languages:</label>
<input type=”checkbox” id=”english” name=”language” value=”english”>
<label for=”english”>English</label>
<input type=”checkbox” id=”french” name=”language” value=”french”>
<label for=”french”>French</label>
5. Submit Button:
The submit button is used to submit the form data to the server. To create a submit button, you need to use the `<input>` tag with the `type` attribute set to `”submit”`.
Example:
<input type=”submit” value=”Submit”>
Conclusion:
The `<input>` tag is a versatile and powerful tool for creating form controls in HTML. By using the different types and attributes of the `<input>` tag, you can create complex and user-friendly forms that collect and submit data efficiently.
