Form Input Field Markup and Layout
Explore how to properly link input fields and labels using id attributes or nesting within labels. Understand how to structure and layout form fields as Flexbox items for mobile-responsive websites. This lesson helps you grasp form markup and layout techniques essential for accessible web forms using Flexbox.
We'll cover the following...
We'll cover the following...
Linking labels and input fields through id attributes
When creating a form field, two HTML elements have to be linked:
an
<input>fieldand a
<label>
Most software developers know that linking the two HTML elements can be performed by giving the label a for attribute, and giving an id attribute for the corresponding input field:
<label for="name-field">Name</label><input type="text" id="name-field" name="name" />
Whenever this link is established, clicking the ...