Summary  
This chapter covers using HTML input validation attributes (required, pattern, min, max, minlength, maxlength) to enforce constraints on user input and provide immediate feedback.

General domain of usage  
Web form validation

HTML validation attributes help ensure users enter correct data:
- **`required`**: makes a field mandatory;
- **`pattern`**: defines a regex pattern for input (such as phone numbers);
- **`min`, `max`**: set numeric or date limits;
- **`minlength`, `maxlength`**: control text length. 

These attributes provide instant feedback and reduce errors.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPHRpdGxlPlNpZ251cCBGb3JtIHdpdGggVmFsaWRhdGlvbjwvdGl0bGU+CiAgICA8bGluayByZWw9InN0eWxlc2hlZXQiIGhyZWY9InN0eWxlLmNzcyIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8Zm9ybT4KICAgICAgPGxhYmVsIGZvcj0idXNlcm5hbWUiPlVzZXJuYW1lOjwvbGFiZWw+CiAgICAgIDxpbnB1dAogICAgICAgIHR5cGU9InRleHQiCiAgICAgICAgaWQ9InVzZXJuYW1lIgogICAgICAgIG5hbWU9InVzZXJuYW1lIgogICAgICAgIHJlcXVpcmVkCiAgICAgICAgbWlubGVuZ3RoPSI0IgogICAgICAgIG1heGxlbmd0aD0iMTIiCiAgICAgICAgcGxhY2Vob2xkZXI9IjQtMTIgY2hhcmFjdGVycyIKICAgICAgLz4KCiAgICAgIDxsYWJlbCBmb3I9InBob25lIj5QaG9uZSBOdW1iZXI6PC9sYWJlbD4KICAgICAgPGlucHV0CiAgICAgICAgdHlwZT0idGVsIgogICAgICAgIGlkPSJwaG9uZSIKICAgICAgICBuYW1lPSJwaG9uZSIKICAgICAgICByZXF1aXJlZAogICAgICAgIHBhdHRlcm49IlswLTldezEwfSIKICAgICAgICBtYXhsZW5ndGg9IjEwIgogICAgICAgIHBsYWNlaG9sZGVyPSIxMCBkaWdpdHMiCiAgICAgIC8+CgogICAgICA8bGFiZWwgZm9yPSJhZ2UiPkFnZTo8L2xhYmVsPgogICAgICA8aW5wdXQKICAgICAgICB0eXBlPSJudW1iZXIiCiAgICAgICAgaWQ9ImFnZSIKICAgICAgICBuYW1lPSJhZ2UiCiAgICAgICAgcmVxdWlyZWQKICAgICAgICBtaW49IjE4IgogICAgICAgIG1heD0iMTIwIgogICAgICAgIHBsYWNlaG9sZGVyPSIxOC0xMjAiCiAgICAgIC8+CgogICAgICA8bGFiZWwgZm9yPSJwYXNzd29yZCI+UGFzc3dvcmQ6PC9sYWJlbD4KICAgICAgPGlucHV0CiAgICAgICAgdHlwZT0icGFzc3dvcmQiCiAgICAgICAgaWQ9InBhc3N3b3JkIgogICAgICAgIG5hbWU9InBhc3N3b3JkIgogICAgICAgIHJlcXVpcmVkCiAgICAgICAgbWlubGVuZ3RoPSI2IgogICAgICAgIG1heGxlbmd0aD0iMjAiCiAgICAgICAgcGxhY2Vob2xkZXI9IjYtMjAgY2hhcmFjdGVycyIKICAgICAgLz4KCiAgICAgIDxidXR0b24gdHlwZT0ic3VibWl0Ij5TaWduIFVwPC9idXR0b24+CiAgICA8L2Zvcm0+CiAgPC9ib2R5Pgo8L2h0bWw+

