form表单的一些用法

html中的表单

1.预定义复合框

<!-- 预定义复合框 -->
        <section>
            <label for="course"></label>
            <input type="text" list="course" name="course">
            <datalist id="course">
                <!-- 此<option>使用单标签,与<select>中不同 -->
                <option value="啦啦啦啦">
                <option value="哈哈哈哈">
                <option value="嘎嘎嘎">
            </datalist>
        </section>

2.form表单的用法

• 可以不用放在form标签里面也能提交数据
• 注意：form标签中的id值需要与inp表单中的form值相同

<form action="" id="love"></form>
    <label for=""></label>
    <input type="text" form="love">

3.同一个form表单中的不同按钮分别执行不能文件

• 提示:此时form标签中可以不添加任何属性

  <form>
        <button formaction="01.php" formmethod="GET" formtarget="_blank">登录</button>
        <button formaction="02.php" formmethod="post" formtarget="_blank">注册</button>
    </form>

  4.下拉列表

• 传统方式

  <select name="name" id="">
        <option value="1">张三</option>
        <option value="2">李四</option>
    </select>

• 新方式（便于js操作）

  <select name="name" id="">
        <option value="1" label="张三">
        <option value="2" label="李四">
    </select>

---

• 下拉分组

  <select name="name" id="name">
        <optgroup label="三国">
            <option value="1">张飞</option>
            <option value="2">刘备</option>
            <option value="3">关羽</option>
        </optgroup>
        <optgroup label="水浒">
            <option value="4">金莲</option>
            <option value="5">武松</option>
            <option value="6">西门</option>
        </optgroup>
    </select>

• <select> 属性

序号	属性	描述
1	name	请求参数名称/变量名
2	multiple	是否允许多选(布尔属性)
3	size	允许同时显示的列表项
3	disabled	是否禁用(布尔属性)

• <optgroup>属性

属性	描述
label	列表分组名称

• <option>属性

序号	属性	描述
1	value	请求参数的值
2	label	默认选项文本值
3	selected	是否选中(布尔属性)
3	disabled	是否禁用(布尔属性)

• <select>事件属性

序号	事件属性	描述
1	onchange	当下拉列表选项值发生变化时才会触发
2	onclick	只要点击就会触发(选项值可以不改变)

5.文本域

<textarea name="" id="" cols="30" rows="10" placeholder="请随便输入"></textarea>

• 常用属性

序号	属性	描述
1	cols	文本域可视宽度
2	rows	文本域可输入的行数
3	name	文本域参数名称
4	form	绑定所属表单元素
5	minlength	允许输入最小字符长度
6	maxlength	允许输入最大字符长度
7	maxlength	允许输入最大字符长度
8	placeholder	提示信息占位符
9	wrap	换行方式:hard/soft默认
10	disabled	禁用(布尔属性)
11	autofocus	自动获取焦点(布尔属性)
12	autocomplete	自动完成(布尔属性)

• 事件属性

序号	事件	描述
1	onclick	点击时触发
2	onchange	文本被修改时触发
3	onselect	文本被选中时触发