Working with HTML form and confused with the type of inputs you can use?
I will cover all the input types in this thread🧵
Retweet and help your followers to learn something new for the day 🚀
I will cover all the input types in this thread🧵
Retweet and help your followers to learn something new for the day 🚀
The type attribute of the input tag specifies the type of control.
Or we can say, the type of input we want in our form.
It could be a checkbox or a text field or a radio button etc.
Let’s check out each of them in this thread!!!
Or we can say, the type of input we want in our form.
It could be a checkbox or a text field or a radio button etc.
Let’s check out each of them in this thread!!!
Type :
1. button - Just a clickable button
2. submit - It submits form-data
3. reset - It resets the form data to its initial values
4. checkbox - It creates a checkbox input
5. radio - presented in group and can be selected only one at a time.
1. button - Just a clickable button
2. submit - It submits form-data
3. reset - It resets the form data to its initial values
4. checkbox - It creates a checkbox input
5. radio - presented in group and can be selected only one at a time.
RADIO buttons are always radio groups, that share the same name (the value of the name attribute) to be treated as a group. The value attribute defines the unique value of that radio button.
6. hidden - hides the data from frontend but sends on form submission
6. hidden - hides the data from frontend but sends on form submission
7. range - Is like a slider control with min, max, and step attributes. The default value on the slider will be submitted.
8. search - Defines a text field for entering a search string. The "name" field is necessary to submit a search.
9. color - Works like a color picker
8. search - Defines a text field for entering a search string. The "name" field is necessary to submit a search.
9. color - Works like a color picker
10. file - Comes with a file-select field and a "Browse" button for file uploads. Can use the attribute "multiple" for multiple file uploads.
11. image - Takes an image as a submit button.
12. password - As used for passwords, the characters are masked
11. image - Takes an image as a submit button.
12. password - As used for passwords, the characters are masked
13. email - Automatically validates the input email format. Can use the attribute "multiple" for multiple emails.
14. number - Gives a field for entering a number with min, max, and step attributes.
15. text - Gives a single-line text field.
14. number - Gives a field for entering a number with min, max, and step attributes.
15. text - Gives a single-line text field.
16. url - Automatically validates url format
17. tel - Gives a field to enter a telephone number. But, the input value is not automatically validated to a particular format before the form can be submitted, because formats for telephone numbers vary so much around the world.
17. tel - Gives a field to enter a telephone number. But, the input value is not automatically validated to a particular format before the form can be submitted, because formats for telephone numbers vary so much around the world.
18. date - Defines a date picker with year, month, and day values.
19. month - Gives a field to choose a month and year.
20. week - Gives a field to choose a week and year.
19. month - Gives a field to choose a month and year.
20. week - Gives a field to choose a week and year.
21. time - Gives a field to enter time without any timezone.
22. datetime-local - Gives a field to enter both a date and a time, including the year, month, and day as well as the time in hours and minutes.
22. datetime-local - Gives a field to enter both a date and a time, including the year, month, and day as well as the time in hours and minutes.
Thanks for reading this thread till the end.
Bookmark this thread for the future🔮
Follow @PriteshKiri for more web development tips and tricks
#codewithcoffee #codewithcoffeeindia
Bookmark this thread for the future🔮
Follow @PriteshKiri for more web development tips and tricks
#codewithcoffee #codewithcoffeeindia
Loading suggestions...