Summary  
This chapter explains how to use various HTML input types—text, email, password, and number—to collect and validate textual data with features like built-in validation and character masking.  

General domain of usage  
Web forms

HTML provides several input types for collecting different kinds of textual data:
- `text`: for general single-line input (e.g., name, city);
- `email`: for email addresses, with built-in validation;
- `password`: for sensitive data, hides input characters;
- `number`: for numeric input, allows up/down arrows. Each type improves user experience and data accuracy.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPHRpdGxlPlJlZ2lzdHJhdGlvbiBGb3JtIEV4YW1wbGU8L3RpdGxlPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJzdHlsZS5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGgyPlJlZ2lzdHJhdGlvbiBGb3JtPC9oMj4KICAgIDxmb3JtPgogICAgICA8bGFiZWwgZm9yPSJ1c2VybmFtZSI+VXNlcm5hbWU6PC9sYWJlbD4KICAgICAgPGlucHV0IHR5cGU9InRleHQiIGlkPSJ1c2VybmFtZSIgbmFtZT0idXNlcm5hbWUiIC8+PGJyIC8+PGJyIC8+CgogICAgICA8bGFiZWwgZm9yPSJlbWFpbCI+RW1haWw6PC9sYWJlbD4KICAgICAgPGlucHV0IHR5cGU9ImVtYWlsIiBpZD0iZW1haWwiIG5hbWU9ImVtYWlsIiAvPjxiciAvPjxiciAvPgoKICAgICAgPGxhYmVsIGZvcj0icGFzc3dvcmQiPlBhc3N3b3JkOjwvbGFiZWw+CiAgICAgIDxpbnB1dCB0eXBlPSJwYXNzd29yZCIgaWQ9InBhc3N3b3JkIiBuYW1lPSJwYXNzd29yZCIgLz48YnIgLz48YnIgLz4KCiAgICAgIDxsYWJlbCBmb3I9ImFnZSI+QWdlOjwvbGFiZWw+CiAgICAgIDxpbnB1dCB0eXBlPSJudW1iZXIiIGlkPSJhZ2UiIG5hbWU9ImFnZSIgLz48YnIgLz48YnIgLz4KCiAgICAgIDxidXR0b24gdHlwZT0ic3VibWl0Ij5SZWdpc3RlcjwvYnV0dG9uPgogICAgPC9mb3JtPgogIDwvYm9keT4KPC9odG1sPg==

KiB7CiAgYm94LXNpemluZzogYm9yZGVyLWJveDsKICBtYXJnaW46IDA7CiAgcGFkZGluZzogMDsKICBmb250LWZhbWlseTogIkludGVyIiwgc3lzdGVtLXVpLCBzYW5zLXNlcmlmOwp9Cgpib2R5IHsKICBiYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQoMTM1ZGVnLCAjZjlmYWZiLCAjZTVlN2ViKTsKICBtaW4taGVpZ2h0OiAxMDB2aDsKICBkaXNwbGF5OiBmbGV4OwogIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBwYWRkaW5nOiAyMHB4Owp9CgpoMiB7CiAgY29sb3I6ICMxMTE4Mjc7CiAgZm9udC1zaXplOiAxLjhyZW07CiAgbWFyZ2luLWJvdHRvbTogMXJlbTsKICB0ZXh0LWFsaWduOiBjZW50ZXI7Cn0KCmZvcm0gewogIGJhY2tncm91bmQ6IHdoaXRlOwogIHBhZGRpbmc6IDJyZW0gMi41cmVtOwogIGJvcmRlci1yYWRpdXM6IDE2cHg7CiAgYm94LXNoYWRvdzogMCA4cHggMjRweCByZ2JhKDAsIDAsIDAsIDAuMDgpOwogIHdpZHRoOiAxMDAlOwogIG1heC13aWR0aDogNDIwcHg7CiAgZGlzcGxheTogZmxleDsKICBmbGV4LWRpcmVjdGlvbjogY29sdW1uOwogIGdhcDogMXJlbTsKfQoKbGFiZWwgewogIGNvbG9yOiAjMzc0MTUxOwogIGZvbnQtd2VpZ2h0OiA1MDA7CiAgZm9udC1zaXplOiAwLjk1cmVtOwp9CgppbnB1dCB7CiAgd2lkdGg6IDEwMCU7CiAgcGFkZGluZzogMC43NXJlbSAxcmVtOwogIGJvcmRlcjogMS41cHggc29saWQgI2QxZDVkYjsKICBib3JkZXItcmFkaXVzOiA4cHg7CiAgZm9udC1zaXplOiAxcmVtOwogIHRyYW5zaXRpb246IGJvcmRlci1jb2xvciAwLjI1cywgYm94LXNoYWRvdyAwLjI1czsKfQoKaW5wdXQ6Zm9jdXMgewogIG91dGxpbmU6IG5vbmU7CiAgYm9yZGVyLWNvbG9yOiAjM2I4MmY2OwogIGJveC1zaGFkb3c6IDAgMCAwIDNweCByZ2JhKDU5LCAxMzAsIDI0NiwgMC4xNSk7Cn0KCmJ1dHRvbiB7CiAgYmFja2dyb3VuZDogIzNiODJmNjsKICBjb2xvcjogd2hpdGU7CiAgYm9yZGVyOiBub25lOwogIHBhZGRpbmc6IDAuOXJlbSAxLjJyZW07CiAgYm9yZGVyLXJhZGl1czogOHB4OwogIGZvbnQtc2l6ZTogMXJlbTsKICBmb250LXdlaWdodDogNjAwOwogIGN1cnNvcjogcG9pbnRlcjsKICB0cmFuc2l0aW9uOiBiYWNrZ3JvdW5kIDAuMjVzLCB0cmFuc2Zvcm0gMC4xczsKfQoKYnV0dG9uOmhvdmVyIHsKICBiYWNrZ3JvdW5kOiAjMjU2M2ViOwp9CgpidXR0b246YWN0aXZlIHsKICB0cmFuc2Zvcm06IHNjYWxlKDAuOTcpOwp9CgpAbWVkaWEgKG1heC13aWR0aDogNDgwcHgpIHsKICBmb3JtIHsKICAgIHBhZGRpbmc6IDEuNXJlbTsKICB9Cn0=

Browsers provide instant feedback for **email** and **number** fields. For example, entering an invalid email shows an error. **Password** fields mask input for privacy. These features help users enter correct data and protect sensitive information.

Which input type automatically validates that the entered value is a properly formatted email address in an HTML form?

An introduction to creating well-structured and accessible HTML forms. Explore fundamental form elements, validation techniques, and best practices for ensuring accessibility. Learn how to design forms that are both functional and user-friendly, as they are essential components of any interactive website.

Understand how forms collect user input and how to define them using essential elements and attributes. Explore textual and specialized input types that make forms functional and user-friendly.

Learn how to structure forms for clarity and usability using grouping, labeling, and selection elements. Discover how to connect labels to inputs and use <fieldset> and <legend> to create logical sections within a form.

Improve user experience with accessible and semantic forms. Apply ARIA attributes, validation rules, and CSS pseudo-classes to provide clear feedback and ensure forms are both inclusive and visually intuitive.

Textual Inputs

Textual Inputs