在单击第二个用户名或密码输入框时,光标跳转到第一个

时间:2012-01-23 16:34:20

标签: html css forms

3个表单允许以成员,访客或新注册的方式访问。 但是,如果有人点击表单的下半部分,它会自动将光标发送到顶部。

<form action="schlogin.php" method="post">
  <fieldset>
    <legend>Member's Login</legend>
    <label for="username">Username: 
        <input type="text" name="username" id="username" value=""/>
    </label>
    </br>
    <label for="password">Password: 
        <input type="password" name="password" id="password"/>
    </label>
    </br>
    <input type="submit" name="login" class="loginButtons" value="login"/>
    </label>
    </br>
  </fieldset>
</form>

<form action="schlogin.php" method="POST">
  <fieldset>
    <legend>Guest Player</legend>
    <input type="submit" name="guest" class="loginButtons" value="Play as GUEST!" />
    </label>
    </br>
  </fieldset>
</form>

<form action="schlogin.php" method="POST">
  <fieldset>
    <legend>FAST Register</legend>
    <label for="username">Username: 
        <input type="text" name="username" id="username" value =""/>
    </label>
    </br>
    <label for="password">Password: 
        <input type="password" name="password" id="password"/>
    </label>
    </br>
    <label for="email">E-mail:
        <input type="text" name="email" value=""/>
    </label>
    </br>
    <input type="submit" name="register" class="loginButtons" value="I WANT TO PLAY TOO!"/>
    </label>
    </br> 

    I've forgotten my password:
    <input type="submit" name="forgotten" class="loginButtons" value="Send me a new password!"/>
    </label>
    </br>
  </fieldset>
</form>

2 个答案:

答案 0 :(得分:3)

Validate, validate, validate

您有重复的ID属性,因此第二种形式的标签是for第一种形式的输入。

答案 1 :(得分:2)

在你的第二次表格变更中

<label for="username">Username: 
<input type="text" name="username" id="username" value ="<?php if (isset($username)){echo $username; }?>"/></label></br>

为:

<label for="register_username">Username: 
<input type="text" name="username" id="register_username" value ="<?php if (isset($username)){echo $username; }?>"/></label></br>

或任何你喜欢的。

关键是每个html元素的id应该始终是唯一的。而属性的label元素应与其关联的input元素的id属性相匹配。