自学web前端开发4（HTML）

一、表单标签

登录注册（输入账号、密码等）、填个人信息、搜索等功能需要用表单标签来实现

1.1 input系列

input 是一个单标签，在网页中用于收集用户信息的表单效果

1.1.1 type属性

input 标签可以通过type属性值的不同展示不同的效果

    <p>1 text 文本框，用于输入单行文本</p>
    文本框：<input type="text">
    <br>
    <p>2 password 密码框，用于输入密码</p>
    密码框：<input type="password">
    <br>
    <p>3 radio 单选框，用于多选一</p>
    单选框：<input type="radio">
    <br>
    <p>4 checkbox 多选框，用于多选多</p>
    多选框：<input type="checkbox">
    <br>
    <p>5 file 文件选择，用于之后上传文件</p>
    文件选择：<input type="file">
    <br>
    <p>6 submit 提交按钮，用于提交</p>
    <input type="submit">
    <br>
    <p>7 reset 重置按钮，用于重置</p>
    <input type="reset">
    <br>
    <p>8 不同按钮，默认无功能，需要配合js添加功能</p>
    <input type="button">

效果如下

1.1.2 placeholder属性与占位符

input标签的placeholder属性能在文本框中提示用户输入的内容

    账号：<input type="text" placeholder="请输入账号">
    <br>
    密码：<input type="password" placeholder="请输入密码">

效果如下

1.1.3 单选框radio（name属性和checked属性）

单选的具体属性有

1. name 分组，属性值为组名，有相同属性值的单选为一组
2. checked 默认选中

    性别：<input type="radio" name="gender"> 男 <input type="radio" name="gender"> 女 <input type="radio" name="gender" checked>其他

实际上，多选 checkbox的属性也与之类似，如

    性别：<input type="checkbox" name="gender" checked> 男 <input type="checkbox" name="gender" checked> 女 <input type="checkbox" name="gender" checked>其他

1.1.4 文件选择file(mutiple属性)

file的mutiple属性能控制进行多文件选择

    <input type="file" multiple>

1.1.5 按钮与表单域

三种按钮（type的属性值）

1. submit 提交
2. reset 重置
3. button 普通按钮

这些按钮功能在一个表单域（form）内实现

表单域是一个双标签，控制了一个表单整体

    <form action="">
        <!-- action的属性值是表单信息的发送地址 -->
        账号：<input type="text" placeholder="请输入帐号">
        <br>
        密码：<input type="password" placeholder="请输入密码">
        <br>
        <br>
        <input type="submit"> 
        <input type="reset" value="这个是重置"> 
        <input type="button" value="普通按钮">
    </form>

注意其中的value属性的属性值为按钮内的文字

1.2 button按钮标签

在表单中，可以直接把button作为一个标签（双标签），其type属性值有submit/reset/button等，效果与input的按钮系列相同

    <form action="">
        <!-- action的属性值是表单信息的发送地址 -->
        账号：<input type="text" placeholder="请输入帐号">
        <br>
        密码：<input type="password" placeholder="请输入密码">
        <br>
        <br>
        <button>普通按钮</button>
        <button type="button">也是普通按钮</button>
        <button type="submit">提交按钮</button>
        <button type="reset">重置按钮</button>
        <button type="menu">菜单按钮</button>
    </form>

1.3 select下拉菜单标签

下拉菜单是在网页中提供多个选择项的表单控件

标签组成

• select标签 下拉菜单的整体
• option标签 下拉菜单的每一项

常见属性

• selected：默认选中

    <select>
        <option>北京</option>
        <option>上海</option>
        <option selected>广州</option>
        <option>深圳</option>
    </select>

默认第一个option具有selected属性

1.4 textarea文本域标签

在网页中提供可输入多行的表单控件

标签为textarea（双标签）

常见属性：

• cols：文本域的可见宽度
• rows：文本域的可见高度

注意：实际的设计一般使用CSS

    <form action="">
    <textarea cols="60" rows="30"></textarea>
    <br>
    <button type="reset">重置</button>
    </form>

1.5 label标签

用于绑定内容与表单标签

1.5.1 使用方法一

1. 使用label标签把内容（文本等）包裹起来
2. 在表单标签上添加id属性
3. 在label标签的for属性中设置为对应的id属性

1.5.2 使用方法二

1. 直接把label标签把内容和表单标签一起包裹起来
2. 把label的for属性删除

    性别：
    <input type="radio" name="gender" id="male"><label for="male">男性</label>
    <label><input type="radio" name="gender" id="female">女性</label>

可以实现在点击“男性”或“女性”的文字时选中相对应的表单