+
+
+ Back Home +
+

Programmatic Label

+
+
+
+
+ Image showing an input field with label programmatically associated with it using label for attribute +
+ Fig: Input field programmatically labeled using <label> and "for" attribute. +
+
+
+
+

Usage of <label> and "for" attribute in HTML:

+

+ The <label> element in HTML is used to associate descriptive text with form controls, improving usability and accessibility. By using the for attribute, the label is explicitly linked to a specific form element via its id. This connection allows users to interact with the form control by clicking on the label and ensures screen readers convey the label's purpose effectively, enhancing the form's overall accessibility. +

+ + + +
+ 
+              
+<label for="fname">First name:</label>
+<input id="fname" type="text" placeholder="First name">
+              
+
+
+ +
+
+
+ + + +
+
+ Image showing an input field with label programmatically associated with it using aria-label attribute +
+ Fig: Input field programmatically labeled using "aria-label" attribute. +
+
+
+ +
+

Usage of aria-label attribute in HTML:

+

+ The aria-label attribute in HTML is used to provide an accessible name for an input field. It offers a way to describe the purpose of the input directly to assistive technologies like screen readers, ensuring users with disabilities can understand and interact with the field effectively. +

+ + + +
+ 
+                
+<input aria-label="First name" type="text" placeholder="First name">
+                
+
+
+ +
+
+
+ +
+