The <form> tag creates an interactive form for collecting user input. It's the container that holds all form controls like inputs, buttons, and selects.

<form>

A <form> wraps form controls and defines how the form data is submitted. Use the action attribute to specify where the data goes, and method to define how it's sent.

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

Now we add form elements inside. The form collects all input values and submits them together when the submit button is clicked. Each input needs a name attribute.

<form action="/submit" method="post">
  <input type="text" name="username">
  <button type="submit">Submit</button>
</form>

In the browser, the form appears with input fields and a submit button. When submitted, the browser sends the form data to the action URL using the specified method.

<form action="/submit" method="post">
  <input type="text" name="username">
  <button type="submit">Submit</button>
</form>

Checkpoint: Which attribute specifies where form data is sent?

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

Correct! The action attribute specifies the URL where the form data is sent. The method attribute (get or post) determines how the data is transmitted.

<form action="/submit" method="post">
  <input type="text" name="username">
  <button type="submit">Submit</button>
</form>

Now it's your turn. Forms are essential for user interaction on the web. Complete the challenges below to master the Form tag!

form.html

1 / 7

📝

Tutor:The <form> tag creates an interactive form for collecting user input. It's the container that holds all form controls like inputs, buttons, and selects.

⭐ 0 EXP

Form Mastery

Unlock nodes by learning form structure and submission.

Concept 1: The Form Tag

The <form> tag creates an interactive form for collecting user input. It's the container that holds all form controls and defines how the form data is submitted.

System Check

What is the primary purpose of the <form> tag?

To style form elementsTo create a container for form controlsTo validate form inputTo display form data

Community Holo-Net

Share Form Designs

Created effective forms? Share your code and best practices.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

HTML Form Tag

Pascual Vila

Frontend Instructor.

The <form> tag creates an interactive form for collecting user input. It's the container that holds all form controls and defines how the form data is submitted.

Form Container

The <form> element wraps form controls (inputs, selects, textareas, buttons) and defines the submission behavior. All form controls must be inside a form to be submitted together.

Action and Method Attributes

The action attribute specifies the URL where the form data is sent when submitted. The method attribute defines how the data is sent: get (data in URL) or post (data in request body).

Form Submission

When a submit button is clicked, the browser collects all form control values (those with name attributes) and sends them to the action URL using the specified method. The page may reload or navigate to the response.

Best Practices

Always give form controls name attributes so their values are included in submission. Use post for sensitive data or large amounts of data, and get for search forms or bookmarkable URLs. Consider using <fieldset> to group related fields.

Form Tag Glossary

<form>: HTML element that creates a container for form controls. Defines how form data is collected and submitted.
action attribute: Specifies the URL where form data is sent when the form is submitted. Can be a relative or absolute URL.
method attribute: Defines how form data is sent: get (data in URL query string) or post (data in request body). Default is get.
Form Controls: Elements like inputs, selects, textareas, and buttons that go inside a form. They collect user input and are submitted together.
name attribute: Required on form controls to include their values in form submission. The name becomes the key in the submitted data.
Block Element: An element that creates a new line and takes full width. <form> is a block-level element.

📖 INDEX