HTML type Attribute

Introduction

The type attribute is a fundamental HTML feature used to define what kind of content or behavior an element represents. It is most famous on <input>, where it turns a generic field into a text box, password field, email validator, checkbox, date picker, file uploader, and more.

The same attribute name appears on other elements too — such as <button>, <ol>, and <script> — but with different allowed values for each element. Understanding type is essential for building effective, accessible web forms.

What You’ll Learn

Purpose of type

The primary purpose of the type attribute is to tell the browser how to render an element and how to handle user interaction or data. For form controls, it drives the UI (keyboard on mobile, date picker, masked password), built-in validation, and what gets sent when the form is submitted.

Choosing the correct input type improves user experience, reduces errors, and helps assistive technologies describe controls accurately.

📝 Syntax

Add type with a value that matches the element you are marking up:

<input type="email" name="contact" required>
<button type="submit">Send</button>
<ol type="a">...</ol>

Syntax Rules

• Always write the value in quotes: type="email".
• On <input>, default is text if omitted.
• On <button> inside a form, default is submit — set type="button" for non-submit actions.
• Invalid values fall back to the element’s default type.
• JavaScript: inputElement.type = "date" updates the live control.
• Pair input types with name, id, and label for accessibility.

💎 Values

The type attribute accepts different values depending on the element. Here are the most common groups:

On <input> (most common)

• text — Single-line text (default).
• password — Masked secret entry.
• email — Email address with format validation.
• number — Numeric input; use with min, max, step.
• checkbox — On/off toggle; multiple allowed per name.
• radio — One choice from a group sharing the same name.
• submit — Submits the form.
• button — Generic push button (no submit).
• reset — Resets form fields to defaults.
• file — File picker; often paired with accept.
• hidden — Not shown; sends data with the form.
• date, time, color, range — Specialized pickers.

On <button>

• submit (default in forms) — Sends the form.
• button — No default submit; use with JavaScript.
• reset — Clears the form.

On <ol>

• 1 — Decimal numbers (default).
• a, A — Lowercase / uppercase letters.
• i, I — Lowercase / uppercase Roman numerals.

On <script>

• text/javascript (default) — Classic script.
• module — ES module (import / export).

<input type="text" name="username">
<input type="password" name="password">
<input type="email" name="email">
<input type="checkbox" name="agree" value="yes">
<input type="submit" value="Submit">

Applicable Elements

Input types vs button type

Examples Gallery

Build a login-style form, switch input type with JavaScript, and compare checkbox, radio, and button types.

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

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

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

  <input type="submit" value="Submit">
</form>

<input id="dynamicInput" placeholder="Select a date">

<script>
  document.getElementById("dynamicInput").type = "date";
</script>

<input type="checkbox" name="newsletter" value="yes"> Subscribe

<input type="radio" name="plan" value="free" checked> Free
<input type="radio" name="plan" value="pro"> Pro

<button type="button">Preview</button>
<button type="submit">Save</button>

♿ Accessibility

• Always use <label> — Connect labels with for and id so screen readers announce the control purpose.
• Pick semantic types — email, tel, and url expose the right role and mobile keyboards.
• Do not rely on type alone for security — password hides input visually; validate and hash on the server.
• Group radios and checkboxes — Use <fieldset> and <legend> for related options.
• Explicit button types — Set type="button" on non-submit buttons to prevent accidental form submission.

💡 Best Practices

• Understand the purpose of each value and use them to enhance UX and accurate data entry.
• When designing forms, choose appropriate input types for validation and accessibility.
• Remember that type is not limited to forms — it also applies to lists, scripts, and media elements where specifying content kind is relevant.

🎉 Conclusion

The type attribute plays a crucial role in defining the nature of data and behavior within HTML elements, especially in web forms. By choosing the right type for each control, you create more user-friendly, accessible applications with fewer input errors.

Start with explicit input types on every field, use button types deliberately, and explore dynamic changes with JavaScript when your interface needs to adapt.