Question

我正在研究HTML，我试图在页面中间引入一个方框，其中有两个文本按钮来插入用户名和密码。我找到了创建内部文本框的方法，就像点击它时消失的那样。我该怎么做？谢谢大家！ enter image description here

我能够为Tune In创建按钮和onClick选项，但我不知道如何做两个文本按钮

Answer 1

根据评论中的建议，使用占位符属性

  <input type="text" name="username" placeholder="Username">

对于密码，您还可以添加密码类型以防止出现纯文本

   <input type="password" name="pwd" placeholder="Password>

所以

<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>

以上代码现在根据您的要求进行了中心处理。您也可以将样式放在CSS中

Answer 2

那不是button而是input。您可以将它们插入表单中，如下所示：

＆＃13;

<form action="#">
     <input type="text" placeholder="Username" />
     <input type="text" placeholder="Password" />
</form>

＆＃13;

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>

修改

增加占位符的字体大小并使文本居中：

input[placeholder] { font-size: 20px; text-align: center; }

Answer 4

以下是它的工作原理

<input type="text" placeholder="Enter User Name">

我认为您应该将密码类型的密码文本框设置如下

   <input type="password" placeholder="Enter password">

Answer 5

或其他方法，如果你想包含一个小jquery所以它将是旧的浏览器兼容。

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' });
                }
            });
        });

示例：http://jsfiddle.net/fhs43ke8/

在这种情况下，您可以在“defaultval”中编写所需的测试。该脚本包括更改文本颜色，以备不时之需

用户名密码按钮

5 个答案: