Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML/CSS Making a textbox with text that is grayed out, and disappears when I click to enter info, how?

Tags:

html

css

textbox

How do I make a textbox that has a grayed out content, and when I click on it to enter text, the grayed out portion, it disappears and allows me to enter the desired text?

Example:

A "First Name" text box. The words "First Name" are inside the text box grayed out, when I click, those words disappear and I write my name in it.

like image 408
Ibn Ali al-Turki Avatar asked Jan 13 '11 14:01

Ibn Ali al-Turki


People also ask

How do I gray out a TextBox in HTML?

The disabled="disabled" parameter is the standard way to do this, and you could use something like jQuery to dynamically disable all of the form elements contained in a fieldset (Which is the standard way of grouping related form elements) on the fly.

How do you give a TextBox a hint in HTML?

If you want to set a hint for text area or input field, then use the HTML placeholder attribute. The hint is the expected value, which gets displayed before the user enters a value, for example, name, details, etc.

How do I GREY out a TextBox in JavaScript?

document. getElementById("color"). disabled = true; edit — oh also, as pointed out by others, it's just "text", not "TextBox", for the "type" attribute.


1 Answers

Chrome, Firefox, IE10 and Safari support the html5 placeholder attribute

<input type="text" placeholder="First Name:" />

In order to get a more cross browser solution you'll need to use some javascript, there are plenty of pre-made solutions out there, though I don't know any off the top of my head.

http://www.w3schools.com/tags/att_input_placeholder.asp

like image 154
Psytronic Avatar answered Sep 20 '22 21:09

Psytronic