Required Form Fields HTML

Indicating clearly required or optional fields on a form tells the user what needs to be filled in to complete the form. If most of the form fields are optional, use text or asterisk (*) next to each field to indicate required fields. If you choose asterisk, provide a legend which tells the meaning of it.

If most questions on a form require an answer, indicating all required fields would add unnecessary info to the form. In this case indicate the ones that are optional using an “Optional” text next to the optional field labels.

Another alternative would be to not indicate required fields but handle missing required input with error messages.

What problem does the pattern solve?

When to use it?

You’re designing a form that contains both required and optional form fields.

How to use it?

  • First of all, keep the form simple. Avoid optional input fields in forms, don’t ask users to provide useless information.
  • Show the required/optional indicators next to labels instead of input fields to make it easier to scan the form through and see what information needs to be given.
If most of the form fields are optional:
  • Use text or asterisk (*) next to each field to indicate required fields.
  • If you choose asterisk, provide a legend which tells the meaning of it.
  • Consider bolding the required field label.
If most of the form fields are required:
  • Use text “(Optional)” after optional field labels to indicate optional fields.

Why to use it?

People need to know what needs to be filled in to complete the form, otherwise they will get an error if some of the required form fields are left blank.

JQuery 1.11.3 in use.

Useful links

Example images (5 examples)

Comments

  • Smart Company Software (www) ⋅ Nov. 11, 2011 09:27

    I've never been a big fan of using a * to indicate that the field is mandatory. There are some good alternatives here.

  • Malli ⋅ Aug. 23, 2012 13:48

    Most designers are aware of the risks of using color alone in indicating something important. The obvious risk is that it confuses people with strong color-blindness. The method - where you put a note at the top of the page that says 'Mandatory fields are marked with *' and then adding *s to labels - is old and clunky. It creates two layers of information that the user needs to go through. Also, the word 'mandatory' is too legalistic and intimidating.

    If you follow the logic that users will scan only what they need (and not some outlying notes and prompts), then by far the best way is to user the word 'required' with field-set labels or field labels.

    It is clear, to the point, and does not rely on. color

  • Mobarak ⋅ Nov. 17, 2014 09:09

    Nice ,,

    But you did't use it in the comments form in your website .

    :)

  • Sumeet ⋅ Aug. 27, 2015 19:13

    cpic

  • Smithg976 (www) ⋅ Aug. 28, 2015 13:40

    Very neat article post.Much thanks again. Much obliged. dceeggcefdbkfeaa

  • Smithc179 (www) ⋅ Oct. 13, 2015 10:34

    you are in reality a good webmaster. The site loading pace is incredible. It kind of feels that you're doing any unique trick. Moreover, The contents are masterpiece. you have done a great process on this matter! gbdeakbcgekdkfdb

  • ryan ⋅ Jan. 7, 2016 22:02

    Very nice

  • Smithe438 (www) ⋅ Jan. 30, 2016 13:38

    hi!,I love your writing so much! share we communicate more approximately your post on AOL? I need an expert in this space to resolve my problem. Maybe that's you! Looking forward to peer you. kdedbfgffdacdade

  • Tinky (www) ⋅ April 20, 2016 21:16

    We offer you several tools that will help you better [url="http://www.reverso.net"]services[/url] and complete the corrections made to your texts.
    <a href="http://spinbot.com">shipping</a>
    <a href=http://spinbot.com>shipping</a>
    [url="http://www.reverso.net"]services[/url]
    [url=http://www.reverso.net]services[/url]

  • Smithd804 (www) ⋅ May 8, 2016 17:26

    I like this weblog so considerably, saved to my bookmarks. edaekefkbbeegfbe

  • someone to do my research paper (www) ⋅ June 21, 2016 07:39

    You are in authenticity a great webmaster. The website loading step is unbelievable. It kind of feels that you're doing any exclusive trick. Furthermore, the contents are masterwork. You have done a inordinate procedure on this stuff!