Difference between revisions of "Input Element Type Checkbox"

From Level Access Web Labs
Jump to navigation Jump to search
(Created page with "==Input checkbox with title (required, autofocus)== <html> <input autofocus required title="search" type="checkbox" /> <label> Search Internet</label> </html> ==Input tex...")
 
Line 7: Line 7:
 
==Input text with label (required)==
 
==Input text with label (required)==
 
<html>
 
<html>
   <input required id="i1" placeholder="enter search term here" type="text" />
+
   <input required id="i1" type="checkbox" />
 
   <label style="border:solid thin;" for="i1"> Search Internet </label>
 
   <label style="border:solid thin;" for="i1"> Search Internet </label>
 
</html>
 
</html>
Line 13: Line 13:
 
==Input text with aria-label==
 
==Input text with aria-label==
 
<html>
 
<html>
   <input aria-label="search" id="i1" placeholder="enter search term here" type="text" />
+
   <input aria-label="search aria label" id="i1" type="checkbox" />
   <span style="border:solid thin;"> Search </span>
+
   <span style="border:solid thin;"> Search the Internet </span>
 
</html>
 
</html>
  
 
==Input text with aria-labelledby==
 
==Input text with aria-labelledby==
 
<html>
 
<html>
   <input aria-labelledby="s1" id="i1" placeholder="enter search term here" type="text" />
+
   <input aria-labelledby="s1" id="i1" type="checkbox" />
   <span id="s1" style="border:solid thin;"> Search </span>
+
   <span id="s1" style="border:solid thin;"> Search the Internet </span>
 
</html>
 
</html>
  
Line 26: Line 26:
 
<html>
 
<html>
 
   <label>
 
   <label>
     <input id="i1" placeholder="enter search term here" type="text" />
+
     <input id="i1" type="checkbox" />
     <span id="s1" style="border:solid thin;"> Search </span>
+
     <span id="s1" style="border:solid thin;"> Search the Internet </span>
 
   </label>
 
   </label>
 
</html>
 
</html>
Line 34: Line 34:
 
<html>
 
<html>
 
   <label for="ie1">
 
   <label for="ie1">
     <input id="ie1" placeholder="enter search term here" type="text" />
+
     <input id="ie1" type="checkbox" />
     <span id="s1" style="border:solid thin;"> Search </span>
+
     <span id="s1" style="border:solid thin;"> Search the Internet</span>
 
   </label>
 
   </label>
 
</html>
 
</html>
Line 41: Line 41:
 
==Input text with label and aria-describedby==
 
==Input text with label and aria-describedby==
 
<html>
 
<html>
   <input aria-describedby="s2" id="il1" placeholder="enter search term here" type="text" />
+
   <input aria-describedby="s2" id="il1" type="checkbox" />
   <label for="il1" style="border:solid thin;"> Search </label>
+
   <label for="il1" style="border:solid thin;"> Search the Internet</label>
 
   <span id="s2" >You can search for anything you want.</span>
 
   <span id="s2" >You can search for anything you want.</span>
 
</html>
 
</html>
Line 48: Line 48:
 
==Disabled Input text with label==
 
==Disabled Input text with label==
 
<html>
 
<html>
   <input disabled id="id1" placeholder="enter search term here" type="text" />
+
   <input disabled id="id1" type="checkbox" />
   <label style="border:solid thin;" for="id1"> Search </label>
+
   <label style="border:solid thin;" for="id1"> Search the Internet </label>
 
</html>
 
</html>
  
 
==Readonly Input text with label==
 
==Readonly Input text with label==
 
<html>
 
<html>
   <input readonly id="ir1" placeholder="enter search term here" type="text" />
+
   <input readonly id="ir1" type="checkbox" />
   <label for="ir1" style="border:solid thin;"> Search </label>
+
   <label for="ir1" style="border:solid thin;"> Search the Internet</label>
 
</html>
 
</html>
  

Revision as of 18:28, 27 March 2014

Input checkbox with title (required, autofocus)

Input text with label (required)

Input text with aria-label

Search the Internet

Input text with aria-labelledby

Search the Internet

Input with implicit label

Input with explicit and implicit label

Input text with label and aria-describedby

You can search for anything you want.

Disabled Input text with label

Readonly Input text with label

Input text with label (checked)