Required Form Fields </>

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

  • 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

  • Vivagoal Situs Berita Bola Terkini (www) ⋅ Feb. 3, 2017 18:21

    I am really impressed with your writing skills as
    well as with the layout on your weblog. Is this a paid theme or did you modify
    it yourself? Either way keep up the nice quality writing, it
    is rare to see a great blog like this one these days.

  • Vivagoal Situs Berita Bola Terkini (www) ⋅ Feb. 3, 2017 22:44

    Someone necessarily lend a hand to make severely posts I would state.
    This is the very first time I frequented your web page and so far?
    I amazed with the research you made to make this actual publish
    extraordinary. Magnificent job!

  • happy wheels (www) ⋅ Feb. 4, 2017 04:11

    Much informative article, and I really appreciate this info and willing for moreinteresting article like this.

  • facetime download (www) ⋅ Feb. 4, 2017 08:19

    well as with the layout on your weblog. Is this a paid theme or did you modify
    it yourself? Either way keep up the nice quality writing, <a href="https://facetime-android.net/">facetime download</a>

  • Fast 8 Letty Michelle Rodriguez Jacket (www) ⋅ Feb. 5, 2017 19:32

    A genuine calfskin plane coat for genuine circumstances. One of the considerable attractions of calfskin coats is their sturdiness and common sense. This article of clothing embodies that with an abundance of pockets and elements overlaid on top quality sheep nappa stow away. For warmth and shape maintenance the coat highlights rib sew neckline sleeves and trim.

  • steam card generator (www) ⋅ Feb. 5, 2017 22:55

    Get free gift cards and online free keys generated online card add money to your wallet.

  • NISSAN X-TRAIL (www) ⋅ Feb. 7, 2017 02:33

    NISSAN X-TRAIL, MOBIL SUV PALING TANGGUH DAN NYAMAN well this is good information, we love to visit here and we hope that you always give usefull information.

  • Obat Tradisional Penyakit Lupus (www) ⋅ Feb. 11, 2017 05:06

    http://ganodermaasli.com/obat-herbal/cara-menghilangkan-kudis-secara-alami-dan-cepat/
    http://ganodermaasli.com/obat-green-world/manfaat-cordyceps-plus-capsule/
    http://ganodermaasli.com/obat-green-world/cara-menyembuhkan-asma-secara-cepat/
    http://ganodermaasli.com/obat-green-world/manfaat-kidney-care-capsule-for-women/
    http://manfaateyecare.blogspot.co.id/

  • Apakah Sirosis Hati Bisa Menular Atau Tidak (www) ⋅ Feb. 13, 2017 04:14

    This blog is very beneficial for everyone thanks admin has presented this blog
    http://obattradisionalkencingmanis.com/pengobatan-alternatif-kelenjar-tiroid-secara-tradisional/
    http://www.ahlinyaobathernia.apotek45.com/pengobatan-alternatif-asma-kronis-secara-tradisional/
    http://www.caramengobatistrokeberat.stockistherbal.com/bahaya-pembuluh-darah-pecah-di-otak/
    http://www.ahlinyaobathernia.apotek45.com/apakah-sirosis-hati-bisa-menular-atau-tidak/
    http://www.obatherballeukimia.layanankesehatan.com/pengobatan-alami-tbc-paru-yang-aman/