HTML Form Labels
An HTML Form Label is inline element.
It can be associated with form elements or form control like an input, textarea and select for accessibility purpose.
The <label> element defines an HTML Form Label.
To associate a label to an input we can use the for attribute with the value same as the input's id attribute. OR
Another way to associate a label to an input is to nest the input within the <label> element.
Example:
<!DOCTYPE html><html><head><title></title></head><body><!--First method associate label with textbox--><label for="demo"> I am a label 1 : </label><input type="text" id="demo" /><br /><!--Second method associate label with textbox--><label> I am a label 2 :<input type="text"></body></html>
Output:
✔️As what we have mentioned, form labels are for accessibility purpose try to click the label to focus the text field.
Styling HTML Form Label Example:
<!DOCTYPE html><html><head><title> CS </title><style type="text/css">label{border: 1px inset #0076ff;border-radius: 5px;background: #428bca;color: #fff;padding-left: 4px;padding-right: 4px;margin-right: 3px;}</style></head><body><!--First method associate label with textbox--><label for="demo"> I am a label : </label><input type="text" id="demo" /></body></html>
Output:
Post a Comment