Summary  
This chapter explores various HTML input types and their attributes for collecting and validating user data, including email, password, numeric ranges, telephone numbers, selection controls, and date/time pickers.

General domain of usage  
Web form development

HTML provides many `<input>` types that let you collect different kinds of user data. Below is an overview of the most common ones.

## Email and Password
- `type="email"`: accepts email addresses and does basic browser validation;
- `type="password"`: hides the typed characters for security and can use `minlength` and `maxlength`.

PGZvcm0gb25zdWJtaXQ9InJldHVybiBmYWxzZSI+CiAgPCEtLSBFbWFpbCBpbnB1dCAtLT4KICA8bGFiZWwgZm9yPSJtYWlsIj5FbWFpbDwvbGFiZWw+CiAgPGlucHV0IHR5cGU9ImVtYWlsIiBpZD0ibWFpbCIgLz4KICAKICA8IS0tIFBhc3N3b3JkIGlucHV0IC0tPgogIDxsYWJlbCBmb3I9InBhc3N3b3JkIj5QYXNzd29yZDwvbGFiZWw+CiAgPGlucHV0IHR5cGU9InBhc3N3b3JkIiBpZD0icGFzc3dvcmQiIC8+CiAgCiAgPGJ1dHRvbiB0eXBlPSJzdWJtaXQiPlN1Ym1pdDwvYnV0dG9uPgo8L2Zvcm0+

## Number
`type="number"`: accepts numeric values. Use `min`, `max`, and `step` to control the allowed range.

PGZvcm0gb25zdWJtaXQ9InJldHVybiBmYWxzZSI+CiAgPGxhYmVsIGZvcj0ieWVhciI+WWVhciBvZiBiaXJ0aDwvbGFiZWw+CiAgPGlucHV0IHR5cGU9Im51bWJlciIgbWluPSIxOTAwIiBtYXg9IjIwMjMiIGlkPSJ5ZWFyIiAvPgoKICA8bGFiZWwgZm9yPSJoZWlnaHQiPkhlaWdodCB3aXRoIDAuMSBzdGVwPC9sYWJlbD4KICA8aW5wdXQgdHlwZT0ibnVtYmVyIiBpZD0iaGVpZ2h0IiBzdGVwPSIwLjEiIG1pbj0iMC4xIiBtYXg9IjEwLjAiIC8+CgogIDxidXR0b24gdHlwZT0ic3VibWl0Ij5TdWJtaXQ8L2J1dHRvbj4KPC9mb3JtPg==

## Telephone
`type="tel"`: for phone numbers. No built-in validation. Developers validate it manually.

PGZvcm0gb25zdWJtaXQ9InJldHVybiBmYWxzZSI+CiAgPGxhYmVsIGZvcj0icGhvbmUiPlBob25lIG51bWJlcjo8L2xhYmVsPgogIDxpbnB1dCB0eXBlPSJ0ZWwiIGlkPSJwaG9uZSIgLz4KCiAgPGJ1dHRvbiB0eXBlPSJzdWJtaXQiPlN1Ym1pdDwvYnV0dG9uPgo8L2Zvcm0+

## Checkbox
`type="checkbox"`: allows selecting multiple options. Use `checked` to preselect.

PGZvcm0gb25zdWJtaXQ9InJldHVybiBmYWxzZSI+CiAgPHA+V2hhdCBpcyB5b3VyIGZhdm9yaXRlIHNlYXNvbj88L3A+CiAgPGxhYmVsPgogICAgV2ludGVyCiAgICA8aW5wdXQgdHlwZT0iY2hlY2tib3giIG5hbWU9IndpbnRlciIgdmFsdWU9IndpbnRlciIgY2hlY2tlZCAvPgogIDwvbGFiZWw+CiAgPGxhYmVsPgogICAgU3ByaW5nCiAgICA8aW5wdXQgdHlwZT0iY2hlY2tib3giIG5hbWU9InNwcmluZyIgdmFsdWU9InNwcmluZyIgLz4KICA8L2xhYmVsPgogIDxsYWJlbD4KICAgIFN1bW1lcgogICAgPGlucHV0IHR5cGU9ImNoZWNrYm94IiBuYW1lPSJzdW1tZXIiIHZhbHVlPSJzdW1tZXIiIC8+CiAgPC9sYWJlbD4KICA8bGFiZWw+CiAgICBGYWxsCiAgICA8aW5wdXQgdHlwZT0iY2hlY2tib3giIG5hbWU9ImZhbGwiIHZhbHVlPSJmYWxsIiAvPgogIDwvbGFiZWw+CjwvZm9ybT4=

## Radio
`type="radio"`: selects one option from a group. All radios must share the same `name`.

