关于前端css中input框的介绍

对于input框，在前面使用label标签有什么好处？

下面来看一个例子：

<form action="" >
    <span>用户名</span>
    <input type="text" name="username">
</form>

以下是效果图：

我们换成label标签后：

<form action="" >
    <label for="username">用户名</label>
    <input type="text" name="username" id="username">
</form>

效果图如下：

我们可以看出，用span和label标签装上文字放在input框的前面，两种方式的页面效果都是一样的。
但是唯一不同的是，当我们点击label标签中的文字时，输入框里面的会自动跳出光标（效果如下），而用span标签，则达不到这样的效果

这就是label标签与input框进行了关联，即label标签里面的for的值等于input标签里面的id的值。

接下来再介绍几个关于input的属性：

autofocus： 自动获取光标
value：设置默认值时使用
placeholder:提示作用
maxlength=“10” ：表示最大10个字符
name ：规定名称，方便后台获取
disabled：禁用

autofocus： 自动获取光标

使用autofocus ，打开网页，输入框中就已经可以看到光标了。

<form action="" >
    <label for="username">用户名</label>
    <input type="text" name="username" id="username" autofocus>
</form>

placeholder:提示作用

<form action="" >
    <label for="username">用户名</label>
    <input type="text" name="username" id="username" placeholder="请输入用户名">
</form>

disabled：禁用

 <form action="" >
        <label for="username">用户名</label>
        <input type="text" name="username" id="username" placeholder="请输入用户名" disabled>
    </form>
</body>

此时输入框变了颜色，被禁用后，不能进行编辑。