How to use the input element of HTML5

This article introduces the knowledge of "how to use the input elements of HTML5". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Input elements of form elements-text, password, url, telephone, email, search, file, radio, checkbox, button, submit, reset, number, range, image, hidden, color, datetime, datetime-local, date, time, month, week

Common attributes of input elements-autocomplete, placeholder, pattern, dirname, size, maxlength, readonly, required, list, multiple, min, max, step

Example

1. Text-text box element/form/input/text.html

Text

2. Password-password box element/form/input/password.html

Password alert (document.getElementsByTagName ("input") [0] .value)

3. Url-url frame element/form/input/url.html

Url alert (document.getElementsByTagName ("input") [0] .value)

4. Telephone-phone box element/form/input/telephone.html

Telephone alert (document.getElementsByTagName ("input") [0] .value)

5. Email-email box element/form/input/email.html

Email alert (document.getElementsByTagName ("input") [0] .value)

6. Search-search box element/form/input/search.html

Search alert (document.getElementsByTagName ("input") [0] .value)

7. File-used to upload file element/form/input/file.html

File

8. Radio-check box element/form/input/radio.html

Radio radio button title radio button title alert (document.getElementsByTagName ("input") [0] .value)

9. Checkbox-check box element/form/input/checkbox.html

Checkbox checkbox title alert (document.getElementsByTagName ("input") [0] .minutes)

10. Button-General button element/form/input/button.html

Button

11. Submit-submit button element/form/input/submit.html

Submit

12. Reset-reset button element/form/input/reset.html

Reset

13. Number-numeric input box element/form/input/number.html

Number alert (document.getElementsByTagName ("input") [0] .value)

14. Range-Slider element/form/input/range.html

Range alert (document.getElementsByTagName ("input") [0] .value)

15. Image-display picture element/form/input/image.html

Image

16. Hidden-hides elements and does not show element/form/input/hidden.html

Hidden alert (document.getElementsByTagName ("input") [0] .value)

17. Color-Color Selector element/form/input/color.html

Color alert (document.getElementsByTagName ("input") [0] .value)

18. Datetime- date and time input / selection box (UTC), datetime-loca-date time input / selection box (local time zone), date-date input / selection box, time- time input / selection box, month-month input / selection box, week-week input / selection box element/form/input/datetime_datetime-local_date_time_month_week.html.html

Datetime datetime-local datetime month week