10

While I was doing some basic HTML I was wondering why Sublime Text 3 always completes required into required="" . Like my Instructor in an online course said it is not necessary to set required="true" or required="false" but when I set it to false it still requires it.

example code (it will require the field even if it is set tofalse):

<form>
    <input type="password" name="password" required="false">
    <button>Submit</button>
</form>

I hope you can clear up the confusion. Thanks for every answer.

Farcher

Sébastien
  • 11,860
  • 11
  • 58
  • 78
  • Possible duplicate of [How to not require a required input](https://stackoverflow.com/questions/5615768/how-to-not-require-a-required-input) – GalAbra Feb 06 '18 at 20:14

4 Answers4

27

In HTML, the required attribute must be present (the field is required) or absent (the field is NOT required). When the attribute is present, it does not matter what value it has.

The required attribute is a boolean attribute. When specified, the element is required.

The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.

About boolean attributes:

A boolean attribute without a value assigned to it (e.g. checked) is implicitly equivalent to one that has the empty string assigned to it (i.e. checked=""). As a consequence, it represents the true value.

The values "true" and "false" are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether.

A common practice is to use the name of the attribute as its value:

<form>
    <input type="password" name="password" required="required"><!-- this input is required -->

    <input type="text" name="sometext"><!-- this input is NOT required -->

    <button>Submit</button>
</form>
Community
  • 1
  • 1
Sébastien
  • 11,860
  • 11
  • 58
  • 78
  • 2
    Beautiful answer, this is exactly the data I needed to figure out why my input in Vue JS was always showing `required="required"` in the DOM. It was actually showing that regardless of what I passed. The prop was either omitted or `required="required"`. I think Vue may do some processing under the hood to constrain it to `required="required"`. – agm1984 Dec 04 '18 at 20:57
1

required doesn't take a boolean string. It's required if the attribute exists at all. Sublime is likely expecting some value like most attributes.

<form>
<input type="password" name="password" required="">
<button>Submit</button>
</form>

<form>
<input type="password" name="password" required>
<button>Submit</button>
</form>
halfer
  • 19,824
  • 17
  • 99
  • 186
Daniel A. White
  • 187,200
  • 47
  • 362
  • 445
1

'Required' is a Boolean attribute. It assumes the value of true once it is present. therefore setting it to a 'false' still makes it act as though it was true.

Below is proof

<form>
<input type="password" name="password" required="false">
<button>Submit</button>
</form>
Edmund Dzakson
  • 81
  • 1
  • 12
-1

However, if one is handling mouse events, for instance, using JS, they can set the "required" attribute to "True" or "False" using the ".prop()" method. e.g.

.prop("required", true)

OR

.prop("required", false)
slfan
  • 8,950
  • 115
  • 65
  • 78
Bill C. Muguai
  • 7
  • 1