Navigation
Create interactive pages that allow users to send information through text boxes, checkboxes, and buttons.
Have you ever wondered how Instagram knows your password or how Amazon remembers your shipping address? It all starts with a digital 'envelope' called a web form.
Think of a web form as a digital envelope. Just as an envelope holds your letter and tells the mail carrier where to take it, the <form> tag acts as a container for all the information a user enters. Without this tag, the browser wouldn't know that the text boxes and buttons belong together as one single package of data. In a typical form, if you have pieces of information to collect, you will usually have input elements nested inside one single <form> element.
Quick Check
What is the primary purpose of the <form> tag in HTML?
Answer
It acts as a container that groups all input elements together to be sent as a single package of data.
To create a basic login area, follow these steps: 1. Open the container: `<form>` 2. Add a text input for the username: `<input type="text">` 3. Add a password input for security: `<input type="password">` 4. Add the send button: `<input type="submit" value="Login">` 5. Close the container: `</form>`
Quick Check
Which input type should you use if you want the user's typing to be hidden by dots or asterisks?
Answer
The password type (type="password").
Imagine walking into a room full of unlabeled boxes. You wouldn't know which one holds your shoes and which holds your books! The <label> tag solves this for web users. By using the for attribute on a label and matching it to the id of an input, you create a logical link. This is vital for accessibility, as screen readers use these links to tell visually impaired users what each box is for. It also makes the form easier to use: clicking the label text will automatically put the cursor inside the correct box.
To link a label to an input correctly, the `for` attribute must exactly match the `id` attribute: 1. Create the label: `<label for="user-email">Email Address:</label>` 2. Create the input with a matching ID: `<input type="email" id="user-email">` Note: If the label's `for` string is and the input's `id` string is , the link only works if .
Modern browsers are smart. If you use `type="email"`, the browser will automatically check if the user included an '@' symbol before they can submit the form. This is called client-side validation. It ensures that the data being sent follows the correct format. When you combine specific types with labels and a submit button, you create a professional interface that guides the user and prevents mistakes.
Let's build a full contact form with validation: 1. Start the form: `<form>` 2. Name section: `<label for="nm">Name:</label> <input type="text" id="nm">` 3. Email section (with validation): `<label for="em">Email:</label> <input type="email" id="em">` 4. Submit action: `<input type="submit" value="Send Message">` 5. Close the form: `</form>`
Which attribute on the <input> tag changes it from a text box to a clickable button that sends the form?
If an input has an id of 'phone-num', what should the label's 'for' attribute be?
The <form> tag is optional when creating text boxes for user input.
Review Tomorrow
In 24 hours, try to recall the three specific input types we covered and the two attributes needed to link a label to an input.
Practice Activity
Create a 'Sign Up' page for a fictional club. Include inputs for a username, a password, and an email address, each with its own correctly linked label.