DEV Community

Cover image for 30 HTML Form Attributes You’re Not Using (But Should)
Muhammad Usman
Muhammad Usman

Posted on • Originally published at javascript.plainenglish.io

30 HTML Form Attributes You’re Not Using (But Should)

#css #html #webdev #frontend

HTML forms have been around forever, but honestly, most developers are still writing the same basic forms they learned years ago. Meanwhile, HTML has been quietly adding powerful attributes that can save you from writing tons of JavaScript. I’m talking about validation, user experience improvements, and accessibility features that are just sitting there, ready to use.

Your support matters. You can read and support the original version of this story on Medium. 30 HTML Form Attributes You’re Not Using (But Should)

Let me walk you through 30 form attributes that you’re probably not using but absolutely should. These aren’t obscure features. They’re well-supported, practical, and they’ll make your forms better today.

Note: Browser support listed shows minimum versions. Most attributes work in all modern browsers.

Before you go any further, here is the complete code example for you:

1. autocomplete

This tells the browser what kind of data goes in a field so it can autofill intelligently.

<input type="email" name="email" autocomplete="email">
<input type="tel" name="phone" autocomplete="tel">
<input type="text" name="cc-number" autocomplete="cc-number">
Enter fullscreen mode Exit fullscreen mode

Users love autofill. Don’t make them type their email for the hundredth time. Use proper autocomplete values like email, tel, street-address, cc-number, bday, and dozens more.

Browser Support: Universal support in all modern browsers. Chrome 17+, Firefox 4+, Safari 5.1+, Edge 12+

2. autofocus

Automatically focuses an input when the page loads. Perfect for search boxes or login forms.

<input type="text" name="search" autofocus>
Enter fullscreen mode Exit fullscreen mode

Use this sparingly. Only autofocus one field, and make sure it’s what users actually want to interact with first.

Browser Support: Chrome 5+, Firefox 4+, Safari 5+, Edge 12+, IE 10+

3. inputmode

Tells mobile devices which keyboard to show. This is huge for mobile UX.

<input type="text" inputmode="numeric">
<input type="text" inputmode="decimal">
<input type="text" inputmode="email">
<input type="text" inputmode="url">
Enter fullscreen mode Exit fullscreen mode

Even if you’re using type="text" for validation reasons, inputmode gives mobile users the right keyboard. Use numeric for PIN codes, decimal for prices, email for emails.

Browser Support: Chrome 66+, Firefox 95+, Safari 12.1+, Edge 79+, iOS Safari 12.2+

4. pattern

Custom validation with regex. This is incredibly powerful.

<input type="text" pattern="[0-9]{4}" placeholder="PIN (4 digits)">
<input type="text" pattern="[A-Za-z]{3,}" placeholder="At least 3 letters">
Enter fullscreen mode Exit fullscreen mode

The browser validates against your pattern and shows an error message if it doesn’t match. Works with title attribute to show helpful error messages.

Browser Support: Chrome 10+, Firefox 4+, Safari 10.1+, Edge 12+, IE 10+

5. title (with pattern)

When used with pattern, title becomes the error message.

<input type="text" 
       pattern="[0-9]{4}" 
       title="Please enter exactly 4 digits">
Enter fullscreen mode Exit fullscreen mode

Don’t skip this. The default error messages are terrible. Give users helpful feedback.

Browser Support: Universal support in all browsers

6. minlength and maxlength

Set minimum and maximum character limits. Not just for validation, but browsers show a character counter in some cases.

<input type="text" minlength="3" maxlength="20">
<textarea minlength="10" maxlength="500"></textarea>
Enter fullscreen mode Exit fullscreen mode

Users get instant feedback if they try to submit too short or too long content.

Browser Support:

  • maxlength: Universal support (Chrome 4+, Firefox 4+, Safari 5+, IE 10+)
  • minlength: Chrome 40+, Firefox 51+, Safari 10.1+, Edge 17+ (No IE support)

7. min and max

For number and date inputs, set boundaries.

<input type="number" min="1" max="100">
<input type="date" min="2025-01-01" max="2025-12-31">
<input type="time" min="09:00" max="17:00">
Enter fullscreen mode Exit fullscreen mode

The browser won’t let users pick invalid values. No JavaScript needed.

Browser Support: Chrome 10+, Firefox 16+, Safari 5+, Edge 12+, IE 10+

8. step

Controls the increment for number inputs and date/time pickers.

