Difference between revisions of "Input Element Type Text"

From Level Access Web Labs
Jump to navigation Jump to search
Line 61: Line 61:
 
==Input with explicit and implicit label==
 
==Input with explicit and implicit label==
 
<html>
 
<html>
   <label for id="s1">
+
   <label for id="ie1">
     <input id="i1" placeholder="enter search term here" type="text" />
+
     <input id="ie1" placeholder="enter search term here" type="text" />
 
     <span id="s1" style="border:solid thin;"> Search </span>
 
     <span id="s1" style="border:solid thin;"> Search </span>
 
   </label>
 
   </label>
Line 69: Line 69:
 
==Input text with label and aria-describedby==
 
==Input text with label and aria-describedby==
 
<html>
 
<html>
   <input aria-describedby="s2" id="i1" placeholder="enter search term here" type="text" />
+
   <input aria-describedby="s2" id="il1" placeholder="enter search term here" type="text" />
   <label for="i1" style="border:solid thin;"> Search </label>
+
   <label for="il1" style="border:solid thin;"> Search </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 76: Line 76:
 
==Disabled Input text with label==
 
==Disabled Input text with label==
 
<html>
 
<html>
   <input disabled id="i1" placeholder="enter search term here" type="text" />
+
   <input disabled id="id1" placeholder="enter search term here" type="text" />
   <label style="border:solid thin;" for="i1"> Search </label>
+
   <label style="border:solid thin;" for="id1"> Search </label>
 
</html>
 
</html>
  
 
==Readonly Input text with label==
 
==Readonly Input text with label==
 
<html>
 
<html>
   <input readonly id="i1" placeholder="enter search term here" type="text" />
+
   <input readonly id="ir1" placeholder="enter search term here" type="text" />
   <label style="border:solid thin;" for="i1"> Search </label>
+
   <label style="border:solid thin;" for="ir1"> Search </label>
 
</html>
 
</html>
  
 
[[Category:Elements]]
 
[[Category:Elements]]
 
[[Category:ARIA]]
 
[[Category:ARIA]]

Revision as of 17:41, 27 March 2014

Possible attributes that can affect accessibility

  • autofocus
  • autocomplete
  • checked
  • disabled
  • list (see Datalist Element
  • placeholder
  • readonly
  • required
  • type button
  • type checkbox
  • type date
  • type datetime
  • type email
  • type file
  • type hidden
  • type month
  • type number password
  • type radio
  • type range
  • type reset
  • type search
  • type submit
  • type tel
  • type time
  • type url
  • type week

Input text with title

Input text with label

Input text with aria-label

Search

Input text with aria-labelledby

Search

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