JavaScript Curriculum
Forms and Inputs
easyThe coffee shop wants an online order form. You'll wire up text fields, a dropdown for drink size, a checkbox for extras, and a submit button — all properly labelled and validated.
Forms and Inputs
Forms are how the web collects information from users. Every login screen, search bar, checkout page, and survey is built with the same handful of HTML elements.
The <form> Element
A <form> wraps all your inputs and tells the browser where to send the data.
action— the URL that receives the data (omit for same page)method—getappends data to the URL;postsends it in the request body
Input Types
The <input> element is the workhorse of forms. Its type attribute controls everything:
Single-line plain text
📱 Default keyboard on mobile
Labels — Always Use Them
Every input needs a visible label. Labels improve usability and accessibility.
Label's for attribute matches input's id. Label can be anywhere in the DOM.
<label for="username">Username</label> <input type="text" id="username">
Most common pattern. Works even when label and input are far apart in markup.
Validation Attributes
HTML gives you free client-side validation — no JavaScript required:
Field must not be empty
Other Form Elements
Key Rules to Remember
- Always wrap inputs in a
<form> - Every input needs a
<label>linked viafor/id - Use the right
type— it gives free validation and the correct mobile keyboard - Add
nameattributes — without them the data won't be sent - Use
required,minlength,patternfor browser validation
Challenge: Build a sign-up form with name, email, password (min 8 chars), a terms checkbox, and a submit button. All inputs must have proper labels.
Challenge
Build a sign-up form with a name field, email field, password field (minlength 8), a terms-of-service checkbox, and a submit button. All inputs must have properly linked labels.
Forms and Inputs
easyThe coffee shop wants an online order form. You'll wire up text fields, a dropdown for drink size, a checkbox for extras, and a submit button — all properly labelled and validated.
Forms and Inputs
Forms are how the web collects information from users. Every login screen, search bar, checkout page, and survey is built with the same handful of HTML elements.
The <form> Element
A <form> wraps all your inputs and tells the browser where to send the data.
action— the URL that receives the data (omit for same page)method—getappends data to the URL;postsends it in the request body
Input Types
The <input> element is the workhorse of forms. Its type attribute controls everything:
Single-line plain text
📱 Default keyboard on mobile
Labels — Always Use Them
Every input needs a visible label. Labels improve usability and accessibility.
Label's for attribute matches input's id. Label can be anywhere in the DOM.
<label for="username">Username</label> <input type="text" id="username">
Most common pattern. Works even when label and input are far apart in markup.
Validation Attributes
HTML gives you free client-side validation — no JavaScript required:
Field must not be empty
Other Form Elements
Key Rules to Remember
- Always wrap inputs in a
<form> - Every input needs a
<label>linked viafor/id - Use the right
type— it gives free validation and the correct mobile keyboard - Add
nameattributes — without them the data won't be sent - Use
required,minlength,patternfor browser validation
Challenge: Build a sign-up form with name, email, password (min 8 chars), a terms checkbox, and a submit button. All inputs must have proper labels.
Challenge
Build a sign-up form with a name field, email field, password field (minlength 8), a terms-of-service checkbox, and a submit button. All inputs must have properly linked labels.