HTML Forms and Input Elements — Complete Guide with Examples

Forms are how users interact with websites. Every time you log into a site, search for something, fill in a contact form, or sign up for a newsletter — you are using an HTML form. If you have been following from What is HTML? A Complete Beginner Guide with Examples, this tutorial builds on everything covered so far because forms use attributes heavily, combine multiple element types, and are the first place in HTML where your page starts actually collecting real user input.

Basic Form Structure

A form is created with the <form> tag. The two most important attributes are action and method.

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

The action attribute is the URL where the form data gets sent when submitted. The method attribute defines how — GET sends data as URL parameters visible in the browser address bar, POST sends it in the request body where it is not visible. For any form collecting passwords or sensitive data, always use POST.

Text, Email and Password Inputs

The most common form element is the text input. The <label> element connects a visible label to the input, which is important for accessibility.

<form action="/register" method="POST">nn  <label for="username">Username:</label>n  <input type="text" id="username" name="username" placeholder="Enter your username">nn  <label for="email">Email Address:</label>n  <input type="email" id="email" name="email" placeholder="you@example.com">nn  <label for="password">Password:</label>n  <input type="password" id="password" name="password">nn  <button type="submit">Create Account</button>nn</form>

The for attribute on <label> must match the id on its input — this links them so clicking the label focuses the input. The name attribute is what the server receives when submitted. The placeholder text disappears when the user starts typing.

Radio Buttons and Checkboxes

Radio buttons let users select exactly one option from a group. Checkboxes let users select multiple options. Both use <input> but with different type values.

<p>Your experience level:</p>n<input type="radio" id="beginner" name="level" value="beginner">n<label for="beginner">Beginner</label>nn<input type="radio" id="intermediate" name="level" value="intermediate">n<label for="intermediate">Intermediate</label>nn<input type="radio" id="advanced" name="level" value="advanced">n<label for="advanced">Advanced</label>

All radio buttons in the same group must share the same name attribute value. That is how the browser knows they are mutually exclusive — selecting one automatically deselects the others.

<p>Technologies you know:</p>n<input type="checkbox" id="html" name="skills" value="html">n<label for="html">HTML</label>nn<input type="checkbox" id="css" name="skills" value="css">n<label for="css">CSS</label>nn<input type="checkbox" id="js" name="skills" value="javascript">n<label for="js">JavaScript</label>

Dropdown Select Menus

The <select> element creates a dropdown menu. Each option uses the <option> tag inside it.

<label for="country">Country:</label>n<select id="country" name="country">n  <option value="">-- Select a country --</option>n  <option value="india">India</option>n  <option value="usa">United States</option>n  <option value="uk">United Kingdom</option>n</select>

The value attribute on each <option> is what gets submitted to the server — not the visible text. Adding selected to an option makes it the default selected value when the page loads.

Textarea for Multi-line Input

For longer text — a message, a bio, a comment — use <textarea> instead of <input>. It is resizable and allows multiple lines of text.

<label for="message">Your Message:</label>n<textarea id="message" name="message" rows="5" cols="40"n  placeholder="Type your message here..."></textarea>

HTML5 Built-in Form Validation

HTML5 added built-in validation attributes you can apply directly to inputs without writing any JavaScript. The required attribute prevents submission if a field is empty. The minlength and maxlength attributes set character limits. The min and max attributes work on number inputs.

<input type="text" name="username" required minlength="3" maxlength="20">n<input type="number" name="age" min="18" max="100">n<input type="email" name="email" required>

The browser handles validation automatically and shows error messages in the user’s language. This is not a replacement for server-side validation — always validate on the server too. But it gives instant feedback to users without any extra code on your side.

With forms understood, you are ready for the structural side of HTML. Head over to HTML Div, Span and Semantic Elements Explained to learn how divs, spans, and semantic elements let you organise your page into logical sections — the foundation of how every real website is actually structured.