In HTML, the label and input elements are often used together in forms to provide user-friendly interfaces for collecting the data.
1. <label> element: This element defines a label for an input element, making the form more accessible. When a user clicks on the label, it automatically focuses the associated input field. This is especially useful for users with disabilities or those navigating via keyboard.
2. <input> element: This element is used to create interactive controls in web forms that allow users to input data. It can represent different types of inputs, such as text fields, checkboxes, or radio buttons, based on the type attribute.
How the label element is linked to input element?
The label element can be linked to an input element by using the for attribute in the label, which references the id of the corresponding input element. Alternatively, the input element can be placed inside the label element, creating an implicit association.
label-and-input-demo.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Label and Input Demo</title> </head> <body> <h2>Registration Form</h2> <form action="/submit-registration" method="POST"> <label for="username">Username:</label><br> <input type="text" id="username" name="username" required><br><br> <label for="email">Email:</label><br> <input type="email" id="email" name="email" required><br><br> <label for="password">Password:</label><br> <input type="password" id="password" name="password" required><br><br> <button type="submit">Register</button> </form> </body> </html>
No comments:
Post a Comment