Scenario 1: Form element have an Explicit label association |
Explicit label association for form fields
|
<![CDATA[<h1 style="font-size:22px"> Explicit label association for form fields</h1>
<form>
<h2 style="font-size:18px"> 01. Label association for text field</h2>
<label for="fname">First Name:</label> <input type="text" name="fname" id="fname"><br>
<label for="lname">Last Name:</label> <input type="text" name="lname" id="lname">
<h2 style="font-size:18px">02. Llabel association for checkbox</h2>
<input type="checkbox" id="markuplang" name="computerskills" checked="checked">
<label for="markuplang">HTML</label>
<h2 style="font-size:18px">03. Llabel association for group of radio buttons</h2>
<fieldset>
<legend> Select Gender</legend>
<input type="radio" name="gender" id="male" value="Male" /><label for="male">Male</label>
<input type="radio" name="gender" id="female" value="female"/><label for="female">Female</label><br/>
</fieldset>
<h2 style="font-size:18px">04. Label association for input file</h2>
<label for="fc1">Attach the documents</label><input type="file" id="fc1" value="browse the document" />
<h2 style="font-size:18px">05. Label association for text area</h2>
<label for="address">Provide the address</label><br/>
<textarea rows="4" cols="15" id="address"></textarea>
<h2 style="font-size:18px">06. Label association for select</h2>
<label for="type">Account type</label><br/>
<select id="type">
<option>Admin</option>
<option>User</option>
</select>
</form>]]> |
Scenario 2: Form element have an implicit label association |
implicit label association for form fields
|
<![CDATA[<h1 style="font-size:22px"> implicit label association for form fields</h1>
<form>
<h2 style="font-size:18px"> 01. Label association for text field</h2>
<label>First Name: <input type="text" name="fname"></label><br>
<label>Last Name: <input type="text" name="lname"></label>
<h2 style="font-size:18px">02. Label association for checkbox</h2>
<label><input type="checkbox" name="computerskills2" checked="checked">
HTML</label>
<h2 style="font-size:18px">03. Llabel association for group of radio buttons</h2>
<fieldset>
<legend> Select Gender</legend>
<label><input type="radio" name="gender" value="Male" />Male</label>
<label><input type="radio" name="gender" value="female"/>Female</label><br/>
</fieldset>
<h2 style="font-size:18px">04. Label association for input file</h2>
<label >Attach the documents<input type="file" value="browse the document" /></label>
<h2 style="font-size:18px">05. Label association for text area</h2>
<label>Provide the address</br>
<textarea rows="4" cols="15"></textarea>
</label>
<h2 style="font-size:18px">06. Label association for select</h2>
<label>Account type<br/>
<select>
<option>Admin</option>
<option>User</option>
</select>
</label>
</form>]]> |