一、本课目标

• 掌握表单高级应用的属性及使用场景

将会介绍三种表单的高级应用：

• 隐藏域
• 只读
• 禁用

image.png

二、隐藏域

使用的也是input标签，示例代码如下：

    <p>
            用户名:
            <input type="text" name="name"/>
        </p>
        <p>
            密码：:
            <input type="password" name="password"/>
        </p>
        <p>
            <input type="submit" value="提交"/>
        </p>
        <p>
            <input type="hidden" value="666" name="uesrid"/>
        </p>

结果如下：

image.png

在运行结果里面看不到隐藏域，它的主要作用是给后台提供数据的。当我把form标签的method属性设置为get的时候，当我提交账号和密码的时候，在地址栏里面会出现这样的：

name=123&password=123&uesrid=666

这样我们在不知不觉之中就把一些不想让用户知道的信息提交给了服务器。

三、只读和禁用

image.png

实例代码：

<form action="" method="get">
    <p>用户名：<input type="text" name="name" value="张三" readonly/></p>
    <p>密码：<input type="password" name="pass"/></p>
    <p><input type="submit" value="修改" disabled/></p>
</form>

运行结果：

image.png

分析：使用readonly可以设置为只读，使用disable可以设置为禁用。

注：W3CHTML5标准中，规定对于布尔类型的属性，属性值可以省略。比如上面的readonly和diaabled属性都是布尔类型的属性。

四、表单元素的标注

• 增强鼠标的可用性

• 自动将焦点转移到与该标注相关的表单元素上

  
  
  image.png

示例代码如下：

<p><lable for="pas1">密码：</lable><input type="password" name="pass" id="pass1"/></p>

运行结果：

image.png

分析：当我在浏览器的界面中将鼠标移动到“密码”上的时候，鼠标的箭头直接变为竖线的形式。
另外一种应用形式：

<form>
    请选择性别：
    <lable for="male">男</lable>
    <input type="radio" name="gender" id="male"/>
    <lable for="female">女</lable>
    <input type="radio" name="gender" id="female"/>
</form>

结果：

image.png

分析：用lable标签将“男”包裹起来，然后将for属性指向id。这样鼠标点击男的时候就会直接在后面的选框中选中，不必要一定要点击那个圆框。