How can we make transparent text that disappears when replaced?

i think that the textarea element in exercise: “LEARN HTML: FORMS - Textarea element” would be better suited to use placeholder text rather than text that the user has to delete before they can type. It makes the form have better usability and user experience.

it would look like this:

<textarea id="extra" name="extra" rows="3" cols="40" placeholder="Special Instructons..."></textarea>
2 Likes

In a backward compatible world, especially screen readers, placeholder attribute may not be supported, hence the legacy use of value text. The aim is the same, though… To indicate the type of content expected in the field. The specifications as they are currently defined still stipulate this.

placeholder

A hint to the user of what can be entered in the control. Carriage returns or line-feeds within the placeholder text must be treated as line breaks when rendering the hint.

Note: Placeholders should only be used to show an example of the type of data that should be entered into a form; they are not a substitute for a proper <label> element tied to the input. See Labels and placeholders in : The Input (Form Input) element for a full explanation.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea

7 Likes

Is it possible to make the default text disappear when clicked on the textarea field on the page by the user.

For that, the placeholder attribute exist:

<textarea placeholder="some value"></textarea>
4 Likes

What is an example of when I may want to set a default text in the element? I see that it does not go away when someone starts typing. Thank you.

When an input field is more commonly than not given a specific string, we can assume it is the consensus, at which point by learning from our users we can make that input a default.

If our audience is from the Greater Toronto Area we might supply Maple Leafs to the question, “Which team do you want to win the Stanley Cup?” The user need only click Okay or press Enter.

If we cannot justify a default value, then we should use a placeholder to suggest or advise, and not give a value.

<label>Which team do you want to win the Stanley Cup? 
<input value="Maple Leafs" name="stanley-cup-hopeful">
</label>

<label for="name">Name: </label>
<input id="name" name="name" placeholder="Type your name">
2 Likes

Yes, thank you! I was looking for this.

In instruction 2, we can put in default text.
Can we possibly put in transparent text that you can write over?

Have you tried the placeholder attribute in a <textarea> element?

1 Like

Oh ok, I saw this at the end of the lesson. Thank you!

1 Like

Yes. <textarea id="extra" name="extra" rows="3" cols="40" placeholder="Your opinion is valuable to us."></textarea>. But the output with and without the placeholder attribute remains the same in the text field nothing is displayed .

The text node of <textarea> </textarea> is the placeholder.

                      ^
                      |
                  text node

yes.but then the user has to erase the pre-filled text to write his/her comments…is there any way that as soon as the user clicks on the text field and the pre-filled text goes away?like we do in <input type="text">

The text should be selected when the field gets focus. The user can start typing to overwrite it.

Another approach would be to use a label, or a fieldset with legend.

which tag or attribute should I use to do this?

<label for="comment">Enter your comments below</label>
<textarea id="comment" name="comment" ...>

</textarea>
3 Likes

Thanks a lot…that really helped

1 Like

click
is this how it should look like? or is it a problem with my connection?!

Opinions may vary… I’m not fond of any text prestaged in the TEXTAREA, especially when given an instructive LABEL.

1 Like

I agree. If the label is detailed enough then placeholder becomes obsolete. I guess it would just make the code a little more needlessly complex.