Difference between revisions of "Input Element Type Radio"

From Level Access Web Labs
Jump to navigation Jump to search
Line 1: Line 1:
 
==Input radio with title (required, autofocus)==
 
==Input radio with title (required, autofocus)==
 
<html>
 
<html>
 +
<body>
 
   <input name="n1" autofocus required title="search intranet" type="radio" />
 
   <input name="n1" autofocus required title="search intranet" type="radio" />
 
   <label> Search intranet</label>
 
   <label> Search intranet</label>
Line 7: Line 8:
 
   <input name="n1" required title="search both" type="radio" />
 
   <input name="n1" required title="search both" type="radio" />
 
   <label> Search both</label>
 
   <label> Search both</label>
 +
<body>
 
</html>
 
</html>
  
 
==Input radio with explicit label & fieldset/legend (not implicit with HTML required)==
 
==Input radio with explicit label & fieldset/legend (not implicit with HTML required)==
 
<html lang="en">
 
<html lang="en">
<head>
 
<title>radios</title>
 
</head>
 
 
<body>
 
<body>
 
<fieldset>
 
<fieldset>
Line 29: Line 28:
 
==Input radio with aria-label==
 
==Input radio with aria-label==
 
<html>
 
<html>
 +
<body>
 
   <div style="border:solid thin;">
 
   <div style="border:solid thin;">
 
     <input name="n3" aria-label="search aria label" id="n3" type="radio" />
 
     <input name="n3" aria-label="search aria label" id="n3" type="radio" />
Line 35: Line 35:
 
     <span > Search the Internet </span>
 
     <span > Search the Internet </span>
 
   </div>
 
   </div>
 +
</body>
 
</html>
 
</html>
  
 
==Input radio with aria-labelledby==
 
==Input radio with aria-labelledby==
 
<html>
 
<html>
 +
<body>
 
   <div style="border:solid thin;">
 
   <div style="border:solid thin;">
 
     <input name="n4" aria-labelledby="s1" id="n4" type="radio" />
 
     <input name="n4" aria-labelledby="s1" id="n4" type="radio" />
Line 45: Line 47:
 
     <span id="n4spana" > Search the Internet </span>
 
     <span id="n4spana" > Search the Internet </span>
 
   </div>
 
   </div>
 +
</body>
 
</html>
 
</html>
  
 
==Input radio implicit label==
 
==Input radio implicit label==
 
<html>
 
<html>
 +
<body>
 
   <div style="border:solid thin;">
 
   <div style="border:solid thin;">
 
   <label>
 
   <label>
Line 59: Line 63:
 
   </label>
 
   </label>
 
   </div>
 
   </div>
 +
<M/body>
 
</html>
 
</html>
  
 
==Input radio explicit and implicit label==
 
==Input radio explicit and implicit label==
 
<html>
 
<html>
 +
<body>
 
   <label for="n6">
 
   <label for="n6">
 
     <input name="n6" id="n6" type="radio" />
 
     <input name="n6" id="n6" type="radio" />
Line 75: Line 81:
 
     <span id="n6spana" > Search both</span>
 
     <span id="n6spana" > Search both</span>
 
   </label>
 
   </label>
 +
</body>
 
</html>
 
</html>
  
 
==Input radio with label and aria-describedby==
 
==Input radio with label and aria-describedby==
 
<html>
 
<html>
 +
<body>
 
   <div>
 
   <div>
 
     <input name="n7" aria-describedby="n7span" id="n7" type="radio" />
 
     <input name="n7" aria-describedby="n7span" id="n7" type="radio" />
Line 89: Line 97:
 
     <span id="n7spana" >You can search for anything you want.</span>
 
     <span id="n7spana" >You can search for anything you want.</span>
 
   </div>
 
   </div>
 +
</body>
 
</html>
 
</html>
  
 
==Disabled Input radio with label==
 
==Disabled Input radio with label==
 
<html>
 
<html>
 +
<body>
 
   <input name="n8" disabled id="n8" type="radio" />
 
   <input name="n8" disabled id="n8" type="radio" />
 
   <label for="n8"> Search the Internet </label>
 
   <label for="n8"> Search the Internet </label>
 
   <input name="n8" disabled id="n8a" type="radio" />
 
   <input name="n8" disabled id="n8a" type="radio" />
 
   <label for="n8a"> Search the Internet </label>
 
   <label for="n8a"> Search the Internet </label>
 +
</body>
 
</html>
 
</html>
  
 
==Input radio with label (checked)==
 
==Input radio with label (checked)==
 
<html>
 
<html>
 +
<body>
 
   <div style="border:solid thin;">
 
   <div style="border:solid thin;">
 
     <input name="n10" checked id="n10" type="radio" />
 
     <input name="n10" checked id="n10" type="radio" />
Line 107: Line 119:
 
     <label for="n10a" > Search Internet</label>
 
     <label for="n10a" > Search Internet</label>
 
   </div>
 
   </div>
 +
</body>
 
</html>
 
</html>
  
 +
==Input Radio with Multiple Fieldsets==
 +
<html>
 +
<body>
 +
<form>
 +
<fieldset>
 +
<legend>Choose your pizza.</legend>
 +
<fieldset>
 +
<legend>Normal Pizzas</legend>
 +
<input type="radio" name="piz" id="piz1"><label for="piz1">Cheese</label>
 +
<input type="radio" name="piz" id="piz2"><label for="piz2">Pepperoni</label>
 +
</fieldset>
 +
<fieldset>
 +
<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="piz4"><label for="piz4">Ugly Garlic and Mushroom</label>
 +
</fieldset>
 +
</form>
 +
</body>
 +
</html>
 +
 +
==Input Type Radio with Multiple Groups==
 +
<html>
 +
<body>
 +
<form>
 +
<div role="group" aria-labelledby="piz-header">
 +
<span id="piz-header">Choose your pizza.</span>
 +
<div role="group" aria-labelledby="piz1-header">
 +
<span id="piz1-header">Normal Pizza</span>
 +
<input type="radio" name="pizza" id="pizza1"><label for="pizza1">Cheese</label>
 +
<input type="radio" name="pizza" id="pizza2"><label for="pizza2">Pepperoni</label>
 +
</div>
 +
<div role="group" aria-labelledby="piz2-header">
 +
<span id="piz2-header">Spccial Pizzas</span>
 +
<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>
 +
</div>
 +
</div>
 +
</form>
 +
</body>
 +
</html>
  
  
 
[[Category:Elements]]
 
[[Category:Elements]]
 
[[Category:ARIA]]
 
[[Category:ARIA]]

Revision as of 15:00, 10 February 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 anything you want.

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
Spccial Pizzas