前端开发：表单2（重点）----按钮、下拉列表、文本域、分组

1.按钮控件元素`<button>`常用属性

序号	属性	描述
1	`type`	必须使用预定义的`submit`, `button`, `reset`之一
2	`name`	按钮的唯一名称,与 ID 等效
3	`value`	按钮文本初始值,可通过 JavaScript 修改
4	`disabled`	禁用按钮
5	`form`	按钮所属表单(此时按钮`type`默认类型为`submit`提交)
6	`formaction`	设置不同按钮可将表单数据提交到不同的 URL 处理
7	`form***`	动态设置`<form>`属性值,如`formmethod="GET"`

        <button
         type="submit"
         formaction="login.php"
         formmethod="POST"
         formtarget="_blank"
         >
         登录
        </button>
    </section>
</form>

</code>

2.下拉列表常用属性与事件

下拉列表使用<select> + <optgroup> + <option>组合元素

2.1 `<select>`属性

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

2.2 `<optgroup>`属性

属性	描述
`label`	列表分组名称

2.3 `<option>`属性

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

2.4 `<select>`事件属性

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

<code>

<body>
<form action="">
<section>
<select name="" id="" size="8" multiple onchange="alert(this.value)" onclick="alert(this.value)" >
<optgroup label="前端">
<option value="html5">HTML5</option>
<option value="css3">CSS3</option>
<option value="javascriit">JAVASCRIPT</option>
<option value="jqeruy">JQERUY</option>
</optgroup>
<optgroup label="后端">
<option value="php">PHP</option>
</optgroup>
</select>
</section>
</form>
</body>
</code>

3. 文本域常用属性与事件

<textarea></textarea>
### 3.1 常用属性

| 序号 | 属性 | 描述 |
| —— | ——————— | ———————————— |
| 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 | 自动完成(布尔属性) |

### 3.2 事件属性

| 序号 | 事件 | 描述 |
| —— | ————— | ———————— |
| 1 | onclick | 点击时触发 |
| 2 | onchange | 文本被修改时触发 |
| 3 | onselect | 文本被选中时触发 |
<code>
<body>
<form action="">
<textarea name="stay" cols="50" rows="20" maxlength="100" form="common" placeholder="不超过100字符" onchange="alert('内容改变了,确定吗？')" onselect="this.style.color='red'" >
</textarea>

    <button
    type="submit"
    form="common"
    formaction="login.php"
    formmethod="post"
    >
    提交
    </button>
</form>

</body>
</code>

4. 表单域分组元素常用属性

当表单字段非常多时,分组管理。<fieldset>
它只有一个子元素<legend>,设置分组标题

序号	属性	描述
1	`name`	分组名称
2	`form`	分组所属表单,默认是最近的表单
3	`disabled`	禁用分组(布尔属性)

name,form属性仅供参考,提交参数仍依赖内部控件中的form属性
<code>

<body>
<form action="">
<fieldset>
<legend>基本信息</legend>
<section>
<input type="text" placeholder="姓名" autofocus>
<input type="text" placeholder="性别" >
<input type="mail" placeholder="邮箱">
<input type="password" placeholder="密码">
</section>
</fieldset>

    <fieldset>
        <legend>其他信息</legend>
        <section>
            <input type="text" placeholder="年龄">
            <input type="text" placeholder="部门">
            <input type="text" placeholder="岗位">
        </section>
    </fieldset>
    <button type="submit" formaction="register.php" formmethod="post" formtarget="_blank">
        提交
    </button>
</form>

</body>
</code>

总结：表单元素是HTML中重要的内容，属性多，还有事件，不过万变不离其中。抛开样式，剩下骨干都是大同小异，有套路的。主要是因为不熟悉，多写几遍就有感觉了。老师说过，多看源码、多练习，是必须的。争取上课前再写一次，给自己加油！

1.按钮控件元素<button>常用属性

2.下拉列表常用属性与事件

2.1 <select>属性

2.2 <optgroup>属性

2.3 <option>属性

2.4 <select>事件属性