• Hajipur, Bihar, 844101

☰
❮
❯

HTML

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

HTML Forms

← Previous Next →

🔹 What is an HTML Form?

An HTML form is used to collect user input. Data entered into form fields is typically sent to a server for processing using the action and method attributes.

🔹 Basic Syntax
<form action="/submit" method="post">
  <!-- form fields here -->
</form>

🔹 Common Form Elements

Element Description
<input> For text, password, checkbox, radio, etc.
<textarea> Multi-line text input
<select> Dropdown list
<option> Options in a dropdown
<label> Label for form fields
<button> Clickable button
<fieldset> Groups related elements
<legend> Title for a group

💡 Common Input Types

Type Example
text <input type="text">
password <input type="password">
email <input type="email">
number <input type="number">
radio <input type="radio">
checkbox <input type="checkbox">
submit <input type="submit">
reset <input type="reset">
date <input type="date">
file <input type="file">

💻 Example: Basic Form

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

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

  <label for="msg">Message:</label><br>
  <textarea id="msg" name="usermessage" rows="4" cols="30"></textarea><br><br>

  <input type="submit" value="Send">
</form>

🔹 Label Association

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

The for attribute of <label> matches the id of the input field.

🔹 Fieldset & Legend

<fieldset>
  <legend>Personal Info</legend>
  <label>Name: <input type="text" name="name"></label>
</fieldset>

Practice Questions

Q1. Create a form with name, email, and message fields.

Q2. Add radio buttons for gender selection.

Q3. Use checkboxes for selecting multiple hobbies.

Q4. Implement a dropdown using <select> and <option>.

Q5. Add a file upload field using <input type="file">.

Q6. Use <fieldset> and <legend> to group contact fields.

Q7. Create a submit and reset button.

Q8. Make a password input field.

Q9. Add a date of birth field with <input type="date">.

Q10. Set required attribute for name and email fields.

HTML Forms Quiz

Q1: Which HTML tag is used to create a form?

A. <input>
B. <form>
C. <div>
D. <fieldset>

Q2: Which attribute defines how form data is sent?

A. target
B. action
C. method
D. type

Q3: Which tag is used to create a multi-line text input?

A. <input>
B. <textarea>
C. <text>
D. <span>

Q4: What input type is used for email addresses?

A. type="text"
B. type="mail"
C. type="email"
D. type="string"

Q5: Which element groups related form inputs?

A. <label>
B. <form>
C. <fieldset>
D. <group>

Q6: What tag provides options in a dropdown?

A. <option>
B. <input>
C. <radio>
D. <label>

Q7: Which input type is best for selecting multiple options?

A. radio
B. checkbox
C. select
D. file

Q8: What is the default method used if method is not specified?

A. GET
B. POST
C. PUT
D. DELETE

Q9: What is the purpose of the required attribute?

A. It sets default value
B. It disables the field
C. It makes the field mandatory
D. It limits character length

Q10: What is the purpose of the <label> tag?

A. To add placeholder text
B. To validate input
C. To describe input fields
D. To create checkboxes
← Previous Next →
Login
Go Back Top