Lets look at placeholder attribute of HTML5 form field.
Demo
Here we’re taking 3 input fields of type text, email and url respectively. For each of the input fields we add a placeholder text.
HTML file
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | < !DOCTYPE HTML> <html> <head> <title>Placeholder Attribute: HTML5</title> <meta charset="utf-8"/> <link href="myStyle.css" rel="stylesheet"/> </head> <body> <form> <label for="name">Name: </label> <input type="text" id="name" placeholder="Satish"/> <br /> <label for="email">Email: </label> <input type="email" id="email" placeholder="[email protected]"/> <br /> <label for="url">URL: </label> <input type="url" id="url" placeholder="https://technotip.com"/> <br /> </form> </body> </html> |
Here we have 3 input fields with their respective label tags. Note that, the input fields id must match with the label tags for attribute value. Also notice the css file attached to the html file, for aligning the input fields and the labels.
CSS file
myStyle.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | label{
width: 50px;
float:left;
}
input{
width: 200px;
}
form {
padding: 5px;
background-color: ivory;
width: 300px;
height: auto;
border: 2px dotted black;
} |
Here we make the label width 50px and make it float left, making room for the input fields. We also fix the width of form to 300px.
placeholder Attribute of Form Field: HTML5
[youtube https://www.youtube.com/watch?v=SqJZD0OdT1g]
YouTube Link: https://www.youtube.com/watch?v=SqJZD0OdT1g [Watch the Video In Full Screen.]
Note: These placeholder attributes are not a substitute for label tags. And it’s neither a form validator. It’s used to provide hint to the user for form entry.