lecture
Notes Of Class 10
Forms in HTML - Part 1
Objective:
Explore
the creation of basic HTML forms and input elements.
Outcome:
Students
will be able to create forms with various input types and labels, setting up
basic user input fields.
Introduction to HTML Forms
HTML
forms are used to collect user input on a webpage. They are essential for
gathering information from users, such as names, email addresses, and other
data. Forms can include a variety of input elements like text fields, radio
buttons, checkboxes, and buttons.
Basic Structure of an HTML Form:
|
<form
action="submit_form.php" method="post"> <!--
Form elements go here --> </form>
|
- <form>: The container element that holds
all form controls.
- action: Specifies the URL where the form data
will be sent when the form is submitted.
- method: Defines how the form data will be sent.
Common methods are get (appends data to the URL) and post (sends data in
the body of the request).
Common Form Elements
1. Text Input Fields
o
Used to collect
single-line text input from users.
o
Example:
|
<label
for="name">Name:</label> <input
type="text" id="name" name="name"
placeholder="Enter your name"> |
§ <label>: Provides a description for the input
field. The for attribute associates the label with the input field.
§ <input type="text">: Defines a text
input field.
§ id: Uniquely identifies the input element.
§ name: Represents the name of the input element, which
is sent to the server.
§ placeholder: Provides a hint about what to enter in
the input field.
2. Password Input Fields
o
Used to collect
password input. The characters are hidden as they are typed.
o
Example:
|
<label
for="password">Password:</label> <input
type="password" id="password"
name="password"> |
3. Radio Buttons
o
Allows users to
select one option from a set of choices.
o
Example:
|
<fieldset> <legend>Gender:</legend> <label><input
type="radio" name="gender" value="male">
Male</label> <label><input
type="radio" name="gender" value="female">
Female</label> </fieldset> |
§ <fieldset>: Groups related form elements.
§ <legend>: Provides a caption for the
<fieldset>.
§ name: Groups radio buttons together, ensuring only one
option can be selected.
4. Checkboxes
o
Allows users to
select multiple options from a set.
o
Example:
|
<label> <input type="checkbox" name="subscribe" value="newsletter"> Subscribe to newsletter </label> |
5. Submit Button
o
Submits the form
data to the server.
o
Example:
|
<input
type="submit" value="Submit"> |
6. Reset Button
o
Resets all form
fields to their default values.
o
Example:
|
<input
type="reset" value="Reset"> |
7. Text Area
o
Used to collect
multi-line text input from users.
o
Example:
|
<label
for="comments">Comments:</label> <textarea
id="comments" name="comments" rows="4"
cols="50" placeholder="Enter your comments
here"></textarea> |
§ rows: Sets the number of visible text lines.
§ cols: Sets the width of the text area in characters.
8. Select Dropdown
o
Allows users to
select an option from a dropdown list.
o
Example:
|
<label
for="country">Country:</label> <select
id="country" name="country"> <option
value="usa">United States</option> <option
value="canada">Canada</option> <option
value="uk">United Kingdom</option> </select> |
§ <select>: Creates a dropdown list.
§ <option>: Defines the options within the
dropdown list.
Form Attributes and Validation
1. required Attribute
o
Ensures that the
user fills out the field before submitting the form.
o
Example:
<input
type="text" name=""name" required">
2. min and max Attributes (for numeric inputs)
o
Sets the minimum
and maximum values for number inputs.
o
Example:
|
<input
type="number" name="age" min="1"
max="100"> |
3. pattern Attribute
o
Defines a regular
expression that the input must match.
o
Example:
|
<input type="text" name="postalCode" pattern="[0-9]{5}" title="Five digit zip code"> |
§ title: Provides a message to the user if the input
does not match the pattern.
Summary
In
this class, you learned how to create basic HTML forms with various input
elements. Forms are essential for collecting user data and can be customized
with different types of inputs, labels, and attributes to enhance user
experience and ensure data validation.