![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：这个课件, 你可以留着当字典用的, 目前记住一些常用的就可以, 但是要知道有哪些属性可用, 如果不知道, 可能要走不少弯路, 结果写了半天代码, 才发现原来一个属性就可以解决, 例如想给不同的按钮设置不同的提交类型, 如果不知有formmethod属性, 可能用js要写几十行行代码
Collection
Collection
<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" |
<code>
<form>
<section>
<button
type="submit"
formaction="register.php"
formmethod="POST"
formtarget="_blank"
>
注册
</button>
<buttontype="submit"formaction="login.php"formmethod="POST"formtarget="_blank">登录</button></section></form>
</code>
下拉列表使用<select> + <optgroup> + <option>组合元素
<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 |
只要点击就会触发(选项值可以不改变) |
<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>
<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>
<buttontype="submit"form="common"formaction="login.php"formmethod="post">提交</button></form>
</body>
</code>
<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中重要的内容，属性多，还有事件，不过万变不离其中。抛开样式，剩下骨干都是大同小异，有套路的。主要是因为不熟悉，多写几遍就有感觉了。老师说过，多看源码、多练习，是必须的。争取上课前再写一次，给自己加油！
天蓬老师