HTML Input Types

Forms are the user’s voice on your website — and input fields are how you hear it. HTML offers a wide range of <input> types to collect everything from simple text to dates and files. Choosing the right type enhances both usability and validation.

This is the most basic input field, used to collect short single-line text like names, fruits, or cities.

<label for="fruit">Favorite Fruit:</label>
<input type="text" id="fruit" name="fruit" placeholder="Apple">

This field hides user input behind dots or asterisks — perfect for login forms.

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

Though it hides the characters, remember — it's not encrypted. That happens on the backend.

This input expects a properly formatted email address. Most browsers also trigger email-specific keyboards on mobile.

<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="hello@example.com">

Try submitting the form with an invalid email, and you'll see the browser prevent it.

Use this to accept numeric input only. You can also define minimum and maximum values.

<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="1" max="10">

The up/down arrows help the user adjust the value easily.

The date input brings up a calendar picker — a user-friendly way to select a date.

<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">

Let users upload files from their device. Common for profile pictures or documents.

<label for="upload">Upload Image:</label>
<input type="file" id="upload" name="image">

Remember to set enctype="multipart/form-data" in your form when handling file uploads.

Checkboxes allow users to select multiple options from a group.

<p>Choose your fruits:</p>
<input type="checkbox" id="apple" name="fruit" value="apple">
<label for="apple">Apple</label>
<br>
<input type="checkbox" id="banana" name="fruit" value="banana">
<label for="banana">Banana</label>

Radio buttons let the user choose one — and only one — option from a group.

<p>Pick one:</p>
<input type="radio" id="cherry" name="vote" value="cherry">
<label for="cherry">Cherry</label>
<br>
<input type="radio" id="banana" name="vote" value="banana">
<label for="banana">Banana</label>

All radio inputs must share the same name to work together as a group.

This input doesn’t show on the page, but it's useful for passing preset values during form submission.

<input type="hidden" name="source" value="signup-page">

It’s often used behind the scenes for tracking, context, or analytics.

<input type="submit" value="Submit">
<input type="reset" value="Clear">

submit triggers form submission, and reset clears all fields.

Choose the option that lists all and only the correct statements.

1. email
2. number
3. url
4. text

Choose the option that lists all and only the correct statements.

1. <input type="text" name="student_name">

2. <input type="email" name="parent_email">

3. <input type="password" name="login_pin">

4. <input type="file" name="profile_photo">

• Use the right input type for better UX and native validation
• Add name attributes to ensure fields are submitted properly
• Use placeholder and label together for clarity and accessibility