Difference between revisions of "Input Element Type Text"

From Level Access Web Labs
Jump to navigation Jump to search
(Input text with label (autocomplete on))
Line 2: Line 2:
 
==Input text with title (required, placeholder, autofocus)==
 
==Input text with title (required, placeholder, autofocus)==
 
<html>
 
<html>
   <input autofocus required placeholder="enter search term here" title="search" type="text" />
+
   <body>
  <button> Go </button>
+
    <input autofocus required placeholder="enter search term here" title="search" type="text" />
 +
    <button> Go </button>
 +
  </body>
 
</html>
 
</html>
  
 
==Input text with label (required)==
 
==Input text with label (required)==
 
<html>
 
<html>
   <input required id="i1" placeholder="enter search term here" type="text" />
+
   <body>
  <label style="border:solid thin;" for="i1"> Search </label>
+
    <input required id="i1" placeholder="enter search term here" type="text" />
 +
    <label style="border:solid thin;" for="i1"> Search </label>
 +
  </body>
 
</html>
 
</html>
  
 
==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" />
+
   <body>
  <span style="border:solid thin;"> Search </span>
+
    <input aria-label="search" id="i1" placeholder="enter search term here" type="text" />
 +
    <span style="border:solid thin;"> Search </span>
 +
  </body>
 
</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" />
+
   <body>
  <span id="s1" style="border:solid thin;"> Search </span>
+
    <input aria-labelledby="s1" id="i1" placeholder="enter search term here" type="text" />
 +
    <span id="s1" style="border:solid thin;"> Search </span>
 +
  </body>
 
</html>
 
</html>
  
 
==Input with implicit label==
 
==Input with implicit label==
 
<html>
 
<html>
   <label>
+
   <body>
    <input id="i1" placeholder="enter search term here" type="text" />
+
    <label>
    <span id="s1" style="border:solid thin;"> Search </span>
+
      <input id="i1" placeholder="enter search term here" type="text" />
   </label>
+
      <span id="s1" style="border:solid thin;"> Search </span>
 +
    </label>
 +
   </body>
 
</html>
 
</html>
  
 
==Input with explicit and implicit label==
 
==Input with explicit and implicit label==
 
<html>
 
<html>
   <label for="ie1">
+
   <body>
    <input id="ie1" placeholder="enter search term here" type="text" />
+
    <label for="ie1">
    <span id="s1" style="border:solid thin;"> Search </span>
+
      <input id="ie1" placeholder="enter search term here" type="text" />
   </label>
+
      <span id="s1" style="border:solid thin;"> Search </span>
 +
    </label>
 +
   </body>
 
</html>
 
</html>
  
 
==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" />
+
   <body>
  <label for="il1" style="border:solid thin;"> Search </label>
+
    <input aria-describedby="s2" id="il1" placeholder="enter search term here" type="text" />
  <span id="s2" >You can search for anything you want.</span>
+
    <label for="il1" style="border:solid thin;"> Search </label>
 +
    <span id="s2" >You can search for anything you want.</span>
 +
  </body>
 
</html>
 
</html>
  
 
==Disabled Input text with label==
 
==Disabled Input text with label==
 
<html>
 
<html>
   <input disabled id="id1" placeholder="enter search term here" type="text" />
+
   <body>
  <label style="border:solid thin;" for="id1"> Search </label>
+
    <input disabled id="id1" placeholder="enter search term here" type="text" />
 +
    <label style="border:solid thin;" for="id1"> Search </label>
 +
  </body>
 
</html>
 
</html>
  
 
==Readonly Input text with label==
 
==Readonly Input text with label==
 
<html>
 
<html>
   <input readonly value="hello world" id="ir1" placeholder="enter search term here" type="text" />
+
   <body>
  <label for="ir1" style="border:solid thin;"> Search </label>
+
    <input readonly value="hello world" id="ir1" placeholder="enter search term here" type="text" />
 +
    <label for="ir1" style="border:solid thin;"> Search </label>
 +
  </body>
 
</html>
 
</html>
  
 
==Input text with label (autocomplete on)==
 
==Input text with label (autocomplete on)==
 
<html>
 
<html>
   <input autocomplete="on" id="ia1" placeholder="enter search term here" type="text" />
+
   <body>
  <label for="ia1" style="border:solid thin;"> Search </label>
+
    <input autocomplete="on" id="ia1" placeholder="enter search term here" type="text" />
 +
    <label for="ia1" style="border:solid thin;"> Search </label>
 +
  </body>
 
</html>
 
</html>
  
 
<html>
 
<html>
   <input autocomplete="on" id="ia2" placeholder="enter search term here" type="text" />
+
   <body>
  <label for="ia2" visibility: hidden;> Search </label>
+
    <input autocomplete="on" id="ia2" placeholder="enter search term here" type="text" />
 +
    <label for="ia2" visibility: hidden;> Search </label>
 +
  </body>
 
</html>
 
</html>
 +
 
==Input with only title==
 
==Input with only title==
 
<html>
 
<html>
   <input type="text" title="this is a title" />
+
   <body>
 +
    <input type="text" title="this is a title" />
 +
  </body>
 +
</html>
 +
 
 +
==Input with only placeholder==
 +
<html>
 +
  <body>
 +
    <input type="text" placeholder="This is a placeholder" />
 +
  </body>
 
</html>
 
</html>
  
 
[[Category:Elements]]
 
[[Category:Elements]]
 
[[Category:ARIA]]
 
[[Category:ARIA]]

Revision as of 21:53, 6 January 2017

Input text with title (required, placeholder, autofocus)

Input text with label (required)

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

Input text with label (autocomplete on)

Input with only title

Input with only placeholder