HTML学习笔记13-HTML表单

一、什么是表单(form)

用于收集用户信息

二、什么是表单元素

表单元素指的是不同类型的input元素。输入框、单选框、复选框、按钮等

三、input标签的常见类型

1.输入框

1.1 type="text"

作用：用于输入明文信息

语法：

<form>
    明文输入框：<input type="text">
</form>

1.2 maxlength="最大长度"

作用：用于定义输入框的最大输入长度

语法：

    <!--定义输入框的最大长度为5-->
    明文输入框：<input type="text" maxlength="5">

1.3 type="password"

作用：用于定义暗文输入框

语法：

暗文输入框：<input type="password">

1.4 value="默认值"

作用：用于设置输入框的默认值

语法：

    <!--输入框添加默认值123-->
    有默认值输入框：<input type="text" value="123">

2.单选框

2.1 type="radio"

作用：用于定义单选框

语法：

    <!--定义单选框-->
    单选框：
    <input type="radio"> 男
    <input type="radio"> 女

2.2 name="值"

作用：name相同的单选框只能勾选一个

语法：

    <!--定义单选框，name相同的单选框只能勾选一个-->
    单选框：
    <input type="radio" name="gender"> 男
    <input type="radio" name="gender"> 女

2.3 checked

作用：用于定义单选框的默认勾选

语法：

    <!--单选框默认勾选男-->
    单选框：
    <input type="radio" name="gender" checked> 男
    <input type="radio" name="gender"> 女

3.复选框

3.1 type="checkbox"

作用：用于定义复选框

语法：

    复选框：
    <input type="checkbox">足球
    <input type="checkbox">篮球
    <input type="checkbox">羽毛球

注意：复选框的默认勾选与单选框相同

4.按钮

4.1 type="button"

作用：用于定义普通按钮

语法：

<input type="button" value="登录">

4.2 type="image"

作用：用于定义图片按钮

语法：

    <!--图片按钮,src用于指定图片所在路径-->
    <input type="image" src="images/2.jpg">

4.3 type="reset"

作用：用于清空表单的内容

语法：

    <!--重置按钮，默认按钮名称为重置，可通过value属性进行修改-->
    <input type="reset" value="清空">

4.4 type="submit"

作用：用于提交表单内容。form标签的action属性指定提交的服务器。input标签含name属性的表单内容都可以提交。

语法：

    <!--提交按钮，用于向服务器提交表单数据。
    1.在form标签的action属性中指定服务器的地址
    2.在表单元素添加name属性，表示该数据需要提交到服务器
    3.默认名称为提交，可通过value属性进行修改
    -->
    <input type="submit" value="登录">

4.5 type="hidden"

作用：隐藏域，用于在用户无感知的情况下，向服务器提交数据

语法：

    <!--隐藏域，用于偷偷的向服务器提交数据，用户无感知-->
    <input type="hidden" name="测试" value="123">

5.label

作用：将文字和输入框进行关联，点击文字时，输入框会聚焦

语法1：

1. 给输入框定义id属性
2. 给文字添加label语义
3. 将label标签的for属性值定义为输入框id属性的值

<label for="account">登录：</label><input type="text" id="account">

语法2：

将要关联的文字和输入框用同一个label进行修饰。假如此时有两个输入框，用户名和密码，需要将用户名和密码输入框进行关联，语法2是无法实现的，只能通过语法1实现。

<label>登录：<input type="text"></label>

6.datalist

作用：给输入框定义待选列表

语法：

1. 定义一个输入框
2. 定义一个datalist
3. 给datalist定义id属性
4. 将datalist id属性的值赋给输入框的list属性

    车型：<input type="text" list="cars">
    <datalist id="cars">
        <option>奥迪</option>
        <option>奔驰</option>
        <option>奥拓</option>
    </datalist>

四、非input标签

1.select标签

作用：用于定义下拉框

语法：

    <select>
        <!--用于定义下拉框的列表分类-->
        <optgroup label="北京">
            <option>房山区</option>
            <!--selected="selected"用于定义下拉框的默认选项-->
            <option selected="selected">朝阳区</option>
        </optgroup>
    </select>

2.textarea标签

作用：用于定义多行输入框

语法：

    <!--cols属性设置textarea标签的宽，rows属性设置textarea标签的高-->
    <textarea cols="30" rows="10"></textarea>