<form method="... </form>

How to make a login/pass form show characters

Page 1 of 1

3 Replies - 1347 Views - Last Post: 22 February 2010 - 12:48 PM

#1 lrk89  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 100
  • Joined: 20-May 09

<form method="... </form>

Posted 21 February 2010 - 02:47 PM

Hi guys

I have been learning how to make websites using xhtml & CSS since October I am pretty good. But I have come across something that was not in any of the books I have read.

How do I make a form field for login details say User name or display asterisks in the password field?

This is what I have:

EDIT: woops this is the code for my search box but you get the idea :)


<form method="get" action="/recipes/">
  <input type="text" name="keywords">
  <input type="image" alt="search"  src="images/search.gif"/>
</form>



Thanks

This post has been edited by lrk89: 21 February 2010 - 02:54 PM


Is This A Good Question/Topic? 0
  • +

Replies To: <form method="... </form>

#2 programble  Icon User is offline

  • (cons :dic :head)

Reputation: 49
  • View blog
  • Posts: 1,315
  • Joined: 21-February 09

Re: <form method="... </form>

Posted 21 February 2010 - 03:56 PM

<input type="password" name="password" />


Was This Post Helpful? 0
  • +
  • -

#3 moopet  Icon User is offline

  • binary decision maker
  • member icon

Reputation: 339
  • View blog
  • Posts: 1,185
  • Joined: 02-April 09

Re: <form method="... </form>

Posted 21 February 2010 - 03:59 PM

Use a label to label the input field:
<label for="abc123">Username:</label>
<input type="text" id="abc123" name="abc123" />



Note that you need an id as well as a name because LABEL uses ids and the form submission uses names. They have to match. It has the benefit that if someone clicks on the word "Username:" then it focuses tjhe input field automatically. Which is nice.
and just set the input type to password for the asterisking:
<input type="password" name="bcd234" />



If you mean something else, like how to get the field to say "username" and then that to vanish like magic when a user clicks on it... you need javascript. jQuery makes it really easy:
$('input[name="abc123"]).focus(function(){
    if ($(this).val() == 'username') {
        $(this).attr('value', '');
    }
});



for starters, anyway :)
Was This Post Helpful? 0
  • +
  • -

#4 lrk89  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 100
  • Joined: 20-May 09

Re: <form method="... </form>

Posted 22 February 2010 - 12:48 PM

Thanks for your help, I could't get the Java script to work although i didn't give it a good try. i don't know any Javascript yet. i still need to master xhtml and css but i have found a solution to my problem:

<form id="login" methods="post" action="login"> <!-- start of login details -->
<input type="text" name="username" id="usernamebox" value="User name" />

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1