Forms and User Input

Build accessible forms with labels, inputs, validation, controls, and submission behavior.

Form Fundamentals

The <form> element represents an interactive section for submitting information. Its action specifies where data is sent and method determines the HTTP method used for submission. Common methods include GET and POST.

Basic Form

<form action="/search" method="get">\n  <label for="query">Search</label>\n  <input id="query" name="q" type="search">\n  <button type="submit">Search</button>\n</form>

💡 The form submits the named input to the specified action using GET.

Key Takeaways

The name attribute determines the submitted field name.
GET commonly represents retrieval-oriented submissions while POST is commonly used for creating or changing data.

Knowledge Check

Which attribute identifies the destination URL of a form submission?

Labels and Input Controls

Every user-facing form control should have an accessible label. A <label> can be associated with an input through matching for and id attributes, or by wrapping the input.

Do Not Use Placeholder as a Label

Placeholder text is a hint, not a replacement for an accessible label.

Accessible Label

<label for="email">Email address</label>\n<input id="email" name="email" type="email" autocomplete="email">

💡 The label's for value matches the input id, creating an explicit association.

Key Takeaways

Associate labels with their controls.
Do not rely on placeholder text as the only label.

Knowledge Check

Which label attribute associates a label with an input id?

HTML Input Types

HTML provides specialized input types such as email, password, number, date, url, tel, search, checkbox, radio, and file. Using the appropriate type improves native validation, mobile keyboards, and accessibility.

Input Types

<input type="email" name="email">\n<input type="password" name="password">\n<input type="date" name="birthday">\n<input type="number" name="age" min="1" max="120">\n<input type="file" name="resume" accept=".pdf">

💡 Specialized types provide browser-level behavior appropriate to the expected data.

Key Takeaways

Choose input types according to the expected data.
Correct input types improve user experience and native validation.

Knowledge Check

Which input type is intended for email addresses?

Native Form Validation

HTML provides native validation attributes including required, minlength, maxlength, min, max, pattern, and type-specific constraints. Native validation improves basic client-side feedback but must not replace server-side validation.

Client Validation Is Not Security

Attackers can bypass browser validation. Always validate and sanitize untrusted input on the server.

Validated Form

<form>\n  <label for="username">Username</label>\n  <input id="username" name="username" required minlength="3" maxlength="20">\n\n  <label for="age">Age</label>\n  <input id="age" name="age" type="number" min="18" max="100" required>\n\n  <button>Submit</button>\n</form>

💡 The browser can prevent submission when the controls violate their declared constraints.

Key Takeaways

Native validation improves user experience.
Server-side validation is still required for security and data integrity.

Knowledge Check

Which attribute makes an input mandatory?

Select, Textarea, and Button

Use <select> for choosing from predefined options, <textarea> for multiline text, and <button> for actions. Buttons should have an explicit or contextually correct type such as submit, button, or reset.

Common Form Controls

<label for="country">Country</label>\n<select id="country" name="country">\n  <option value="in">India</option>\n  <option value="us">United States</option>\n</select>\n\n<label for="message">Message</label>\n<textarea id="message" name="message" rows="5"></textarea>\n\n<button type="submit">Send</button>

💡 These controls provide native semantics and keyboard interaction.

Key Takeaways

Use button for actions instead of clickable div elements.
Give form controls meaningful names when their values need to be submitted.

Knowledge Check

Which element is intended for multiline user input?

Form Fundamentals

Labels and Input Controls

HTML Input Types

Native Form Validation

Select, Textarea, and Button

STAY UPDATED WITH BYTES!