KiB7CiAgYm94LXNpemluZzogYm9yZGVyLWJveDsKICBtYXJnaW46IDA7CiAgcGFkZGluZzogMDsKICBmb250LWZhbWlseTogIkludGVyIiwgc3lzdGVtLXVpLCBzYW5zLXNlcmlmOwp9Cgpib2R5IHsKICBiYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQoMTM1ZGVnLCAjZjlmYWZiLCAjZTVlN2ViKTsKICBtaW4taGVpZ2h0OiAxMDB2aDsKICBkaXNwbGF5OiBmbGV4OwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAgcGFkZGluZzogMjBweDsKfQoKZm9ybSB7CiAgYmFja2dyb3VuZDogI2ZmZjsKICBwYWRkaW5nOiAycmVtIDIuNXJlbTsKICBib3JkZXItcmFkaXVzOiAxNnB4OwogIGJveC1zaGFkb3c6IDAgOHB4IDI0cHggcmdiYSgwLCAwLCAwLCAwLjA4KTsKICB3aWR0aDogMTAwJTsKICBtYXgtd2lkdGg6IDQyMHB4OwogIGRpc3BsYXk6IGZsZXg7CiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjsKICBnYXA6IDFyZW07Cn0KCmxhYmVsIHsKICBjb2xvcjogIzM3NDE1MTsKICBmb250LXdlaWdodDogNTAwOwogIGZvbnQtc2l6ZTogMC45NXJlbTsKfQoKaW5wdXQgewogIHdpZHRoOiAxMDAlOwogIHBhZGRpbmc6IDAuNzVyZW0gMXJlbTsKICBib3JkZXI6IDEuNXB4IHNvbGlkICNkMWQ1ZGI7CiAgYm9yZGVyLXJhZGl1czogOHB4OwogIGZvbnQtc2l6ZTogMXJlbTsKICB0cmFuc2l0aW9uOiBib3JkZXItY29sb3IgMC4yNXMsIGJveC1zaGFkb3cgMC4yNXMsIGJhY2tncm91bmQtY29sb3IgMC4yNXM7CiAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZjsKfQoKaW5wdXQ6OnBsYWNlaG9sZGVyIHsKICBjb2xvcjogIzljYTNhZjsKfQoKaW5wdXQ6Zm9jdXMgewogIG91dGxpbmU6IG5vbmU7CiAgYm9yZGVyLWNvbG9yOiAjM2I4MmY2OwogIGJveC1zaGFkb3c6IDAgMCAwIDNweCByZ2JhKDU5LCAxMzAsIDI0NiwgMC4xNSk7Cn0KCmlucHV0OmludmFsaWQ6Zm9jdXMgewogIGJvcmRlci1jb2xvcjogI2VmNDQ0NDsKICBib3gtc2hhZG93OiAwIDAgMCAzcHggcmdiYSgyMzksIDY4LCA2OCwgMC4xNSk7Cn0KCmlucHV0OnZhbGlkOm5vdCg6cGxhY2Vob2xkZXItc2hvd24pIHsKICBib3JkZXItY29sb3I6ICMxMGI5ODE7Cn0KCmJ1dHRvbiB7CiAgYmFja2dyb3VuZDogIzNiODJmNjsKICBjb2xvcjogI2ZmZjsKICBib3JkZXI6IG5vbmU7CiAgcGFkZGluZzogMC45cmVtIDEuMnJlbTsKICBib3JkZXItcmFkaXVzOiA4cHg7CiAgZm9udC1zaXplOiAxcmVtOwogIGZvbnQtd2VpZ2h0OiA2MDA7CiAgY3Vyc29yOiBwb2ludGVyOwogIHRyYW5zaXRpb246IGJhY2tncm91bmQgMC4yNXMsIHRyYW5zZm9ybSAwLjFzOwp9CgpidXR0b246aG92ZXIgewogIGJhY2tncm91bmQ6ICMyNTYzZWI7Cn0KCmJ1dHRvbjphY3RpdmUgewogIHRyYW5zZm9ybTogc2NhbGUoMC45Nyk7Cn0KCkBtZWRpYSAobWF4LXdpZHRoOiA0ODBweCkgewogIGZvcm0gewogICAgcGFkZGluZzogMS41cmVtOwogIH0KfQoKaW5wdXRbdHlwZT0ibnVtYmVyIl06Oi13ZWJraXQtb3V0ZXItc3Bpbi1idXR0b24sCmlucHV0W3R5cGU9Im51bWJlciJdOjotd2Via2l0LWlubmVyLXNwaW4tYnV0dG9uIHsKICAtd2Via2l0LWFwcGVhcmFuY2U6IG5vbmU7CiAgbWFyZ2luOiAwOwp9CmlucHV0W3R5cGU9Im51bWJlciJdIHsKICAtbW96LWFwcGVhcmFuY2U6IHRleHRmaWVsZDsKfQ==

Browsers automatically check validation rules and display error messages if input is invalid. This improves user experience and reduces server-side errors.

Write clear patterns and validation rules. For example, use `pattern="[0-9]{10}"` for a 10-digit phone number. Always provide helpful error messages.

Which HTML attributes help validate user input directly in the browser and improve form feedback?

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.

Required, Pattern, and Other Validation Attributes