The <input> HTML element is used to create interactive form controls within a web page. It allows users to enter and submit data, such as text, numbers, checkboxes, radio buttons, or file uploads.
Here are some examples of how to use the <input> element for different types of form controls:
1. Text input:
<input type="text" name="username" placeholder="Enter your username" />
In this example, the <input> element creates a text input field where users can enter their username. The type attribute is set to “text” to specify the input type as text.
2. Checkbox:
<input type="checkbox" name="newsletter" id="newsletter-checkbox" />
<label for="newsletter-checkbox">Subscribe to newsletter</label>
This example creates a checkbox input field that allows users to opt-in for a newsletter subscription. The type attribute is set to “checkbox”, and the accompanying <label> element is used for the checkbox label.
3. Radio buttons:
<input type="radio" name="gender" value="male" id="male-radio" />
<label for="male-radio">Male</label>
<input type="radio" name="gender" value="female" id="female-radio" />
<label for="female-radio">Female</label>
This example creates a set of radio buttons where users can select their gender. The type attribute is set to “radio”, and the name attribute is used to group the radio buttons together.
4. File upload:
<input type="file" name="file-upload" />
This example creates a file upload input field that allows users to select and upload files from their device. The type attribute is set to “file”.
These are just a few examples of the <input> element usage. It has various other types and attributes that can be used for different form controls, such as password inputs, number inputs, date inputs, and more.
When using the <input> element, it is important to properly handle and validate the user-submitted data on the server-side to ensure data integrity and security.
In summary, the <input> element is used to create interactive form controls within a web page. It supports various types of inputs, such as text, checkboxes, radio buttons, file uploads, and more. Understanding the available types and attributes is essential for building functional and user-friendly forms.