4.1. Introduction to HTML Forms (30 minutes)
Form tag syntax:
Introduction to the <form> tag and its components (input fields, buttons, etc.).
Different input types:
text, email, password, submit.
Form tag syntax:
// HTML Form
<form action="url" method="method_name" enctype="encoding_type">
</form>Attributes:
action: Specifies the URL to which the form data will be sent when the form is submitted.
method: Specifies the HTTP method to be used for sending the form data. Common values are "GET" and "POST".
enctype: Specifies the encoding type for the form data. The default value is "application/x-www-form-urlencoded".
// HTML: Form
<form action="/submit-form" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>
Note
Detailed Activity: Students create a basic form with name, email, and password fields, and a submit button.
Introduction to the <form> Tag and Its Components
HTML forms are essential for collecting user input on a webpage. Forms can include various types of fields where users can enter text, select options, and submit their data. The collected information can then be processed on the server.
The basic structure of a form in HTML uses the <form> tag, which contains various form elements like input fields, labels, and buttons.
<form>: This tag creates a form. The two key attributes for the <form> tag are:
action: Specifies the URL where the form data will be sent.
method: Defines how the data is sent, either using "GET" (appends data to the URL) or "POST" (sends data securely).
Example:
// HTML : Form action
<form action="/submit-form" method="POST">
<!-- Form content goes here -->
</form>
Input Fields and Buttons
Inside the form, you can add different input fields and buttons to collect specific types of data from the user. Common components include:
Text Input Field (
<input type="text">): Collects a single line of text, such as the user's name.
Example:
// HTML text input
<label for="name">Name:</label>
<input type="text" id="name" name="name">2. Email Input Field (<input type="email">): Collects the user's email and ensures that a valid email format is entered.
o Example:
// HTML email input
<label for="email">Email:</label>
<input type="email" id="email" name="email">3. Password Input Field (<input type="password">): Hides the characters entered by the user to protect sensitive information, like a password.
o Example:
// HTML password input
<label for="password">Password:</label>
<input type="password" id="password" name="password">
4. Submit Button (<input type="submit">): Allows the user to submit the form data to the server.
o Example:
// HTML submit input
<input type="submit" value="Submit">Putting It All Together: A Simple Form
Here’s an example of a basic form that includes a text field for the name, an email field, a password field, and a submit button:
// HTML form
<form action="/submit-form" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br><br>
<input type="submit" value="Submit">
</form>action="/submit-form": This is where the form data will be sent when submitted. For now, this can be a placeholder.
method="POST": Ensures that form data is sent securely.
required: This attribute ensures that the user must fill in the field before submitting the form.
Activity: Students create a basic form with name, email, and password fields, and a submit button.
Students Activity:
Objective:
Students will create a basic HTML form with input fields for a user’s name, email, and password. The form will also include a submit button to send the data.
Activity Steps:
Open or Create a New HTML File:
Ask students to open their existing HTML file (or create a new one) using their preferred text editor (such as Notepad or Visual Studio Code).
Add a Basic Form:
Instruct students to add a basic form with the following elements:
Name input field (type: text)
Email input field (type: email)
Password input field (type: password)
Submit button
Example code:
// HTML Login form
<h2>Registration Form</h2>
<form action="/submit-form" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br><br>
<input type="submit" value="Register">
</form>Save and Preview the Form:
Students should save the file and open it in a web browser to see how the form looks.
Instruct them to interact with the form by filling out the fields and attempting to submit it.
Since the form’s action is set to a placeholder URL (/submit-form), the form submission won’t process, but they can still see how it behaves.
Form Validation (Optional):
Point out that if the user leaves a required field (like name, email, or password) empty, the browser will prevent the form from being submitted and will prompt the user to fill out the missing fields.
If they enter an invalid email address, the browser will display an error message, ensuring that the data format is correct.
The `
required`attribute specifies that an input field must be filled out before the form can be submitted. // Example : <input type="text" name="name" required>The `
placeholder`attribute can be used to display a hint text inside the input field before the user starts typing. Example:<input type="text" name="name" placeholder="Enter your name">The `
title`attribute can be used to display a tooltip with a helpful message when the user hovers over the input field. Example:<input type="text" name="name" title="Please enter your full name">
Discussion and Reflection:
After the activity, lead a brief discussion and ask students to reflect on the following questions:
How do different input types (like text, email, and password) affect the way users interact with the form?
Why is it important to use the required attribute for certain fields?
How does form validation (such as ensuring a valid email format) improve the user experience?
Encourage students to share their experiences and discuss any challenges they faced while creating the form.
Extended Activity (Optional)
For students who finish early or want additional practice, suggest the following:
Add More Fields:
Ask students to add more input fields to their form, such as:
A phone number input field (<input type="tel">)
A date input field (<input type="date">)
Example:
// HTML tel input
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone"><br><br>
Experiment with Styling the Form:
Encourage students to add CSS styles to improve the appearance of their form.
Example of simple form styling:
// CSS form style
<style>
form {
max-width: 400px;
margin: 0 auto;
padding: 10px;
background-color: #f9f9f9;
border: 1px solid #ccc;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"], input[type="email"], input[type="password"] {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>By the end of this activity, students will have a solid understanding of how to create forms in HTML and how to use different input types to collect user data effectively. They will also gain experience in form validation and enhancing the user experience through proper form structure.
Last updated