Site icon Code Exercise

HTML5 input Placeholder text – HTML Forms

Md Rashidul Islam

First up is the placeholder HTML5 attribute, which allows us to set placeholder text as we would currently do with the value attribute in HTML4 . It should only be used for short descriptions.

For anything longer, use the title attribute. The difference from HTML4 is that the text is only displayed when the field is empty and hasn’t received focus. Once the field receives focus (e.g., you click or tab to the field), and you begin to type, the text simply disappears. It’s very similar to the search box you see in Safari (see Figure 1).

Figure 1. Browser search box in Safari without and with focus

Let’s have a look at how to implement the placeholder attribute.

<input id="user-name" name="user-name" type="text" placeholder="at least 3 characters" />

That’s it! We can hear you thinking, “What’s so great about that? I’ve been doing it with JavaScript for years.” Yes, that’s true. However, with HTML5, it’s part of the browser, meaning less scripting is required for a more accessible, cross-browser solution (even when JavaScript is disabled). Figure 2 shows the placeholder attribute working in Chrome.

Figure 2. Placeholder attribute support in Chrome, unfocused and focused

Browsers that don’t support the placeholder attribute ignore it, so it won’t render. By including it, though, you’re providing an enhanced user experience for those users who have browser support and you’re “future proofing” your site. All modern browsers support placeholder.

More Example:

Two input fields and submit submit button with a placeholder text:

<form action="demo_form.php">
 <input type="text" name="fname" placeholder="First name"><br>
 <input type="text" name="lname" placeholder="Last name"><br>
 <input type="submit" value="Submit">
</form>

This will produce following result:

Placeholder HTML Code Results

Note: The placeholder attribute works with the following input types: text, search, url, tel, email, and password.

Change an input’s HTML5 placeholder color with CSS:

HTML5 Placeholder Implementation:

There are three different implementations: pseudo-elements, pseudo-classes, and nothing.

 ::-webkit-input-placeholder
: :-moz-placeholder (one colon).
::-moz-placeholder,

but the old selector will still work for a while.

: :-ms-input-placeholder.

Internet Explorer 9 and lower does not support the placeholder attribute at all, while Opera 12 and lower do not support any CSS selector for placeholders.

The discussion about the best implementation is still going on. Note the pseudo-elements act like real elements in the Shadow DOM. A padding on an input will not get the same background color as the pseudo-element.

CSS selectors:
So we need separate rules for each browser. Otherwise the whole group would be ignored by all browsers.

 

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
 color: #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
 color: #909;
 opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
 color: #909;
 opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
 color: #909;
}
<input placeholder="Stack Snippets are awesome!">

This short and clean code:

::-webkit-input-placeholder{color: #ddd;}
:-moz-placeholder{color:#ddd;/* For Firefox 18- */}
::-moz-placeholder{color:#ddd;/* For Firefox 19+ */}
:-ms-input-placeholder{color:#ddd;}

Here is one more example:

.form-control::-webkit-input-placeholder {
color: red;
width: 250px;
}
h1 {
color: red;
}
<div class="col-sm-4">
 <input class="form-control" placeholder="Enter text here.." ng-model="Email" required/>
</div>

Note: There is no official pseudo-class for styling placeholder text but both Mozilla (makers of Firefox) and WebKit offer vendor prefixed properties for styling (-mozplaceholder and –webkit-input-placeholder). This makes it safe to assume that a pseudo-class will become standard for styling placeholder text. For further detail there is a thread on the WHATWG mailing list about this topic.

Exit mobile version