Lecture Notes Of Class 6: Forms - Part 1 (Basic Elements)
Objective:
By the end of this class,
students will understand the basic structure and elements of HTML forms. They
will be able to create simple forms using input fields, labels, and the
required attributes to ensure user interaction and validation.
1.
Introduction to HTML Forms
Forms are essential in web
development as they allow users to input data that can be sent to a server for
processing. A form might ask for user details such as name, email, password,
and other data that can be submitted for various purposes like login,
registration, or feedback.
In HTML, a form is created using
the <form> tag. Inside the form, we use various input elements to collect
data.
2. Basic
Structure of a Form
A basic HTML form looks like
this:
html
Copy code
<form action="submit_form.php"
method="post">
<!-- Form elements will go here -->
</form>
- <form>:
This tag creates the form.
- action:
Specifies the URL where the form data will be sent for processing.
- method:
Defines the HTTP method (either "GET" or "POST") used
to send form data.
3. Basic
Form Elements
Let's now go over the most common
elements used in forms.
3.1.
Input Fields
The <input> tag is used to
create interactive controls within a form. The most common types are:
- Text
Fields: For users to enter text (like names or email
addresses).
html
Copy code
<input
type="text" name="username">
- Password
Fields: These hide the characters entered for
security purposes (used for passwords).
html
Copy code
<input
type="password" name="password">
- Email
Fields: Specifically for email addresses. It also
validates the format of the entered email.
html
Copy code
<input
type="email" name="email">
- Submit
Button: Used to submit the form.
html
Copy code
<input
type="submit" value="Submit">
Each <input> element should
have a name attribute. This is used to identify the data when it is submitted.
3.2.
Labels
Labels are used to describe the
purpose of an input field. They are essential for accessibility and help screen
readers identify the form fields. The <label> tag is used to create
labels.
html
Copy code
<label
for="email">Email:</label>
<input
type="email" id="email" name="email">
- for
attribute: The for attribute connects the label to an
input field. It must match the id of the corresponding input element. This
helps users click on the label to focus on the input field.
4.
Creating a Login Form
Let's create a simple login form
using the elements we've discussed.
html
Copy code
<!DOCTYPE
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Login Form</title>
</head>
<body>
<h2>Login</h2>
<!-- Form starts here -->
<form action="login.php" method="post">
<!-- Email input field -->
<label for="email">Email:</label>
<input type="email" id="email"
name="email" placeholder="Enter your email" required>
<br><br>
<!-- Password input field -->
<label for="password">Password:</label>
<input type="password" id="password"
name="password" placeholder="Enter your password" required>
<br><br>
<!-- Submit button -->
<input type="submit" value="Login">
</form>
</body>
</html>
Explanation:
- Action
and Method: The form will be submitted to the login.php
file, and the POST method is used to send the data.
- Email
Field: The type="email" ensures that the
input is validated to be an email address. The placeholder gives users a
hint about what to enter. The required attribute ensures that the field is
not empty before the form can be submitted.
- Password
Field: Similar to the email field, but the type="password"
hides the input text. The placeholder provides guidance on what to enter,
and required ensures it's not empty.
- Submit
Button: The submit button will send the form data to
the server.
5. Using
Placeholders and Required Attributes
5.1.
Placeholders
The placeholder attribute is used
to provide a hint inside the input field that shows a short description of the
expected value. It disappears when the user starts typing.
Example:
html
Copy code
<input
type="email" name="email" placeholder="Enter your
email">
5.2.
Required Attribute
The required attribute is used to
ensure that the user cannot submit the form without filling out the field. If
the field is left empty, the browser will prevent form submission and will show
a message asking the user to fill in the required fields.
Example:
html
Copy code
<input
type="password" name="password" required>
6. Lab
Tasks
Task 1:
Create a Login Form
1. Create a
basic login form with input fields for the user's email and password.
2. Add
labels for each input field.
3. Use
placeholders to guide the user about what to input.
4. Add the required
attribute to both the email and password fields to ensure they are not left
empty.
5. Include a
submit button to submit the form.
Expected Outcome:
Your login form should look like
this:
- Email
input field with a placeholder ("Enter your email").
- Password
input field with a placeholder ("Enter your password").
- Both
fields should be required.
- A
submit button that sends the form data to a processing page.
Task 2:
Test the Form
- Open
your form in a browser and ensure that the placeholder text appears inside
the input fields.
- Test
the form by leaving the fields empty and trying to submit. You should see
a browser warning if the required attribute is used correctly.
7.
Summary
In this lesson, we learned how to
create a basic HTML form with the essential elements:
- Input
fields for collecting data.
- Labels for
describing each input field.
- Placeholders to
give hints about what the user should enter.
- The required
attribute to ensure that users fill out the necessary fields.
These basic form elements form
the foundation of any user interaction on a website, from simple login forms to
more complex data entry forms.
