HTML Forms

What Is a Form?

A form is used to collect user input. It groups input elements and submits the data to a server or script.

<form action="/submit" method="POST">
  <input type="text" name="username">
</form>

Common Input Types

HTML provides many input types:

text, password, email
number, date
checkbox, radio
submit, reset

<input type="email" name="email">

Labels

The <label> tag improves accessibility and usability by linking text to a form field.

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

Textarea and Select

Use <textarea> for multiline input and <select> for dropdown menus:

<textarea name="message"></textarea>

<select name="gender">
  <option value="male">Male</option>
  <option value="female">Female</option>
</select>

Buttons

Forms are usually submitted with a button:

<button type="submit">Send</button>

Form Attributes

Form attributes control how and where the form data is sent when submitted. Understanding these is essential for connecting front-end forms with back-end logic or APIs.

`action`

The action attribute specifies the URL or endpoint where the form data will be submitted. This can be a server file, API route, or third-party service.

<form action="/submit-form">...</form>

If omitted, the form submits to the same page it is on.

`method`

Determines how form data is sent to the server. Two main options:

GET – Appends data to the URL. Suitable for searches and non-sensitive data.
POST – Sends data in the HTTP body. Ideal for forms with sensitive or large data (e.g., login, contact forms).

<form method="POST" action="/register">...</form>

`target`

Controls where the response from the server appears:

_self: Default. Opens in the same tab.
_blank: Opens in a new tab.
_parent: Opens in the parent frame.
_top: Opens in the full body of the window (useful for nested iframes).

<form target="_blank" action="/download">...</form>

`name`

Identifies the form, useful when handling multiple forms or referencing the form in JavaScript.

<form name="signupForm">...</form>

Security Tip

Avoid using GET for forms that handle passwords, personal information, or large text blocks. Use POST instead.

Practice Prompt

Build a form that includes:

Name (text)
Email (email)
Gender (select dropdown)
Message (textarea)
Submit button

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

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

  <label for="gender">Gender:</label>
  <select id="gender" name="gender">
    <option value="male">Male</option>
    <option value="female">Female</option>
  </select><br><br>

  <label for="message">Message:</label><br>
  <textarea id="message" name="message"></textarea><br><br>

  <button type="submit">Submit</button>
</form>

Need Help?

Ask the AI if you need help understanding or want to dive deeper in any topic

Menu