Difference between revisions of "Input Element Type Radio"

From Level Access Web Labs
Jump to navigation Jump to search
(Created page with "==Input radio with title (required, autofocus)== <html> <input autofocus required title="search" type="radio" /> <label> Search Internet</label> </html> ==Input radio wit...")
 
Line 1: Line 1:
 
==Input radio with title (required, autofocus)==
 
==Input radio with title (required, autofocus)==
 
<html>
 
<html>
   <input autofocus required title="search" type="radio" />
+
   <input name="n1" autofocus required title="search intranet" type="radio" />
 +
  <label> Search intranet</label>
 +
  <input name="n1" required title="search Internet" type="radio" />
 
   <label> Search Internet</label>
 
   <label> Search Internet</label>
 
</html>
 
</html>
Line 7: Line 9:
 
==Input radio with label (required)==
 
==Input radio with label (required)==
 
<html>
 
<html>
   <input required id="i1" type="radio" />
+
   <input name="n2" required id="i1" type="radio" />
   <label style="border:solid thin;" for="i1"> Search Internet </label>
+
   <label style="border:solid thin;" for="i1"> Search intranet </label>
 +
  <input name="n2" required id="i1a" type="radio" />
 +
  <label style="border:solid thin;" for="i1a"> Search Internet </label>
 
</html>
 
</html>
  
 
==Input radio with aria-label==
 
==Input radio with aria-label==
 
<html>
 
<html>
   <input aria-label="search aria label" id="i1" type="radio" />
+
   <input name="n3" aria-label="search aria label" id="n3" type="radio" />
 +
  <span style="border:solid thin;"> Search the intranet </span>
 +
  <input name="n3" aria-label="search aria label" id="n3a" type="radio" />
 
   <span style="border:solid thin;"> Search the Internet </span>
 
   <span style="border:solid thin;"> Search the Internet </span>
 
</html>
 
</html>
Line 19: Line 25:
 
==Input radio with aria-labelledby==
 
==Input radio with aria-labelledby==
 
<html>
 
<html>
   <input aria-labelledby="s1" id="i1" type="radio" />
+
   <input name="n4" aria-labelledby="s1" id="n4" type="radio" />
   <span id="s1" style="border:solid thin;"> Search the Internet </span>
+
   <span id="n4span" style="border:solid thin;"> Search the Internet </span>
 +
  <input name="n4" aria-labelledby="n4spana" id="n4a" type="radio" />
 +
  <span id="n4spana" style="border:solid thin;"> Search the Internet </span>
 
</html>
 
</html>
  
Line 26: Line 34:
 
<html>
 
<html>
 
   <label>
 
   <label>
     <input id="i1" type="radio" />
+
     <input name="n5" id="n5" type="radio" />
     <span id="s1" style="border:solid thin;"> Search the Internet </span>
+
    <span id="n5span" style="border:solid thin;"> Search the Internet </span>
 +
  </label>
 +
  <label>
 +
    <input name="n5" id="n5a" type="radio" />
 +
     <span id="n5spana" style="border:solid thin;"> Search the Internet </span>
 
   </label>
 
   </label>
 
</html>
 
</html>
Line 33: Line 45:
 
==Input radio explicit and implicit label==
 
==Input radio explicit and implicit label==
 
<html>
 
<html>
   <label for="ie1">
+
   <label for="n6">
     <input id="ie1" type="radio" />
+
     <input name="n6" id="n6" type="radio" />
     <span id="s1" style="border:solid thin;"> Search the Internet</span>
+
    <span id="n6span" style="border:solid thin;"> Search the Internet</span>
 +
  </label>
 +
  <label for="n6a">
 +
    <input name="n6" id="n6a" type="radio" />
 +
     <span id="n6spana" style="border:solid thin;"> Search the Internet</span>
 
   </label>
 
   </label>
 
</html>
 
</html>
Line 41: Line 57:
 
==Input radio with label and aria-describedby==
 
==Input radio with label and aria-describedby==
 
<html>
 
<html>
   <input aria-describedby="s2" id="il1" type="radio" />
+
   <input name="n7" aria-describedby="n7span" id="n7" type="radio" />
   <label for="il1" style="border:solid thin;"> Search the Internet</label>
+
  <label for="n7" style="border:solid thin;"> Search the Internet</label>
   <span id="s2" >You can search for anything you want.</span>
+
  <span id="n7span" >You can search for anything you want.</span>
 +
  <input name="n7" aria-describedby="n7spana" id="n7a" type="radio" />
 +
   <label for="n7a" style="border:solid thin;"> Search the Internet</label>
 +
   <span id="n7spana" >You can search for anything you want.</span>
 
</html>
 
</html>
  
 
==Disabled Input radio with label==
 
==Disabled Input radio with label==
 
<html>
 
<html>
   <input disabled id="id1" type="radio" />
+
   <input name="n8" disabled id="n8" type="radio" />
   <label style="border:solid thin;" for="id1"> Search the Internet </label>
+
  <label style="border:solid thin;" for="n8"> Search the Internet </label>
 +
  <input name="n8" disabled id="n8a" type="radio" />
 +
   <label style="border:solid thin;" for="n8a"> Search the Internet </label>
 
</html>
 
</html>
  
 
==Readonly Input radio with label==
 
==Readonly Input radio with label==
 
<html>
 
<html>
   <input readonly id="ir1" type="radio" />
+
   <input name="n9" readonly id="n9" type="radio" />
   <label for="ir1" style="border:solid thin;"> Search the Internet</label>
+
   <label for="n9" style="border:solid thin;"> Search the Internet</label>
 +
  <input name="n9" readonly id="n9a" type="radio" />
 +
  <label for="n9a" style="border:solid thin;"> Search the Internet</label>
 +
 
 
</html>
 
</html>
  
 
==Input radio with label (checked)==
 
==Input radio with label (checked)==
 
<html>
 
<html>
   <input checked id="ia1" type="radio" />
+
   <input name="n10" checked id="n10" type="radio" />
   <label for="ia1" style="border:solid thin;"> Search Internet</label>
+
  <label for="n10" style="border:solid thin;"> Search Internet</label>
 +
  <input name="n10" checked id="n10a" type="radio" />
 +
   <label for="n10a" style="border:solid thin;"> Search Internet</label>
 
</html>
 
</html>
  
 
[[Category:Elements]]
 
[[Category:Elements]]
 
[[Category:ARIA]]
 
[[Category:ARIA]]

Revision as of 18:49, 27 March 2014

Input radio with title (required, autofocus)

Input radio with label (required)

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

Readonly Input radio with label

Input radio with label (checked)