HTML Form Input Types

Discover the essential input types for creating powerful and user-friendly web forms.

📝

Welcome! Let's explore HTML forms, the way your websites can listen and talk to users.

/* Forms let us collect data... */

Input Type: 'text'

The default value. Creates a standard single-line text field. Perfect for usernames, subjects, and other short text entries. Example: <input type="text">

Input Type: 'password'

Creates a text field where the typed characters are masked (shown as asterisks or dots). Essential for login forms to protect user privacy. Example: <input type="password">

Input Type: 'email'

Creates a field specifically for email addresses. On most devices, it brings up a keyboard with the '@' symbol. Browsers may also perform simple validation. Example: <input type="email">

Input Type: 'number'

Creates a field for entering numbers. Most browsers will display spinner controls to increment or decrement the value and may show a numeric keypad on mobile devices. Example: <input type="number">

Practice Zone

Interactive Test 1: Match the Type

Match the input `type` to its purpose.

Arrastra en el orden correspondiente.


Arrastra las opciones:

<input type="password">
<input type="number">
<input type="text">
<input type="email">

Completa el código:

For a username: ______
For a secret PIN: ______
For a contact address: ______
For an age field: ______
Unlock with Premium

Interactive Test 2: Complete the Code

Rellena los huecos en cada casilla.


<input type="">


<input type="">


<input type="">


<input type="">
Unlock with Premium

Practice Example: Build a Form

Create a simple sign-up form with fields for a username (text), password, and email.

* Write the code below. Correct characters will be shown in green and incorrect ones in red.

<form> <label>Username:</label> <input type="text"> <label>Password:</label> <input type="password"> <label>Email:</label> <input type="email"> </form>
Unlock with Premium

Knowledge Check

Which input type provides browser-level validation for an email format?


Unlock with Premium

Putting Inputs to Work

Input fields are useless on their own. They need to be wrapped in a <form> tag and paired with labels and a submit button to be truly functional.

1. The <form> Container

The <form> element is the official container for all your inputs. It has important attributes like action (where to send the data) and method (how to send it, usually "POST").

<form action="/submit-data" method="POST">
  
</form>

2. The <label> for Accessibility

Never forget the <label>! It connects descriptive text to an input field, which is crucial for screen readers and also improves user experience by allowing users to click the label to focus the input.

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

3. The Submit Button

Finally, <input type="submit"> creates a special button. When clicked, it gathers all the data from the inputs inside its parent <form> and sends it to the destination specified in the `action` attribute.

<input type="submit" value="Sign Up">
Practical Takeaway: A complete form element consists of the <form> wrapper, accessible <label>s for each input, and a <input type="submit"> to send the data.

Common Input Types Glossary

type="text"
The default. A single-line text input field.
type="password"
A single-line text field whose value is obscured for privacy.
type="email"
A field for an email address, with basic browser validation.
type="number"
A field for entering a number, often with spinner UI controls.
type="checkbox"
A checkbox allowing single values to be selected/deselected.
type="radio"
A radio button, used to select one choice from a limited set of options.
type="submit"
A button that submits the form data to the server.