Session 03 Task === ## Note: MDN Reference For Each Type Is Available ### 1. [input type date](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date) Create input fields that let the user enter a date, either with a textbox that validates the input or a special date picker interface. ```htmlembedded=1 <input type="date" name="" id="" min="" max="" /> ``` --- ### 2. [input type time](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time) Create input fields designed to let the user easily enter a time (hours and minutes, and optionally seconds). ```htmlembedded=1 <input type="time" name="" id="" min="" max="" /> ``` --- ### 3. [input type color](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color) Provide a user interface element that lets a user specify a color, either by using a visual color picker interface or by entering the color into a text field in #rrggbb hexadecimal format. ```htmlembedded=1 <input type="color" name="" id="" /> ``` --- ### 4. [input type month](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/month) Create input fields that let the user enter a month and year allowing a month and year to be easily entered. ```htmlembedded=1 <input type="month" name="" id="" min="" max="" /> ``` --- ### 5. [input type range](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range) Let the user specify a numeric value which must be no less than a given value, and no more than another given value. ```htmlembedded=1 <input type="range" name="" id="" min="" max="" /> ``` --- ### 6. [input type tel](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/tel) It is used to let the user enter and edit a telephone number. ```htmlembedded=1 <input type="tel" name="" id="" pattern="" /> ``` --- ### 7. [input type url](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/url) It is used to let the user enter and edit a URL. ```htmlembedded=1 <input type="url" name="" id="" /> ``` --- ### 8. [input type week](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/week) Create input fields allowing easy entry of a year plus the [ISO 8601 week number](https://en.wikipedia.org/wiki/ISO_8601#Week_dates) during that year. ```htmlembedded=1 <input type="week" name="" id="" /> ``` --- ### 9. [input type search](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search) It is a text field designed for the user to enter search queries into. ```htmlembedded=1 <input type="search" name="" id="" /> ``` --- ### 10. [input type datetime-local](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local) Create input controls that let the user easily enter both a date and a time, including the year, month, and day as well as the time in hours and minutes. ```htmlembedded=1 <input type="datetime-local" name="" id="" /> ``` --- ### 11. [input type hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/hidden) Let web developers include data that cannot be seen or modified by users when a form is submitted. ```htmlembedded=1 <input type="hidden" name="" id="" /> ``` --- ### 12. [input type checkbox](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox) To choose zero or more option from a group of options. ```htmlembedded=1 <input type="checkbox" name="" value="" id="" /> ``` --- ### 13. [input type radio](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio) To choose only one option from a group of options. ```htmlembedded=1 <input type="radio" name="" value="" id="" /> ``` --- ### 14. [input type file](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file) Let the user choose one or more files from their device storage. ```htmlembedded=1 <input type="file" name="" accept="" /> ``` --- ### 15. [input type image](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image) It is used to create graphical submit button. ```htmlembedded=1 <input type="image" name="" src="" /> ```