Scribd
Upload
4 views3 pages

Class 3 Notes - HTML Forms

This document provides an overview of HTML forms, detailing their purpose in collecting user input and the various types of input fields available, such as text, password, email, and date inputs. It also explains the use of labels, checkboxes, radio buttons, and submit buttons, emphasizing best practices for form structure. Key concepts like unique identifiers (id) and data sending (name) are highlighted to enhance form usability and accessibility.

Uploaded by

k2khurshid
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views3 pages

Class 3 Notes - HTML Forms

This document provides an overview of HTML forms, detailing their purpose in collecting user input and the various types of input fields available, such as text, password, email, and date inputs. It also explains the use of labels, checkboxes, radio buttons, and submit buttons, emphasizing best practices for form structure. Key concepts like unique identifiers (id) and data sending (name) are highlighted to enhance form usability and accessibility.

Uploaded by

k2khurshid
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Class 3 Notes – HTML Forms

🔹 1. What is a Form?
An HTML form is used to collect user input. It allows users to enter data which can be sent
to a server.

<form action="">
<!-- form elements go here -->
</form>

●​ action="" → Defines where the form data will be sent

🔹 2. Input Fields
HTML provides different types of input fields:

✅ Text Input
<input type="text" id="name">

●​ Used to enter names or plain text

✅ Password Input
<input type="password" id="password">

●​ Hides user input (shows dots or stars)

✅ Email Input
<input type="email" id="email">

●​ Accepts only valid email format

✅ Date Input
<input type="date" id="date">

●​ Lets user pick a date from calendar

🔹 3. Labels
<label for="name">Name:</label>

●​ Labels describe input fields


●​ for="name" connects label with input id="name"
●​ Improves accessibility and usability
🔹 4. Checkboxes
<input type="checkbox"> I agree to the terms

●​ Used for multiple selections


●​ Example: Accepting terms & conditions

⚠️ Note:
●​ Each checkbox should have a unique id

🔹 5. Radio Buttons
<input type="radio" name="gender" value="male"> Male

●​ Used for single selection


●​ All radio buttons must have the same name
●​ Only one option can be selected at a time

🔹 6. Submit Button
<input type="submit" value="Submit">

●​ Sends form data when clicked

🔹 7. Important Concepts
●​ id → Unique identifier for inputs
●​ name → Used to send data to server
●​ <br> → Adds line break (spacing)

🔹 8. Improved Example (Best Practice)


<form action="">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br>

<label for="password">Password:</label>
<input type="password" id="password" name="password"><br>

<label for="email">Email:</label>
<input type="email" id="email" name="email"><br>

<label for="date">Date:</label>
<input type="date" id="date" name="date"><br>

<input type="checkbox" id="terms">


<label for="terms">I agree to terms</label><br>

<input type="radio" name="gender" value="male"> Male


<input type="radio" name="gender" value="female"> Female
<input type="radio" name="gender" value="lgbtq+"> LGBTQ+<br>

<input type="submit" value="Submit">


</form>

You might also like