Difference between revisions of "Input Element Type Checkbox"

From Level Access Web Labs
Jump to navigation Jump to search
 
(5 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
==Input checkbox with title (required, autofocus)==
 
==Input checkbox with title (required, autofocus)==
 
<html>
 
<html>
   <input autofocus required title="search" type="checkbox" />
+
   <input id="c1" autofocus required title="search" type="checkbox" />
 
   <label> Search Internet</label>
 
   <label> Search Internet</label>
 
</html>
 
</html>
Line 7: Line 7:
 
==Input checkbox with label (required)==
 
==Input checkbox with label (required)==
 
<html>
 
<html>
   <input required id="i1" type="checkbox" />
+
   <input required id="c2" type="checkbox" />
   <label style="border:solid thin;" for="i1"> Search Internet </label>
+
   <label style="border:solid thin;" for="c2"> Search Internet </label>
 
</html>
 
</html>
  
 
==Input checkbox with aria-label==
 
==Input checkbox with aria-label==
 
<html>
 
<html>
   <input aria-label="search aria label" id="i1" type="checkbox" />
+
   <input aria-label="search aria label" id="c3" type="checkbox" />
 
   <span style="border:solid thin;"> Search the Internet </span>
 
   <span style="border:solid thin;"> Search the Internet </span>
 
</html>
 
</html>
Line 19: Line 19:
 
==Input checkbox with aria-labelledby==
 
==Input checkbox with aria-labelledby==
 
<html>
 
<html>
   <input aria-labelledby="s1" id="i1" type="checkbox" />
+
   <input aria-labelledby="c4span" id="c4" type="checkbox" />
   <span id="s1" style="border:solid thin;"> Search the Internet </span>
+
   <span id="c4span" style="border:solid thin;"> Search the Internet </span>
 
</html>
 
</html>
  
Line 26: Line 26:
 
<html>
 
<html>
 
   <label>
 
   <label>
     <input id="i1" type="checkbox" />
+
     <input id="c5" type="checkbox" />
     <span id="s1" style="border:solid thin;"> Search the Internet </span>
+
     <span id="c5span" style="border:solid thin;"> Search the Internet </span>
 
   </label>
 
   </label>
 
</html>
 
</html>
Line 33: Line 33:
 
==Input checkbox with explicit and implicit label==
 
==Input checkbox with explicit and implicit label==
 
<html>
 
<html>
   <label for="ie1">
+
   <label for="c6">
     <input id="ie1" type="checkbox" />
+
     <input id="c6" type="checkbox" />
     <span id="s1" style="border:solid thin;"> Search the Internet</span>
+
     <span id="c6span" style="border:solid thin;"> Search the Internet</span>
 
   </label>
 
   </label>
 
</html>
 
</html>
Line 41: Line 41:
 
==Input checkbox with label and aria-describedby==
 
==Input checkbox with label and aria-describedby==
 
<html>
 
<html>
   <input aria-describedby="s2" id="il1" type="checkbox" />
+
   <input aria-describedby="c7span" id="c7" type="checkbox" />
   <label for="il1" style="border:solid thin;"> Search the Internet</label>
+
   <label for="c7" style="border:solid thin;"> Search the Internet</label>
   <span id="s2" >You can search for anything you want.</span>
+
   <span id="c7span" >You can search for anything you want.</span>
 
</html>
 
</html>
  
 
==Disabled Input checkbox with label==
 
==Disabled Input checkbox with label==
 
<html>
 
<html>
   <input disabled id="id1" type="checkbox" />
+
   <input disabled id="c8" type="checkbox" />
   <label style="border:solid thin;" for="id1"> Search the Internet </label>
+
   <label style="border:solid thin;" for="c8"> Search the Internet </label>
 
</html>
 
</html>
  
==Readonly Input checkbox with label==
+
==Input checkbox with label (checked)==
 
<html>
 
<html>
   <input readonly id="ir1" type="checkbox" />
+
   <input checked id="c10" type="checkbox" />
   <label for="ir1" style="border:solid thin;"> Search the Internet</label>
+
   <label for="c10" style="border:solid thin;"> Search Internet</label>
 
</html>
 
</html>
  
==Input checkbox with label (checked)==
+
==Input checkbox with in fieldset==
 
<html>
 
<html>
   <input checked id="ia1" type="checkbox" />
+
<fieldset>
   <label for="ia1" style="border:solid thin;"> Search Internet</label>
+
<legend> Settings</legend>
 +
   <input id="c11" type="checkbox" />
 +
   <label for="c11" style="border:solid thin;"> Search Internet</label>
 +
</fieldset>
 
</html>
 
</html>
  
 
[[Category:Elements]]
 
[[Category:Elements]]
 
[[Category:ARIA]]
 
[[Category:ARIA]]

Latest revision as of 00:55, 6 March 2018

Input checkbox with title (required, autofocus)

Input checkbox with label (required)

Input checkbox with aria-label

Search the Internet

Input checkbox with aria-labelledby

Search the Internet

Input checkbox with implicit label

Input checkbox with explicit and implicit label

Input checkbox with label and aria-describedby

You can search for anything you want.

Disabled Input checkbox with label

Input checkbox with label (checked)

Input checkbox with in fieldset

Settings