PGZvcm0gb25zdWJtaXQ9InJldHVybiBmYWxzZSI+CiAgPHA+V2hhdCBpcyB5b3VyIGZhdm9yaXRlIGZvb2Q/PC9wPgogIDxsYWJlbD4KICAgIDxpbnB1dCB0eXBlPSJyYWRpbyIgbmFtZT0iZGlzaCIgdmFsdWU9InBhc3RhIiBjaGVja2VkIC8+CiAgICBQYXN0YQogIDwvbGFiZWw+CiAgPGxhYmVsPgogICAgPGlucHV0IHR5cGU9InJhZGlvIiBuYW1lPSJkaXNoIiB2YWx1ZT0icGl6emEiIC8+CiAgICBQaXp6YQogIDwvbGFiZWw+CiAgPGxhYmVsPgogICAgPGlucHV0IHR5cGU9InJhZGlvIiBuYW1lPSJkaXNoIiB2YWx1ZT0iYnVyZ2VyIiAvPgogICAgQnVyZ2VyCiAgPC9sYWJlbD4KICA8bGFiZWw+CiAgICA8aW5wdXQgdHlwZT0icmFkaW8iIG5hbWU9ImRpc2giIHZhbHVlPSJzdGVhayIgLz4KICAgIFN0ZWFrCiAgPC9sYWJlbD4KPC9mb3JtPg==

## Range Slider
`type="range"`: a slider control for selecting a number within a range. JavaScript logic is skipped in this course.

PGZvcm0gb25zdWJtaXQ9InJldHVybiBmYWxzZSI+CiAgPGxhYmVsIGZvcj0iZGF5Ij5EYXkgb2YgdGhlIHdlZWs8L2xhYmVsPgogIDxpbnB1dCBpZD0iZGF5IiB0eXBlPSJyYW5nZSIgdmFsdWU9IjUiIG1pbj0iMSIgbWF4PSI3IiBzdGVwPSIxIiAvPgo8L2Zvcm0+CjxwPlNlbGVjdGVkIHZhbHVlOiA8c3BhbiBjbGFzcz0ic2VsZWN0ZWQtdmFsdWUiPjU8L3NwYW4+PC9wPgo8c2NyaXB0IHNyYz0iaW5kZXguanMiPjwvc2NyaXB0Pg==

Y29uc3QgcmFuZ2VJbnB1dCA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJ2lucHV0W3R5cGU9InJhbmdlIl0nKTsKY29uc3Qgb3V0cHV0ID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvcignLnNlbGVjdGVkLXZhbHVlJyk7CnJhbmdlSW5wdXQuYWRkRXZlbnRMaXN0ZW5lcignaW5wdXQnLCBlID0+IChvdXRwdXQudGV4dENvbnRlbnQgPSBlLnRhcmdldC52YWx1ZSkpOw==

JavaScript logic is skipped in this course.

Note

## Date and Time
- `type="date"`: calendar selector;
- `type="time"`: time picker;
- `type="datetime-local"`: combines time and date inputs.

PGZvcm0gb25zdWJtaXQ9InJldHVybiBmYWxzZSI+CiAgPCEtLSBEYXRlIGlucHV0IC0tPgogIDxsYWJlbCBmb3I9ImRhdGUiPkRhdGU8L2xhYmVsPgogIDxpbnB1dCB0eXBlPSJkYXRlIiBtaW49IjE5NzAtMDEtMDEiIG1heD0iMjA3MC0wMS0wMSIgaWQ9ImRhdGUiIC8+CgogIDwhLS0gVGltZSBpbnB1dCAtLT4KICA8bGFiZWwgZm9yPSJ0aW1lIj5UaW1lPC9sYWJlbD4KICA8aW5wdXQgdHlwZT0idGltZSIgaWQ9InRpbWUiIC8+CgogIDwhLS0gRGF0ZSBhbmQgVGltZSBpbnB1dCAtLT4KICA8bGFiZWwgZm9yPSJmdWxsLXRpbWUiPkRhdGUgYW5kIFRpbWU8L2xhYmVsPgogIDxpbnB1dCB0eXBlPSJkYXRldGltZS1sb2NhbCIgbWluPSIxOTAwLTAxLTAxVDAwOjAwIiBtYXg9IjIwMDAtMDEtMDFUMDA6MDAiIGlkPSJmdWxsLXRpbWUiIC8+CjwvZm9ybT4=

For consistent styling, developers often use ready-made UI libraries instead of the default browser pickers.

You may have noticed that when you try to fill out certain fields, the browser can already suggest some auto-fill options. The browser remembers the values you've entered in fields and then suggests them to you for auto-completion.

Study More

What is the main difference between the `type="email"` and `type="password"` input fields?

Learn the essentials of HTML, the backbone of every website. Structure content with tags and attributes, build clear document layouts, and add images, links, and tables. Create accessible, user-friendly forms for capturing input and interaction. Practice crafting well-structured, functional web pages while following best practices. Start your web development journey by mastering HTML.

Explore the inner workings of the web. Learn how data travels across networks, discover the role of protocols, and unravel the mysteries of IP addresses and domain names. Gain a high-level understanding of how web browsers and servers communicate to deliver web content.

Discover the power of tags to structure content, from headings and paragraphs to lists and tables. Learn how to enhance the elements with attributes.

The core of HTML document structure. Learn the components of an HTML document, including the doctype declaration, head, and body. Understand the purpose of each element and how they contribute to the overall structure of a webpage.

Make a web page more appealing with the help of media such as images, audio, and video. Work with structured tabular data in the form of tables.

Explore the versatility of HTML forms. Learn to design intuitive and user-friendly forms by leveraging key concepts and techniques. Discover how forms enable user interaction and data submission on websites. 

Exploring Different Input Types in HTML

Email and Password

Number

Telephone

Checkbox

Radio

Range Slider

Date and Time