In Traffic Portal, any time a field is required its label will have a * appended to it. It looks somewhat like this:
<div>
<label>foo *</label>
<div>
<input name="foo" required/>
<small ng-show="hasError(thisForm.foo, 'required')" style="color: red;">Required</small>
</div>
</div>
IMO, that * could just be removed entirely, because the required attribute and the special error message both already accomplish the same thing.
However, it seems that people are in general fond of the *, so if we're not going to remove it, it should be made a part of the presentation and not the content. See, that <label> as-is says that the <input> is for something called foo *. That's not the case; it's for something called foo that happens to be required. Instead, styling should be used to provide decorations like that.
<style type="text/css">
label > input:required::before, label > select:required::before, label > textarea:required::before {
content: " *";
color: inherit;
}
</style>
...
<div>
<label>foo <input name="foo" required/></label>
<small ng-show="hasError(thisForm.foo, 'required')" style="color: red;">Required</small>
</div>
(Note that this has the added bonus of fixing the vast majority of our <label>s not actually containing the thing they label or having a for attribute that would otherwise indicate what they label)
Now the <label> says that the <input> is for a thing called foo, but the * still appears.
In Traffic Portal, any time a field is required its label will have a
*appended to it. It looks somewhat like this:IMO, that
*could just be removed entirely, because therequiredattribute and the special error message both already accomplish the same thing.However, it seems that people are in general fond of the
*, so if we're not going to remove it, it should be made a part of the presentation and not the content. See, that<label>as-is says that the<input>is for something calledfoo *. That's not the case; it's for something calledfoothat happens to be required. Instead, styling should be used to provide decorations like that.(Note that this has the added bonus of fixing the vast majority of our
<label>s not actually containing the thing they label or having aforattribute that would otherwise indicate what they label)Now the
<label>says that the<input>is for a thing calledfoo, but the*still appears.