Difference between revisions of "Input Element Type Radio"

From Level Access Web Labs
Jump to navigation Jump to search
(Input radio with label and aria-describedby: Change so that the labels and descriptions are different)
 
(2 intermediate revisions by one other user not shown)
Line 94: Line 94:
 
   <div>
 
   <div>
 
     <input name="n7" aria-describedby="n7spana" id="n7a" type="radio" />
 
     <input name="n7" aria-describedby="n7spana" id="n7a" type="radio" />
     <label for="n7a" > Search the Internet</label>
+
     <label for="n7a" > Search this website</label>
     <span id="n7spana" >You can search for anything you want.</span>
+
     <span id="n7spana" >You can search for things on this website.</span>
 
   </div>
 
   </div>
 
</body>
 
</body>
Line 136: Line 136:
 
<legend>Special Pizzas</legend>
 
<legend>Special Pizzas</legend>
 
<input type="radio" name="piz" id="piz3"><label for="piz3">Honey mustard and Pineapple</label>
 
<input type="radio" name="piz" id="piz3"><label for="piz3">Honey mustard and Pineapple</label>
<input type="radio" name="piz" id="piz4"><label for="piz4">Ugly Garlic and Mushroom</label>
+
<input type="radio" name="piz" id="piz4"><label for="piz4">Ghost Pepper and Mushroom</label>
 +
</fieldset>
 
</fieldset>
 
</fieldset>
 
</form>
 
</form>
Line 154: Line 155:
 
</div>
 
</div>
 
<div role="group" aria-labelledby="piz2-header">
 
<div role="group" aria-labelledby="piz2-header">
<span id="piz2-header">Spccial Pizzas</span>
+
<span id="piz2-header">Special Pizzas</span>
 
<input type="radio" name="pizza" id="pizza3"><label for="pizza3">Honey mustard and Pineapple</label>
 
<input type="radio" name="pizza" id="pizza3"><label for="pizza3">Honey mustard and Pineapple</label>
<input type="radio" name="pizza" id="pizza4"><label for="pizza4">Ugly Garlic and Mushroom</label>
+
<input type="radio" name="pizza" id="pizza4"><label for="pizza4">Ghost Pepper and Mushroom</label>
 
</div>
 
</div>
 
</div>
 
</div>

Latest revision as of 20:49, 9 November 2021

Input radio with title (required, autofocus)

Input radio with explicit label & fieldset/legend (not implicit with HTML required)

What type of search would you like to perform?

Input radio with aria-label

Search the intranet Search the Internet

Input radio with aria-labelledby

Search the Internet Search the Internet

Input radio implicit label

Input radio explicit and implicit label

Input radio with label and aria-describedby

You can search for anything you want.
You can search for things on this website.

Disabled Input radio with label

Input radio with label (checked)

Input Radio with Multiple Fieldsets

Choose your pizza.
Normal Pizzas
Special Pizzas

Input Type Radio with Multiple Groups

Choose your pizza.
Normal Pizza
Special Pizzas