HTML forms let users enter information, make choices, search, sign in, and submit data on websites. This cheat sheet helps students build forms that are organized, readable, and usable for many different people. It focuses on the tags, attributes, and accessibility habits that appear in real web projects.
Students need these skills to create pages that work with browsers, keyboards, screen readers, and form validation.
Key Facts
- A basic form uses <form action="/submit" method="post"> to send user input to a server location.
- Every important input should have a matching label using <label for="email">Email</label> and <input id="email" name="email" type="email">.
- The name attribute is the key sent with form data, so <input name="username"> creates a submitted value called username.
- Use type="email", type="number", type="date", type="checkbox", and type="radio" to give the browser the right controls and built-in checks.
- The required attribute stops submission when a field is empty, and minlength, maxlength, min, max, and pattern add more validation rules.
- Related controls should be grouped with <fieldset> and described with <legend>, especially radio buttons and checkboxes.
- Accessible forms must be usable with the keyboard, so focus order should follow the visual order and visible focus styles should not be removed.
- ARIA can add helpful information, such as aria-describedby="hint", but native HTML labels and controls should be used first.
Vocabulary
- Form
- A form is an HTML section that collects user input and can submit that input for processing.
- Label
- A label is text connected to a form control so users and assistive technology know what information is requested.
- Input Type
- An input type is an attribute value that tells the browser what kind of data or control to use.
- Validation
- Validation is the process of checking whether user input meets required rules before it is accepted.
- Fieldset
- A fieldset is an HTML element that groups related form controls together.
- ARIA
- ARIA is a set of attributes that can improve accessibility when native HTML alone does not provide enough meaning.
Common Mistakes to Avoid
- Leaving inputs without labels is wrong because screen readers may announce only a vague control name, making the form hard to complete.
- Using placeholder text as the only label is wrong because placeholders disappear when users type and may not be announced reliably.
- Forgetting the name attribute is wrong because the input value may appear on the page but will not be submitted as usable form data.
- Removing the focus outline is wrong because keyboard users need a visible indicator of which control is currently active.
- Using ARIA instead of native HTML is wrong when a real label, button, fieldset, or input type can provide the same meaning more reliably.
Practice Questions
- 1 Write the HTML for a required email field with a visible label and the input name set to studentEmail.
- 2 A password field must be at least 8 characters and at most 20 characters. Write an input element that enforces these two length rules.
- 3 Create a radio button group with two choices, Yes and No, using one fieldset and one legend that asks, Do you want reminders?
- 4 Explain why a form with labels, fieldsets, and keyboard focus styles is more accessible than a form that only looks neat visually.