placeholder Attribute of Form Field: HTML5

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

< !DOCTYPE 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

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

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.