How to make hints for HTML input fields - placeholder attribute for input, select, textarea
When adding input fields to site pages, you need to specify auxiliary text for them - hints that explain the purpose of the fields. Previously, these hints were usually done simply by adding a line of text above the field, but you could come across custom solutions that served as the new placeholder attribute .
Seeing this state of affairs, the HTML developers began to work on it - for the input type = "text" tag, a special attribute was eventually developed and added - placeholder . It allows you to quickly write the desired hint for the text, which will be shown to the user. The color of the text in the tooltip is immediately highlighted in gray.
& lt; input type = "text" placeholder = "Enter text">
But what about other types of input fields? For example, type = "checkbox" and type = "radio" . For these types of fields, you can use the label tag, it sets a hint for the field placed in it. For example, you can write this:
& lt; label> & lt; span style = "display: block;"> Check the ones you want: & lt; / span> & lt; input type = "checkbox"> & lt; / label>
There is no placeholder attribute for select, but you can make a hint inside the field in a simple way - it will be the first option of this select . You can visually highlight it, for example, add a hyphen at the beginning and at the end.
& lt; select> & lt; option value = "- Select value -"> - Select value - & lt; / option> & lt; option value = "Value 1"> Value 1 & lt; / option> & lt; option value = "Value 2"> Value 2 & lt; / option> & lt; option value = "Value 3"> Value 3 & lt; / option> & lt; / select>
It remains to deal with textarea . The textarea tag does not have a placeholder attribute, but you can add a hint directly to the field by simply placing it between the textarea tags.
& lt; textarea> Enter text & lt; / textarea>
Brief summary, how to make hints for HTML input fields :
- for input type = "text" , use the placeholder attribute;
- for other types of input you can use the tag label ;
- for select , a hint is used in the form of the first option ;
- for textarea , the hint is placed inside this tag.
We have seen how you can make tips for of various HTML input fields , even if they don't support the placeholder attribute.
- IT / Misc 08.07.21 How to make a free translation for a website without an API, translate documents in Google Translate
- IT / Misc 06.07.21 How to make a subscription button on a website, a subscriber base and automatic mailing
- Food / Misc 06.07.21 How to quickly cook delicious fried pies with potatoes and onions
- IT / Misc 04.07.21 Caching - create, load and reset. Where to store the cache, methods and types of caching
- IT / Database 03.07.21 Custom NoSQL - storing data in files and not only in a database. Storing settings, small data and caching files