- Explain the roles of
<form>,name,actionandmethod - Connect fields to their
<label>correctly - Choose the right
type,<select>,<textarea>, radio buttons and checkboxes for the task - Add validation with
required,min,max,minlengthandpattern
Every time you sign up for a club, search for a video or order a pizza, you fill in a form. Forms are how a page collects information from people. In this lesson you'll build one with labels, different kinds of fields and built-in validation — without writing a single line of JavaScript.
A form and its fields
The <form> element gathers fields together. The action attribute says where the data is sent and method says how: get puts the data in the address bar (handy for searches), while post sends it inside the request instead of the address (for passwords and personal data). Every field needs a name attribute: the server receives the data as name=value pairs.
<style>
body { font-family: system-ui, sans-serif; padding: 12px; }
label { display: block; margin-top: 10px; font-weight: 600; }
input { font: inherit; padding: 6px 8px; margin-top: 4px; width: 240px; }
button { margin-top: 14px; padding: 8px 18px; font: inherit; color: white;
background: #4f46e5; border: 0; border-radius: 6px; }
</style>
<form action="/signup" method="post">
<label for="name">Your name</label>
<input id="name" name="name" type="text" placeholder="Aysel">
<label for="email">Email</label>
<input id="email" name="email" type="email" placeholder="aysel@example.com">
<label for="pass">Password</label>
<input id="pass" name="pass" type="password">
<button type="submit">Sign up</button>
</form>action address.`<label>`: naming a field
<label> says what a field is for. Connect it to the field's id with the for attribute: <label for="email"> and <input id="email">. Then clicking the label puts the cursor in the field (or ticks a checkbox), and a screen reader announces the label when the field is focused. Another way is to put the field right inside the <label>.
Types of fields
The type attribute of <input> changes the kind of field. On a phone it also changes the keyboard: email shows an @ key, and tel shows a number pad.
type | What it is for |
|---|---|
text | a single line of text |
email | an email address; its format is checked |
password | characters are hidden behind dots |
number | a number with arrows; min, max, step |
date | a calendar for picking a date |
checkbox | a checkbox — several can be ticked |
radio | one choice from a group with the same name |
range, color | a slider and a color picker |
<style>
body { font-family: system-ui, sans-serif; padding: 12px; }
fieldset { border: 1px solid #cbd5e1; border-radius: 8px; }
p { margin: 10px 0; }
</style>
<form>
<fieldset>
<legend>Favorite subject</legend>
<label><input type="radio" name="subject" value="math"> Math</label>
<label><input type="radio" name="subject" value="art"> Art</label>
<label><input type="radio" name="subject" value="music"> Music</label>
</fieldset>
<p><label><input type="checkbox" name="news"> Send me news</label></p>
<p><label for="city">City</label>
<select id="city" name="city">
<option>Baku</option><option>Ganja</option><option>Sumgait</option>
</select></p>
<p><label for="level">Level</label> <input id="level" name="level" type="range" min="1" max="10">
<label for="color">Color</label> <input id="color" name="color" type="color" value="#4f46e5"></p>
<p><label for="msg">Message</label><br>
<textarea id="msg" name="msg" rows="3" cols="30"></textarea></p>
</form><label>, the click selects the field. Only one radio button with the same name can be selected.<fieldset> groups related fields and <legend> gives the group a title. <select> with <option> creates a drop-down list, and <textarea> a multi-line text field. For radio buttons and checkboxes, the value attribute decides what is sent to the server.
Built-in validation
The browser can check the data before sending it — no JavaScript needed. There are attributes for this:
required— the field must not be empty.minlengthandmaxlength— the shortest and longest allowed text.min,maxandstep— limits and step size for numbers and dates.pattern— a template (regular expression) the value must match. For example,pattern="AZ[0-9]{4}"requires “AZ” followed by four digits, like Azerbaijani postal codes: AZ1000.type="email"andtype="url"check the format automatically.
If a field breaks a rule, the browser shows a message when the submit button is pressed and doesn't send the form. The CSS pseudo-classes :valid and :invalid let you color valid and invalid fields differently.
<style>
body { font-family: system-ui, sans-serif; padding: 12px; }
label { display: block; margin-top: 8px; }
input { font: inherit; padding: 6px; border: 2px solid #cbd5e1; border-radius: 6px; }
input:valid { border-color: #16a34a; }
input:invalid { border-color: #f59e0b; }
</style>
<form>
<label for="user">Username (3–12 characters)</label>
<input id="user" name="user" required minlength="3" maxlength="12">
<label for="age">Age (10–99)</label>
<input id="age" name="age" type="number" min="10" max="99" required>
<label for="mail">Email</label>
<input id="mail" name="mail" type="email" required>
<label for="zip">Postal code, e.g. AZ1000</label>
<input id="zip" name="zip" pattern="AZ[0-9]{4}" required>
</form>AZ1000 and then az1000 in the postal code field.Key points
<form>gathers fields;actionsays where andmethod(get/post) how to send, and every field needs aname.<label for="id">ties a label to its field: a click selects the field and a screen reader announces its name.typechanges the kind of field and the phone keyboard:email,number,date,checkbox,radioand more.required,minlength,min,maxandpatterntell the browser to check data before sending it.- Browser validation is for convenience — the server must still check the data itself.
Check yourself
10 questions. Every correct answer earns XP.