Difference between revisions of "Input Element Type Text"
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> |
| − | + | <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> |
| − | + | <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> |
| − | + | <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> |
| − | + | <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> |
| − | + | <label> | |
| − | + | <input id="i1" placeholder="enter search term here" type="text" /> | |
| − | </ | + | <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> |
| − | + | <label for="ie1"> | |
| − | + | <input id="ie1" placeholder="enter search term here" type="text" /> | |
| − | </ | + | <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> |
| − | + | <input aria-describedby="s2" id="il1" placeholder="enter search term here" type="text" /> | |
| − | + | <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> |
| − | + | <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> |
| − | + | <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> |
| − | + | <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> |
| − | + | <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
- For use of list attribute (see Datalist Element
Contents
- 1 Input text with title (required, placeholder, autofocus)
- 2 Input text with label (required)
- 3 Input text with aria-label
- 4 Input text with aria-labelledby
- 5 Input with implicit label
- 6 Input with explicit and implicit label
- 7 Input text with label and aria-describedby
- 8 Disabled Input text with label
- 9 Readonly Input text with label
- 10 Input text with label (autocomplete on)
- 11 Input with only title
- 12 Input with only placeholder
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
