Practical 7. Forms and Input
Objective:
To learn how to create HTML forms to collect user input on web pages.
Introduction :
The HTML <form> element is used to create an HTML form for user input.
The <form> element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc.
|
Instructions:
Open your index.html file created in Previous Class.
Add a form inside the <body> tag:
Example:
|
<html> <head> <title>
How to create a form using HTML</title> </head> <body>
<h1>Welcome to My First HTML Page</h1>
<p>This is a paragraph of text.</p>
<h2>Sample Form</h2>
<form action="/submit-form" method="post">
<label for="fname">First
Name:</label>
<input type="text" id="fname"
name="fname"><br><br>
<label for="lname">Last
Name:</label>
<input type="text" id="lname"
name="lname"><br><br>
<label
for="email">Email:</label>
<input type="email" id="email"
name="email"><br><br>
<label
for="message">Message:</label><br>
<textarea id="message"
name="message" rows="4"
cols="50"></textarea><br><br>
<input type="submit"
value="Submit">
</form> </body> <html>
|
Save and view your HTML document in a web browser to see the form.
Output:
Detailed Explanation:
Creating a Form:
HTML Form <form> Tag:
The <form> tag is used to create an HTML form for user input.
Syntax:
<form action="URL" method="post/get">
<!-- Form controls (input fields, textareas, buttons) -->
</form>
Attributes of <form> tag:
action: Specifies where to send the form data when submitted.
method: Specifies the HTTP method (post or get) for sending form data.
Form Controls:
Text Input (<input type="text">):
<label for="fname">First Name:</label>
<input type="text" id="fname" name="fname">
Creates a single-line text input field.
Email Input (<input type="email">):
<label for="email">Email:</label>
<input type="email" id="email" name="email">
Creates an input field specifically for email addresses. Browsers may provide additional validation for email format.
Textarea (<textarea>):
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4" cols="50"></textarea>
Creates a multi-line text input area. rows and cols attributes specify its size.
Submit Button (<input type="submit">):
<input type="submit" value="Submit">
Creates a button to submit the form data.
Form Attributes:
action Attribute: Specifies where to send the form data when submitted. Typically, this is a server-side script or URL that processes the form data.
method Attribute:Specifies the HTTP method (post or get) for sending form data.
post: Sends form data in the HTTP request body (secure and suitable for sensitive data).
get: Sends form data in the URL (less secure and suitable for non-sensitive data).
Form Labels (<label>):
<label> Tag:
Associates a label with a form control (input field or textarea) for better accessibility.
Example:
<label for="fname">First Name:</label>
<input type="text" id="fname" name="fname">
Outcome:
By completing this lab, you will understand how to create HTML forms to collect user input, including text inputs, email inputs, textareas, and submit buttons. Forms are essential for interactive web pages that gather information from users effectively. Understanding form creation is crucial for building dynamic and user-friendly websites.
Lab Exercise
Objective:
To create and understand the implementation of HTML forms with various input types.
Instructions:
Create a new file named forms_and_input.html using a text editor (e.g., Notepad, Visual Studio Code, Sublime Text).
Build the basic structure of your HTML document:
Example 2:
Herw we used all types of form controls like input,label, select, option in the html form.
|
<!DOCTYPE html> <html lang="en"> <head> <meta
charset="UTF-8"> <meta name="viewport"
content="width=device-width, initial-scale=1.0"> <title>Forms and Input in
HTML</title> </head> <body> <h1>Form Example</h1> <form
action="/submit-form" method="POST"> <label
for="fname">First Name:</label> <input
type="text" id="fname" name="firstname"
required><br><br> <label
for="lname">Last Name:</label> <input
type="text" id="lname" name="lastname"
required><br><br> <label
for="email">Email:</label> <input
type="email" id="email" name="email"
required><br><br> <label
for="age">Age:</label> <input
type="number" id="age" name="age"
min="18" required><br><br> <label
for="gender">Gender:</label> <select
id="gender" name="gender" required>
<option value="">Select</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select><br><br> <label
for="subscribe">Subscribe to Newsletter:</label> <input
type="checkbox" id="subscribe"
name="subscribe"><br><br> <input
type="submit" value="Submit"> </form> </body> </html>
|
Save the file and open it in a web browser to view your web page (forms_and_input.html).
Output:
Detailed Explanation:
HTML Structure:
<form>: Defines an HTML form for user input.
action="/submit-form": Specifies the URL where the form data will be sent upon submission (replace with appropriate backend endpoint).
method="POST": Specifies the HTTP method (POST) used to send form data to the server.
Form Elements:
<label>: Provides a label for each form input (for attribute links to the input's id).
<input>: Represents various types of form controls for text input (text, email, number), checkboxes (checkbox), and submit button (submit).
<select>: Creates a dropdown list (<select>) with options (<option>) for selecting gender.
Form Validation:
required attribute: Ensures that the user must fill out the input field before submitting the form.
Submitting Form Data:
Submit Button (<input type="submit">): When clicked, submits the form data to the server specified in the action attribute.
Tasks:
Enhance your page by:
Adding additional form fields such as text areas (<textarea>), radio buttons (<input type="radio">), and file upload (<input type="file">).
Implementing client-side validation using JavaScript (<script> tag) to validate form inputs before submission.
Explore form attributes:
- Experiment with attributes like min, max, and pattern for input validation (e.g., minimum and maximum values for age, pattern matching for email format).
Outcome:
By completing this lab exercise, you will have gained practical experience in creating HTML forms with various input types and understanding their attributes and behaviors. This foundational knowledge is essential for building interactive web applications and handling user input effectively.