• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

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.

← Previous Next →

HTML

online coding class codepractice

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

codepractice logo
Login
Go Back Top