Forms in HTML

Forms are the primary way users interact with a web page or application. They allow users to input data through various controls and submit that data to a server.

Basic Structure

A form is created using the <form> tag:

Code Block Loading...

When a user clicks a submit button (or the form is submitted programmatically), the browser sends the form data to the server.

Default Behavior

  • By default, forms use the GET method, which appends data to the URL.
  • This can expose sensitive information and has length limitations.
  • For most use cases, it's better to use the POST method:

Code Block Loading...

Targeting the Submission URL

By default, the form submits to the current page URL. For example, if the form is on: https://example.com/contacts

Submitting it will send the data to the same URL. If there’s no server-side logic to handle it, nothing will happen.

To send the data elsewhere, use the action attribute:

Code Block Loading...

This will submit the form data to: https://example.com/new-contact

(assuming the same origin)

What Data Gets Sent?

Form data comes from form controls, such as:

  • <input> – single-line text fields
  • <textarea> – multi-line text areas
  • <select> – dropdown menus
  • Radio buttons – choose one from a visible list
  • Checkboxes – choose zero, one, or multiple options
  • File uploads – send files to the server
  • And more...

The <input> Tag

The <input> element is one of the most commonly used form controls in HTML. It's highly versatile and can behave differently depending on its type attribute.

Default Text Input

By default, <input> renders as a single-line text field:

Code Block Loading...

To ensure the input's value is submitted with the form, you must assign a name:

Code Block Loading...

You can also use the placeholder attribute to display hint text when the field is empty:

Code Block Loading...

Email Input (type="email")

Validates the input as a semantically correct email address before submission (note: it doesn't verify if the email exists):

Code Block Loading...

Password Input (type="password")

Masks the entered characters with dots or asterisks, ideal for password fields:

Code Block Loading...

Number Input (type="number")

Accepts only numeric values:

Code Block Loading...

You can restrict the range using min and max:

Code Block Loading...

Use step to define allowed increments:

Code Block Loading...

Hidden Input (type="hidden")

Invisible to users but still submitted with the form. Commonly used for CSRF tokens, user tracking, or form identification:

Code Block Loading...

Setting a Default Value

All input types can have a predefined value. If unchanged, this value is submitted:

Code Block Loading...

If combined with a placeholder, the placeholder appears when the field is cleared:

Code Block Loading...

Form Submission with <input type="submit">

The <input type="submit"> element creates a button that submits the form when clicked:

Code Block Loading...

By default, the button displays the text "Submit". You can customize this label using the value attribute:

Code Block Loading...

This is the most common way to trigger form submission, and it's essential for sending user input to the server.

Form Validation in HTML

Modern browsers offer built-in client-side validation to help ensure form fields are filled out correctly before submission. You can:

  • Require fields to be filled
  • Enforce specific input formats

Let’s explore both techniques.

Required Fields

Use the required attribute to make a field mandatory. If left empty, the browser prevents form submission:

Code Block Loading...

This is a simple way to ensure users don’t skip essential fields.

Format Enforcement

Certain input types come with built-in format validation:

  • type="email" checks for a valid email structure
  • type="number" allows numeric input and can be constrained using min and max

You can also define custom formats using the pattern attribute, which accepts a regular expression:

Code Block Loading...

This example only accepts exactly 8 alphabetic characters (uppercase or lowercase).

Other Form Input Types

HTML offers a wide variety of <input> types beyond text fields. Here's a breakdown of some useful ones:

File Uploads

Allow users to upload files from their device:

Code Block Loading...

  • To support multiple file uploads:

Code Block Loading...

Restrict accepted file types using the accept attribute:

  • Accept any image format:

Code Block Loading...

  • Accept specific MIME types or extensions:

Code Block Loading...

Buttons

Add custom buttons that don’t submit the form:

Code Block Loading...

Use JavaScript to define their behavior.

To reset the form to its initial state:

Code Block Loading...

Radio Buttons

Create a group of mutually exclusive choices:

Code Block Loading...

Only one option can be selected. To pre-select a value:

Code Block Loading...

Checkboxes

Allow users to select multiple options:

Code Block Loading...

To pre-check a box:

Code Block Loading...

Multiple selected values are submitted as an array.

Date and Time Inputs

HTML provides several date/time input types:

  • Date picker:

Code Block Loading...

  • Time picker:

Code Block Loading...

  • Month selector:

Code Block Loading...

  • Week selector:

Code Block Loading...

  • Date and time picker:

Code Block Loading...

You can also set min, max, and step attributes for range control.

Color Picker

Let users choose a color:

Code Block Loading...

Set a default color:

Code Block Loading...

Range Slider

Create a slider for numeric input:

Code Block Loading...

Add a step interval:

Code Block Loading...

Telephone Input

Use type="tel" for phone numbers:

Code Block Loading...

Mobile devices often show a numeric keypad. Add a pattern for validation:

Code Block Loading...

URL Input

Accept and validate URLs:

Code Block Loading...

Use a pattern to enforce format:

Code Block Loading...

The <textarea> Tag

The <textarea> element is used to collect multi-line text input from users — ideal for comments, messages, or longer content.

Syntax and Structure

Unlike <input>, <textarea> requires both opening and closing tags:

Code Block Loading...

Setting Dimensions

You can control its size using CSS or the rows and cols attributes:

Code Block Loading...

  • rows defines the number of visible text lines
  • cols defines the width in character columns
  • CSS (recommended for flexibility):

Code Block Loading...

Naming the Field

To ensure the content is submitted with the form, use the name attribute:

Code Block Loading...

This assigns a key (article) to the submitted value, just like other form fields.

Placeholder Text

Use the placeholder attribute to show a hint when the field is empty:

Code Block Loading...

Character Limits

Control how much text a user can enter:

Code Block Loading...

You can also use minlength for a minimum character requirement.

Accessibility Tips

  • Always pair <textarea> with a <label>:

Code Block Loading...

  • Use aria-describedby to associate helper text or character counters.

The <select> Tag

The <select> element creates a drop-down menu that lets users choose one option from a list.

Basic Structure

Each choice is defined using the <option> tag. The name attribute on <select> determines the key sent to the server, and each <option> has a value:

Code Block Loading...

Disabled Options

You can disable specific options to make them unselectable:

Code Block Loading...

Empty Option

Include an empty option to allow users to select “None” or leave the field blank:

Code Block Loading...

Grouping Options with <optgroup>

Use <optgroup> to organize related options under labeled categories:

Code Block Loading...

This improves readability and user experience, especially in longer lists.

HTML Form Demo: Exploring Input Types

Code Block Loading...

This form is fully functional and demonstrates validation, accessibility, and a wide range of input types.