HTML Input Tags Type helps define various input fields in forms, making web interactions more user-friendly. For instance, the <input type="text"> tag allows users to enter data easily. Moreover, different input types improve functionality. Therefore, developers should use them wisely to enhance usability.This article explains different HTML input types, including text, radio, checkbox, and more.
1. Button: type="button"
You can use a clickable button to trigger a script or submit a form. You can also use it to reset a form or perform other actions.
Example: <input type=”button” value=”Click me!” onclick=”alert(‘Button clicked’)”>
2. Image: type="image"
An image can act as a submit button. Clicking it submits the form. You can also use it to display an image with a hover effect.
Example: <input type=”image” src=”image.jpg” alt=”Submit” onmouseover=”this.src=’image_hover.jpg'”>
3. Reset: type="reset"
Clicking this button resets the form fields to their default values. You can also use it to clear form fields.
Example: <input type=”reset” value=”Reset form” onclick=”clearForm()”>
4. Submit: type="submit"
A button that submits the form. You can also use this button to send form data to a server.
Example: <input type=”submit” value=”Submit form” onclick=”sendFormData()”>
5. Text: type="text"
The text input tag allows users to enter a single line of text. It’s commonly used for fields like names, email addresses, and passwords.
Example: <input type=”text” name=”username” placeholder=”Enter your username”>
6. Radio: type="radio"
Users use the radio input tag to select one option. It’s commonly used for fields like gender, age range, or survey questions.
Example: <input type=”radio” name=”gender” value=”male”> Male <input type=”radio” name=”gender” value=”female”> Female
7. Checkbox: type="checkbox"
The checkbox input tag allows users to select one or more options from a group of options. It’s commonly used for fields like terms and conditions, newsletter subscriptions, or multiple-choice questions.
Example: <input type=”checkbox” name=”terms” value=”agree”> I agree to the terms and conditions
8. Color: type="color"
Users commonly use the color input tag to select background colors, text colors, or logos.
Example: <input type=”color” name=”background_color” value=”#ffffff”>
9. Range: type="range"
The range input tag allows users to select a value from a range of values. It’s commonly used for fields like volume control, brightness control, or price range.
Example: <input type=”range” name=”volume” min=”0″ max=”100″ value=”50″>
10. Datetime: type="datetime"
Allows the user to enter a date and time, including the year, month, day, hour, minute, and second. It can also be used to display a date and time picker.
Example: <input type=”datetime” name=”datetime” value=”2022-01-01T12:00:00″>
11. Datetime-local: type="datetime-local"
This input type lets the user enter a date and time without a timezone. You can also use it to display a date and time picker.
Example: <input type=”datetime-local” name=”datetime-local” value=”2022-01-01T12:00:00″>
12. Month: type="month"
Allows the user to enter a month and year. You can also use it to display a month picker.
Example: <input type=”month” name=”month” value=”2022-01″>
13. Week: type="week"
Allows the user to enter a week and year. You can also use it to display a week picker.
Example: <input type=”week” name=”week” value=”2022-W01″>
14. Timezone: type="timezone"
Allows the user to enter a timezone. You can also use it to display a timezone picker.
Example: <input type=”timezone” name=”timezone” value=”America/New_York”>
15. Checked
This attribute specifies whether a checkbox or radio button is checked by default. You can also use it to check or uncheck a checkbox.
Example: <input type=”checkbox” name=”hobbies” value=”reading” checked>
16. Disabled
This attribute determines whether the input field is disabled and prevents interaction. You can also use it to enable or disable a field.
Example: <input type=”text” name=”username” disabled>
17.Max
This attribute sets the maximum value for the input field. You can also use it to define a maximum length or value.
Example: <input type=”number” name=”age” max=”100″>
18. Min
This attribute sets the minimum value for the input field. You can also use it to define a minimum length or value.
Example: <input type=”number” name=”age” min=”18″>
For more detailed explanations and interactive examples, visit my website DeshignWithRehana. Also, check out my YouTube channel for video tutorials on web development!