<input type="number" step="0.01" placeholder="Price">
<input type="time" step="900"> <!-- 15-minute intervals -->
<input type="range" min="0" max="100" step="5">
Enter fullscreen mode Exit fullscreen mode

Use step="0.01" for money, step="any" for decimals with no restrictions.

Browser Support: Chrome 6+, Firefox 16+, Safari 5+, Edge 12+, IE 10+

9. multiple

Allows multiple file uploads or multiple email addresses.

<input type="file" multiple>
<input type="email" multiple placeholder="Separate emails with commas">
Enter fullscreen mode Exit fullscreen mode

For file inputs, users can select multiple files at once. For email inputs, browsers validate each email in the comma-separated list.

Browser Support: Chrome 6+, Firefox 3.6+, Safari 4+, Edge 12+, IE 10+

10. accept

Restricts file input to specific file types.

<input type="file" accept="image/*">
<input type="file" accept=".pdf,.doc,.docx">
<input type="file" accept="image/png,image/jpeg">
Enter fullscreen mode Exit fullscreen mode

Use image/* for any image, video/* for videos, or specific MIME types and extensions. The file picker will filter accordingly.

Browser Support: Chrome 16+, Firefox 9+, Safari 6+, Edge 12+, IE 10+

11. formnovalidate

Skips validation for a specific submit button. Super useful for “Save Draft” buttons.

<button type="submit">Submit</button>
<button type="submit" formnovalidate>Save Draft</button>
Enter fullscreen mode Exit fullscreen mode

The form validates on normal submit but bypasses validation when saving drafts.

Browser Support: Chrome 10+, Firefox 4+, Safari 10.1+, Edge 12+, IE 10+

12. formaction

Changes where the form submits when using a specific button.

<form action="/save">
  <button type="submit">Save</button>
  <button type="submit" formaction="/preview">Preview</button>
</form>
Enter fullscreen mode Exit fullscreen mode

Different buttons can submit to different endpoints without JavaScript.

Browser Support: Chrome 10+, Firefox 4+, Safari 5.1+, Edge 12+, IE 10+

13. formmethod

Overrides the form’s method for a specific button.

<form method="get" action="/search">
  <button type="submit">Search</button>
  <button type="submit" formmethod="post">Save Search</button>
</form>
Enter fullscreen mode Exit fullscreen mode

Allows different buttons to use different HTTP methods (GET or POST).

Browser Support: Chrome 10+, Firefox 4+, Safari 5.1+, Edge 12+, IE 10+

14. formenctype

Overrides the form’s encoding type for a specific submit button.

<form>
  <input type="text" name="title">
  <button type="submit">Save Text</button>
  <button type="submit" formenctype="multipart/form-data">Upload File</button>
</form>
Enter fullscreen mode Exit fullscreen mode

Use this when one button needs to handle file uploads but others don’t.

Browser Support: Chrome 10+, Firefox 4+, Safari 5.1+, Edge 12+, IE 10+

15. formtarget

Specifies where to display the response for a specific submit button.

<form action="/submit">
  <button type="submit">Submit</button>
  <button type="submit" formtarget="_blank">Submit in New Tab</button>
</form>
Enter fullscreen mode Exit fullscreen mode

Values include _self, _blank, _parent, _top, or a named frame. Useful for preview buttons or when you want to keep the current page open.

Browser Support: Chrome 10+, Firefox 4+, Safari 5.1+, Edge 12+, IE 10+

16. readonly

Makes an input unchangeable but still submits its value. Different from disabled.

<input type="text" value="Order #12345" readonly>
Enter fullscreen mode Exit fullscreen mode

Use readonly when you want the value submitted but don't want users changing it. Use disabled when you don't want the value submitted at all.

Browser Support: Universal support in all browsers

17. placeholder

Shows hint text inside the input. You’re probably using this already, but use it right.

<input type="email" placeholder="you@example.com">
Enter fullscreen mode Exit fullscreen mode

Don’t use placeholder as a label replacement. Placeholders disappear when users start typing. Always use proper <label> elements.

Browser Support: Chrome 10+, Firefox 4+, Safari 5+, Edge 12+, IE 10+

18. list and <datalist>

Creates a dropdown of suggestions that users can select from or ignore.

<input type="text" list="browsers">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
</datalist>
Enter fullscreen mode Exit fullscreen mode

It’s like autocomplete but you control the suggestions. Users can type freely or pick from your list.

Browser Support: Chrome 20+, Firefox 4+, Safari 12.1+, Edge 12+ (No IE support)

19. spellcheck

Controls whether the browser should spellcheck the field.

<textarea spellcheck="true"></textarea>
<input type="text" name="code" spellcheck="false">
Enter fullscreen mode Exit fullscreen mode

Turn it off for code inputs, usernames, or technical fields. Keep it on for text areas and content fields.

Browser Support: Chrome 10+, Firefox 2+, Safari 3.1+, Edge 12+, IE 10+

20. enterkeyhint

Changes the Enter key label on mobile keyboards.

<input type="search" enterkeyhint="search">
<input type="text" enterkeyhint="next">
<textarea enterkeyhint="send"></textarea>
Enter fullscreen mode Exit fullscreen mode

Values include enter, done, go, next, previous, search, send. This is purely for mobile UX but makes a big difference.

Browser Support: Chrome 77+, Firefox 94+, Safari 13.1+, Edge 79+, iOS Safari 13.4+

21. dirname

Automatically submits the text direction of the input. Crucial for international forms.

<input type="text" name="comment" dirname="comment.dir">
Enter fullscreen mode Exit fullscreen mode

When the form submits, it includes both comment (the value) and comment.dir (either ltr or rtl). Essential for proper handling of right-to-left languages like Arabic or Hebrew.

Browser Support: Chrome 17+, Safari 6+, Edge 79+ (No Firefox or IE support)

22. form

Associates an input with a form even if it’s outside the <form> element.

<form id="myForm" action="/submit">
  <input type="text" name="username">
</form>
Enter fullscreen mode Exit fullscreen mode 
<input type="email" name="email" form="myForm">
<button type="submit" form="myForm">Submit</button>
Enter fullscreen mode Exit fullscreen mode

Useful when your form is in one part of the page but you need inputs or buttons elsewhere. The form attribute links them together.

Browser Support: Chrome 10+, Firefox 4+, Safari 5.1+, Edge 12+, IE 11+

23. capture

For mobile file inputs, opens the camera directly instead of the file picker.

<input type="file" accept="image/*" capture="environment">
<input type="file" accept="video/*" capture="user">
Enter fullscreen mode Exit fullscreen mode

Use capture="user" for front camera, capture="environment" for back camera. Perfect for apps where users need to take photos or videos directly.

Browser Support: Chrome 53+ (Android), Safari 11+ (iOS), Samsung Internet 6.2+. Desktop browsers ignore this attribute.

24. novalidate

Disables HTML5 validation for the entire form.

<form novalidate>
  <input type="email" required>
  <button type="submit">Submit</button>
</form>
Enter fullscreen mode Exit fullscreen mode

Use this when you’re handling validation entirely with JavaScript or want to implement custom validation logic.

Browser Support: Chrome 10+, Firefox 4+, Safari 10.1+, Edge 12+, IE 10+

25. autocapitalize

Controls automatic capitalization on mobile keyboards.

<input type="text" autocapitalize="words">
<input type="text" autocapitalize="sentences">
<input type="email" autocapitalize="none">
Enter fullscreen mode Exit fullscreen mode

Values: none, sentences, words, characters. Use none for emails and usernames, words for names, sentences for regular text.

Browser Support: Safari 5+ (iOS), Chrome 43+, Edge 79+. Firefox doesn’t support this attribute.

26. size

Sets the visible width of the input in characters.

<input type="text" size="30">
<input type="text" size="5" placeholder="Code">
Enter fullscreen mode Exit fullscreen mode

This doesn’t limit the input, just controls how wide it displays. Use maxlength if you want to limit actual input length.

Browser Support: Universal support in all browsers

27. cols and rows

Controls the visible dimensions of a textarea.

<textarea cols="50" rows="10"></textarea>
Enter fullscreen mode Exit fullscreen mode

cols sets the width in characters, rows sets the height in lines. Users can still resize if you don't set CSS to prevent it.

Browser Support: Universal support in all browsers

28. wrap

Controls how text wrapping works in textarea when submitting.

<textarea wrap="soft"></textarea>
<textarea wrap="hard" cols="40"></textarea>
Enter fullscreen mode Exit fullscreen mode

soft doesn't add line breaks to submitted text, hard adds line breaks at the specified cols width. Most of the time you want soft.

Browser Support: Universal support in all browsers

29. disabled

Disables an input completely. It won’t be editable or submitted.

<input type="text" disabled>
<button type="submit" disabled>Submit</button>
Enter fullscreen mode Exit fullscreen mode

Different from readonly. Disabled inputs don't submit their values and typically appear grayed out. Use when fields are temporarily unavailable.

Browser Support: Universal support in all browsers

30. required

Makes a field mandatory before the form can submit.

<input type="text" required>
<input type="email" required>
<select required>
  <option value="">Choose one...</option>
  <option value="1">Option 1</option>
</select>
Enter fullscreen mode Exit fullscreen mode

The browser shows an error if users try to submit without filling required fields. Works with all input types.

Browser Support: Chrome 10+, Firefox 4+, Safari 10.1+, Edge 12+, IE 10+

Why These Matter

Here’s the thing. These attributes aren’t fancy or new. They’re built into HTML, supported by browsers, and they solve real problems. Most developers reach for JavaScript when HTML already has the answer.

Use these attributes and you get:

  • Better user experience with less code
  • Native browser validation that works everywhere
  • Accessibility features built right in
  • Mobile-optimized keyboards and interactions
  • Less JavaScript to maintain

Browser Support Summary

Excellent Support (Works everywhere):

  • autocomplete, autofocus, title, readonly, placeholder, size, cols, rows, wrap, disabled, spellcheck
  • HTML5 validation: required, pattern, min, max, step, multiple, accept
  • Form button overrides: formaction, formmethod, formenctype, formtarget, formnovalidate, novalidate

Modern Browsers Only:

  • inputmode: Chrome 66+, Firefox 95+, Safari 12.1+
  • enterkeyhint: Chrome 77+, Firefox 94+, Safari 13.1+
  • minlength: Chrome 40+, Firefox 51+, Safari 10.1+ (No IE)
  • datalist: Chrome 20+, Firefox 4+, Safari 12.1+ (No IE)

Limited/Mobile-Specific:

  • capture: Mobile browsers only (Chrome Android 53+, iOS Safari 11+)
  • autocapitalize: Safari/iOS, Chrome 43+ (No Firefox)
  • dirname: Chrome 17+, Safari 6+ (No Firefox or IE)

Start Using Them Today

You don’t need to use all 30 at once. Pick a few that solve problems you’re dealing with right now. Add inputmode to your mobile forms. Use pattern instead of writing custom validation. Try formnovalidate for your draft buttons. Add capture for camera uploads.

These aren’t unknown features waiting for browser support. Start using them.

Just a Quick Reference:

<!-- Validation -->
<input required minlength="3" maxlength="20" pattern="[A-Za-z]+">
<form novalidate>
Enter fullscreen mode Exit fullscreen mode 
<!-- Mobile UX -->
<input inputmode="numeric" enterkeyhint="next" autocomplete="tel" autocapitalize="words">
<input type="file" accept="image/*" capture="environment">
Enter fullscreen mode Exit fullscreen mode 
<!-- File uploads -->
<input type="file" accept="image/*" multiple>
Enter fullscreen mode Exit fullscreen mode 
<!-- Advanced buttons -->
<button formnovalidate>Save Draft</button>
<button formaction="/preview" formtarget="_blank">Preview</button>
<button formmethod="delete">Delete</button>
<button formenctype="multipart/form-data">Upload</button>
Enter fullscreen mode Exit fullscreen mode 
<!-- Suggestions -->
<input list="suggestions">
<datalist id="suggestions">
  <option value="Option 1">
  <option value="Option 2">
</datalist>
Enter fullscreen mode Exit fullscreen mode 
<!-- Textarea -->
<textarea cols="50" rows="10" wrap="soft" spellcheck="true"></textarea>
Enter fullscreen mode Exit fullscreen mode 
<!-- Input states -->
<input readonly>
<input disabled>
Enter fullscreen mode Exit fullscreen mode 
<!-- Text direction -->
<input dirname="comment.dir">
Enter fullscreen mode Exit fullscreen mode

— — — — — — — — — — — — — — — — — — — — — — —

Did you learn something good today?
Then show some love.
© [*Muhammad Usman](https://www.linkedin.com/in/muhammad-usman-strategist/)
*WordPress Developer | Website Strategist | SEO Specialist**
Don’t forget to subscribe to [Developer’s Journey*](https://developersjourney.substack.com/) to show your support.*

Developer's Journey

Top comments (0)