Be Brav3

FCC Challenge 31: Use HTML5 to Require a Field

March 13, 2016

In Free Code Camp Challenge 31 we can make a field required before submission using HTML5.

You can require specific form fields so that your user will not be able to submit your form until he or she has filled them out.

For example, if you wanted to make a text input field required, you can just add the word required within your input element, you would use:

[html]

[/html]

Make your text input a required field, so that your user can’t submit the form without completing this field.

Then try to submit the form without inputing any text. See how your HTML5 form notifies you that the field is required?

Note: This field does not work in Safari.

The original code is below:

[html]

CatPhotoApp

Click here for cat photos.

A cute orange cat lying on its back.

Things cats love:

  • cat nip
  • laser pointers
  • lasagna

Top 3 things cats hate:

  1. flea treatment
  2. thunder
  3. other cats
[/html]

The updated code with required field is below:

[html highlight=”47″]

CatPhotoApp

Click here for cat photos.

A cute orange cat lying on its back.

Things cats love:

  • cat nip
  • laser pointers
  • lasagna

Top 3 things cats hate:

  1. flea treatment
  2. thunder
  3. other cats
[/html]