logo

The <form> Tag and Its Attributes – Key Points Explained

Welcome students! Today let's explore the <form> tag in HTML. This is key for making interactive websites where users can enter and send information. We’ll cover what it is, how it works, its main attributes, and see examples along the way. We’ll even have some fun activities and scenario questions at the end!

1. What is the <form> tag?

  • The <form> tag creates a form section on a webpage.
  • Think of it as a container that holds places where people can type info (like name or email).
  • A form is used to collect and submit data from users.

Example 1:
A simple form box for feedback.

<form>
  <input type="text" placeholder="Your feedback" />
</form>

Example 2:
A form to log in.

<form>
  <input type="text" placeholder="Username" />
  <input type="password" placeholder="Password" />
</form>

2. Role of the <form> tag

  • It acts as a container for all the form elements, like textboxes, buttons, etc.
  • Makes sure that all form controls inside it work together during submission.
  • Specifies where (action) and how (method) the form data is sent when submitted.

Important: If you don’t use the <form> tag, the input fields won't send data as a group!

Example 1:
A form that collects email for newsletters.

<form>
  <input type="email" placeholder="Enter your email" />
  <input type="submit" />
</form>

Example 2:
A feedback form containing name, message, and buttons.

<form>
  <input type="text" placeholder="Name" />
  <textarea placeholder="Message"></textarea>
  <button type="submit">Send</button>
</form>

3. Syntax of a Form

Here’s how you write it:

<form action="file.php" method="post" name="studentForm" id="form1">
  <!-- Input elements go here -->
</form>
  • Place all the form fields inside <form>...</form> tags.

Example 1:
A basic student registration form.

<form>
  <input type="text" placeholder="Student Name" />
</form>

Example 2:
A search form for a website.

<form>
  <input type="search" placeholder="Search here..." />
  <input type="submit" value="Go" />
</form>

4. Important Attributes of <form> Tag

Let’s look at the four most important ones: action, method, name, and id.

a) action

  • Decides where the data goes after submitting the form.
  • Usually contains a file name or web URL which will receive the data.
  • If set to action="" (empty), data goes to the same page.
<form action="submit_form.php">
  <!-- fields -->
</form>

Example 1:
Send data to a page called "receive.php":

<form action="receive.php"></form>

Example 2:
Send data to the same page:

<form action=""></form>

Tip: "action" is like an address telling the browser where to deliver the parcel (data)!

b) method

  • Tells the browser how to send your data.
  • Two main methods:
    • GET (shows data in the URL, best for searches and safe data)
    • POST (sends data secretly, best for logins, passwords, sensitive data)
<form method="get"></form>

or

<form method="post"></form>

Example 1:
A login form that uses POST for safety.

<form method="post">
  <input type="text" name="user" />
  <input type="password" name="pwd" />
</form>

Example 2:
A search box that uses GET to show query in the URL.

<form method="get">
  <input type="search" name="query" />
</form>

c) name

  • Gives your form a name so scripts (like JavaScript) can find it.
  • Useful for programming and automation.

Example 1:

<form name="signupForm">
  <!-- form fields -->
</form>

Then, in JavaScript:

document.signupForm.submit();

Example 2:

<form name="contactUs">
  <!-- form fields -->
</form>

Tip: "name" works like a label you put on your school bag to recognize it.

d) id

  • Gives a unique identity to a form.
  • Helps in CSS (for design) and JavaScript (for interactivity).

Example 1:

<form id="mainForm">
  <!-- form fields -->
</form>

You can then add style:

#mainForm {
  border: 2px dashed blue;
}

Example 2:
Use JavaScript to access the form:

document.getElementById("mainForm");

Tip: "id" is like your roll number in class — unique to just you!

5. Example: Complete Form With Attributes

Here’s a sample form you can try:

<!DOCTYPE html>
<html>
  <body>
    <h3>Student Registration Form</h3>
    <form action="register.php" method="post" name="studentForm" id="form1">
      <label for="name">Name:</label>
      <input type="text" id="name" name="studentName" required /><br /><br />

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

      <input type="submit" value="Submit" />
      <input type="reset" value="Clear" />
    </form>
  </body>
</html>

Observations:

  • When you fill in the form and click Submit, the data is sent to "register.php" using POST method.
  • The form has unique name and id.
  • Each input field is labeled for better user experience.

6. Activity: Create Your Own Form

Activity Steps:

  1. Open Notepad (or any code editor).

  2. Type this code:

    <form action="feedback.php" method="post" name="feedbackForm" id="fbForm">
  <label for="user">Your Name:</label>
  <input type="text" id="user" name="userName" /><br />

  <label for="comment">Feedback:</label>
  <textarea id="comment" name="userComment"></textarea><br />

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

  3. Save the file as myform.html.

  4. Open it in any browser.

  5. Type your name and feedback, then click "Send Feedback".

Observations:

  • The form collects your input and (if you had a feedback.php file) would send it there.
  • You can see all the parts: action, method, name, id, and the input fields.
  • Try changing the method to "get" and observe the difference in the URL after submission!

7. Key Points For Revision

  1. <form> is the main container for user input elements.
  2. action tells where data will go after submission.
  3. method tells how data is sent (GET or POST).
  4. name and id are important to uniquely identify the form, for code and design.
  5. All input elements (text, email, password, etc.) should be inside <form>...</form>.

8. Fun Quick Summary

Think of the <form> tag as a classroom box for suggestions. You write your note, drop it in (input fields inside <form>), and the teacher (web browser) sends it to the office (server) as per the address (action) and method (method). The box itself has a unique label (name or id) so teachers know which box to check!

Scenario Based Questions

  1. Scenario: You create a feedback form for your school website using the POST method.
  • Question: Why did you choose POST instead of GET?
  • Answer: POST hides the feedback in the request body, making it more secure and not visible in the URL. It's better for private messages.
  1. Scenario: You forgot to set the action attribute in your form.
  • Question: What happens when a user submits the form?
  • Answer: The form sends the data to the same page. This might work if your page can handle it, or do nothing if not programmed properly.
  1. Scenario: Your teacher asks you to style only a specific form on your school’s website using CSS.
  • Question: Which attribute helps you do this, and how?
  • Answer: Use the id attribute. In CSS, target the form using #formId { ... } to style just that form.
  1. Scenario: A friend of yours wants to build a form for collecting quiz answers on a web page, but doesn’t use the <form> tag.
  • Question: What problem might they face?
  • Answer: Without the <form> tag, the input fields won’t be grouped and data won’t be submitted correctly. The browser won’t know to send the data together.
  1. Scenario: When testing your sign-up form using method="get", you see your entered password in the browser’s address bar after submitting.
  • Question: Is this safe? What should you do?
  • Answer: No, it's not safe! Use method="post" for passwords or personal information to keep them hidden from the URL.

You Did It!

Now go ahead and try making your own HTML forms. Change attributes and see what happens — learning by doing is fun!

Back to Topics

Take the test