Difference between revisions of "Input Element Type Button"

From Level Access Web Labs
Jump to navigation Jump to search
(Created page with "==Input button with value (autofocus)== <html> <input autofocus value="search" type="button" /> </html> ==Input button with title== <html> <input title="search" type="but...")
 
 
Line 4: Line 4:
 
</html>
 
</html>
  
==Input button with title==
+
==Input button with value, title==
 
<html>
 
<html>
   <input title="search" type="button" />
+
   <input value="search" title="Go" type="button" />
 
</html>
 
</html>
  
==Input button with label (required)==
+
==Input button with value, label (required)==
 
<html>
 
<html>
   <input id="i1" type="button" />
+
   <input value="search" id="i1" type="button" />
   <label style="border:solid thin;" for="i1"> Search </label>
+
   <label style="border:solid thin;" for="i1"> Search the Internet </label>
 
</html>
 
</html>
  
==Input button with aria-label==
+
==Input button with value, aria-label==
 
<html>
 
<html>
   <input aria-label="search" type="button" />
+
   <input value="search" aria-label="search the Internet" type="button" />
 
</html>
 
</html>
  
==Input button with aria-labelledby==
+
==Input button with value, aria-labelledby==
 
<html>
 
<html>
   <input aria-labelledby="s1" type="button" />
+
   <input value="search" aria-labelledby="s1" type="button" />
   <span id="s1" style="border:solid thin;"> Search </span>
+
   <span id="s1" style="border:solid thin;"> Search the Internet</span>
 
</html>
 
</html>
  
==Input with implicit label==
+
==Input button with value, implicit label==
 
<html>
 
<html>
 
   <label>
 
   <label>
     <input id="i1" placeholder="enter search term here" type="text" />
+
     <input value="search" type="button" />
     <span id="s1" style="border:solid thin;"> Search </span>
+
     <span id="s1" style="border:solid thin;"> Search the Internet</span>
 
   </label>
 
   </label>
 
</html>
 
</html>
  
==Input with explicit and implicit label==
+
==Input button with value, explicit and implicit label==
 
<html>
 
<html>
 
   <label for="ie1">
 
   <label for="ie1">
     <input id="ie1" placeholder="enter search term here" type="text" />
+
     <input value="search" type="button" />
     <span id="s1" style="border:solid thin;"> Search </span>
+
     <span style="border:solid thin;"> Search the Internet</span>
 
   </label>
 
   </label>
 
</html>
 
</html>
  
==Input text with label and aria-describedby==
+
==Input button with value, label and aria-describedby==
 
<html>
 
<html>
   <input aria-describedby="s2" id="il1" placeholder="enter search term here" type="text" />
+
   <input value="search" aria-describedby="s2" id="il1" type="button" />
   <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 51: Line 51:
 
==Disabled Input text with label==
 
==Disabled Input text with label==
 
<html>
 
<html>
   <input disabled id="id1" placeholder="enter search term here" type="text" />
+
   <input value="search" disabled id="id1" type="button" />
   <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 value="search" readonly id="ir1" type="button" />
  <label for="ir1" style="border:solid thin;"> Search </label>
+
   <label for="ir1" style="border:solid thin;"> Search the Internet </label>
</html>
 
 
 
==Input text with label (autocomplete on)==
 
<html>
 
  <input autocomplete="on" id="ia1" placeholder="enter search term here" type="text" />
 
   <label for="ia1" style="border:solid thin;"> Search </label>
 
 
</html>
 
</html>
  
 
[[Category:Elements]]
 
[[Category:Elements]]
 
[[Category:ARIA]]
 
[[Category:ARIA]]

Latest revision as of 18:20, 27 March 2014

Input button with value (autofocus)

Input button with value, title

Input button with value, label (required)

Input button with value, aria-label

Input button with value, aria-labelledby

Search the Internet

Input button with value, implicit label

Input button with value, explicit and implicit label

Input button with value, label and aria-describedby

You can search for anything you want.

Disabled Input text with label

Readonly Input text with label