HTML Forms: Collect and Submit User Input

An HTML form groups controls such as text fields, checkboxes, radio buttons, select boxes, textareas and submit buttons so user-entered data can be sent for processing.

<form action="signupck.php" method="post">
  <label for="first_name">First name</label>
  <input type="text" id="first_name" name="first_name" required>

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

The <form> element defines where the form starts and ends. Controls that should be submitted normally need a name attribute.

Basic Form Structure Top ↑

<form action="file_name.php" method="post">
  <!-- Form controls go here -->
</form>

The most important form attributes are:

• action: where the submitted data is sent.
• method: how the browser sends the form data, usually GET or POST.

If method is omitted, the default is GET.

Choose the Right Form Control Top ↑

Choose the control according to the kind of data the user must enter.

• Short free text: text input.
• Password: password input.
• One choice from a small group: radio buttons.
• Zero, one or several independent choices: checkboxes.
• One or more choices from a list: select box.
• Long multi-line text: textarea.
• File from the user's device: file input.
• Suggested values while still allowing custom input: datalist.

The control should make the expected input obvious and should be paired with a clear label.

action Attribute Top ↑

The action attribute identifies the URL that receives the submitted form data.

<form action="signupck.php" method="post">
  ...
</form>

The action can be a relative URL:

<form action="../process/signupck.php" method="post">

or an absolute URL when the form is intentionally submitted to another origin:

<form action="https://www.example.com/process.php" method="post">

If the action is omitted, the form submits to the current document URL.

method Attribute: GET and POST Top ↑

The two common form methods are get and post.

See GET and POST methods in PHP.

When to Use GET Top ↑

GET is useful when the request represents a retrievable resource or view, such as a search or filter.

<form action="search.php" method="get">
  <label for="q">Search</label>
  <input type="text" id="q" name="q">
  <button type="submit">Search</button>
</form>

A submitted value might produce a URL such as:

search.php?q=mysql

Because the parameters are in the URL, GET requests can often be bookmarked and shared.

When to Use POST Top ↑

POST is commonly used for login forms, registration forms, uploads and requests that create or modify server-side data.

<form action="signupck.php" method="post">
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">Create account</button>
</form>

The values are sent in the request body rather than appended to the URL.

name and id Attributes Top ↑

name identifies the submitted field. id identifies an element in the document and is commonly used to connect a label to its control.

<label for="city">City</label>
<input type="text" id="city" name="city">

When submitted, the field name becomes part of the name/value pair:

city=Hyderabad

Labels and Accessibility Top ↑

Associate visible text with each form control by using <label>.

<label for="full_name">Full name</label>
<input type="text" id="full_name" name="full_name">

The label improves usability for keyboard, screen-reader and pointer users. Clicking the label also activates many associated controls.

A placeholder is not a replacement for a visible label because placeholder text can disappear after the user starts typing.

Group Related Controls Top ↑

Use <fieldset> and <legend> for a related group such as radio buttons or checkboxes.

<fieldset>
  <legend>Preferred contact method</legend>

  <input type="radio" id="contact_email" name="contact" value="email">
  <label for="contact_email">Email</label>

  <input type="radio" id="contact_phone" name="contact" value="phone">
  <label for="contact_phone">Phone</label>
</fieldset>

Radio buttons that belong to one mutually exclusive group use the same name.

HTML Validation Attributes Top ↑

HTML provides attributes that help browsers check common input requirements before submission.

<label for="email">Email</label>
<input
  type="email"
  id="email"
  name="email"
  maxlength="120"
  autocomplete="email"
  required
>

Common validation-related attributes include required, min, max, minlength, maxlength and pattern.

File Uploads and enctype Top ↑

A form that uploads a file must use POST and multipart/form-data:

<form action="uploadck.php" method="post" enctype="multipart/form-data">
  <label for="document">Choose a file</label>
  <input type="file" id="document" name="document">
  <button type="submit">Upload</button>
</form>

See HTML file upload fields and PHP file upload handling.

HTML Form Elements Top ↑

Buttons and Links Top ↑

Form Applications and Examples Top ↑

Video: HTML Form Basics Top ↑

Form Exercise Top ↑

Create a signup form that asks for:

• First name
• Second name
• Gender using radio buttons
• Class using a select box
• Languages known using checkboxes: Python, PHP and JavaScript
• Educational background using a textarea

Each control should have a visible label. Submit the form from signup.html to signupck.php.

Continue with collecting HTML form data in PHP.

For a GET-based exercise, see using query-string data as a textbox default and query-string data formatting.

Frequently Asked Questions Top ↑

Next: Text field in an HTML form

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: