Username Password Button [closed] - html

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I'm working on HTML and I'm trying to introduce a box in the middle of the page with two text buttons to insert username and password. I find the way to create the box with the text inside, like the one that disappear when you click on it. How can I do it? Thanks for all!
I was able to create the button and the onClick option for the Tune In but I don't know how to do the two text buttons

Answer 1

That's not a button but instead an input. You can insert them inside your form like this:
<form action="#">
<input type="text" placeholder="Username" />
<input type="text" placeholder="Password" />
</form>

Answer 2

As suggested in the comments, use the placeholder attribute
<input type="text" name="username" placeholder="Username">
For the password you can also add a password type to prevent the plain text from appearing
<input type="password" name="pwd" placeholder="Password>
So
<form action="#" style="text-align:center">
<input type="text" name="username" placeholder="Username"><br>
<input type="password" name="pwd" placeholder="Password">
<div class="button">
<button type="submit">Tune In</button>
</div>
</form>
The above code is now centered per your request. You can put the styling in CSS as well

Answer 3

input[placeholder] {
font-size: 20px;
text-align: center;
}
<input type="text" name="username" placeholder="username"></p>
<input type="text" name="password" placeholder="password"></p>
EDIT
To increase the placeholder's font size and center the text:
input[placeholder] {
font-size: 20px;
text-align: center;
}

Answer 4

Here is how it will work
<input type="text" placeholder="Enter User Name">
and I think you should make your password text box of password type as follows
<input type="password" placeholder="Enter password">

Answer 5

or another aproach if you want to include a little jquery so it will be old browsers compatible.
html:
<form action="#">
<input type="text" class="txtInside" defaultval="user" >
<input type="text" class="txtInside" defaultval="pass" >
</form>
jquery:
$('body').ready(function () {
$('.txtInside').each(function () {
$(this).val($(this).attr('defaultVal'));
$(this).css({ color: '#999999' });
});
$('.txtInside').focus(function () {
if ($(this).val() == $(this).attr('defaultVal')) {
$(this).val('');
$(this).css({ color: '#000' });
}
});
$('.txtInside').blur(function () {
if ($(this).val() == '') {
$(this).val($(this).attr('defaultVal'));
$(this).css({ color: '#999999' });
}
});
});
Example: http://jsfiddle.net/fhs43ke8/
In thsi case you write the test you want in "defaultval". the script include a change of text color in case you want it