Learn Basic Forms

The Form Element

Forms are how users interact with web pages — signing up for accounts, submitting search queries, sending messages, and more. In HTML, all form controls are wrapped inside a <form> element.

The <form> tag has two important attributes:

action — the URL where the form data will be sent when submitted
method — the HTTP method to use, typically GET (for searches/filters) or POST (for submitting data that changes something on the server)

html

<form action="/submit" method="POST">
  <!-- form controls go here -->
</form>

Even though modern web applications often handle form submission with JavaScript, the <form> element remains important for accessibility and progressive enhancement.

Input Types and Labels

The <input> element is the most versatile form control. Its type attribute determines what kind of data it accepts:

type="text" — a single-line text field (the default)
type="email" — a text field that validates email format
type="password" — text is masked as dots or asterisks
type="number" — only accepts numeric values, shows increment/decrement controls

Every input must have an associated <label>. Labels are essential for accessibility — they tell screen reader users what each field is for, and clicking a label focuses its associated input.

You connect a label to an input using the for attribute on the label and a matching id on the input:

html

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

The name attribute is what gets sent to the server — it acts as the key in the submitted data.

Building a Complete Form

html

<form action="/contact" method="POST">
  <label for="name">Full Name:</label>
  <input type="text" id="name" name="name" required>

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

  <label for="age">Age:</label>
  <input type="number" id="age" name="age" min="0" max="150">

  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required>

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

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

Textarea, Buttons, and Validation

For multi-line text input, use the <textarea> element instead of <input>. Unlike input, textarea has a closing tag, and its default content goes between the tags. You can control its size with the rows and cols attributes.

html

<textarea name="bio" rows="5" cols="40">Default text here</textarea>

To submit a form, add a <button> with type="submit" or an <input> with type="submit". The button approach is more flexible because you can put any content inside it (text, icons, etc.).

HTML5 provides built-in form validation through attributes:

required — the field must be filled in before submitting
minlength / maxlength — minimum and maximum text length
min / max — minimum and maximum values for number inputs
pattern — a regular expression the value must match

These validations happen automatically in the browser, giving users immediate feedback without needing JavaScript.

Why is the <label> element important for form inputs?

Basic Forms

The Form Element

Input Types and Labels

Building a Complete Form

Textarea, Buttons, and Validation

Ready to practice?