Add Placeholder text to a text field in a form

Question

Hi all i am trying to add placeholder to a skin i am building on roundcube. i want it to say username for username and password for password. i know its possible using html but the issue is i dont have acess to the form so i can add placeholder text to the html. I think the only way will be with js or css but as of yet not found a working solution and hoping someone here can help. Here is the form html it has:

    <html>
<input type="hidden" name="_task" value="login"><input type="hidden" name="_action" value="login"><input type="hidden" name="_timezone" id="rcmlogintz" value="_default_"><input type="hidden" name="_url" id="rcmloginurl" value=""><table><tbody><tr><td class="title"><label for="rcmloginuser">Username</label>
</td>
    <td class="input"><input name="_user" id="rcmloginuser" required="required" size="40" autocapitalize="off" autocomplete="off" type="text"></td>
    </tr>
    <tr><td class="title"><label for="rcmloginpwd">Password</label>
    </td>
    <td class="input"><input name="_pass" id="rcmloginpwd" required="required" size="40" autocapitalize="off" autocomplete="off" type="password"></td>
    </tr>
    </tbody>
    </html>

Many thanks all.

Is that the correct HTML, it's all over the place, it has TD's without TR, it has TR without THEAD/TBODY, and then no TABLE.. mmm.. — Keith, Jan 31 '18 at 13:50
[The HTML5 placeholder attribute is not a substitute for the label element](http://www.456bereastreet.com/archive/201204/the_html5_placeholder_attribute_is_not_a_substitute_for_the_label_element/) — Quentin, Jan 31 '18 at 13:50
@Keith — The thead element is optional. The tbody start tag is optional. It's a form, tables shouldn't be used for layout anyway. — Quentin, Jan 31 '18 at 13:52
see here: https://stackoverflow.com/questions/13506481/change-placeholder-text — D. Braun, Jan 31 '18 at 13:53
@D.Braun i did try that before i asked, couldent get it to work, not a js coder so no idea why. — Michael Rooks, Jan 31 '18 at 13:56
Have you tried getElementsByName or getElementById or the JQuery way? — D. Braun, Jan 31 '18 at 14:05

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

You can use the attribute placeholder and along with setAttribute function, set the desired placeholder.

document.getElementsByName('_user')[0].setAttribute("placeholder", "Username");
document.getElementsByName('_pass')[0].setAttribute("placeholder", "Password");

<html>
<td class="input">
<br><label for="rcmloginuser">Username</label><br>
<input name="_user" id="rcmloginuser" required="required" size="40" autocapitalize="off" autocomplete="off" type="text"></td>
</tr>
<tr><td class="title"><br><label for="rcmloginpwd">Password</label><br>
</td>
<td class="input"><input name="_pass" id="rcmloginpwd" required="required" size="40" autocapitalize="off" autocomplete="off" type="password"></td>
</tr>
</tbody>
</html>

See? now your fields have a placeholder.

Resources

score 0 · Answer 2 · answered Jan 31 '18 at 13:55

0

In JS, you can select your HTML element and define its placeholder :

document.getElementById("yourId").placeholder = "Placeholder";

answered Jan 31 '18 at 13:55

sachaandre

21
2

score 0 · Answer 3 · answered Jan 31 '18 at 13:57

0

A Pure JS Solution would be as below :-

document.getElementById("rcmloginuser").setAttribute("placeholder", "UserName");

You can refer to the following JS Fiddle :-

https://jsfiddle.net/23nigam/q2493u3s/4/

answered Jan 31 '18 at 13:57

23nigam

601
5
13

Add Placeholder text to a text field in a form

3 Answers3

Resources