1.type
- submit 提交
- button 单纯的一个按钮
- reset 重置
注意:按钮的type必须使用预定义的这些。默认情况下type是选择submit。
2.name
- 按钮的唯一名称,与id同效果。
- 发送到服务器上显示的名字。
3.value
- 按钮的初始值,可以通过javaScript进行修改。
4.disabled
- 禁用按钮
- 按钮所属表单的id值。
- 设置表单提交的处理脚本,分为GEN与POST类型。
- 设置表单提交类型。
- 设置表单打开网页的方式
- 分别为_selfb本页打开 ;_blank新页面打开; _parent父页面打开 _top顶层页面打开。
<section>
<!-- 注册与登录,使用不同的脚本进行处理,并动态设置提交类型,打开方式 -->
<button
type="submit"
formaction="login.php"
formmethod="POST"
formtarget="_blank"
>
登录
</button>
<button
type="submit"
formaction="register.php"
formmethod="GET"
formtarget="_blank"
>
注册
</button>
</section>
下拉列表(select)的常用属性与事件。
属性
序号 |
属性 |
描述 |
1 |
name |
参数的名子或变量名 |
2 |
multiple |
是否允许多选择(布尔) |
3 |
size |
允许同时显示的列表项 |
4 |
disabled |
是否禁用(布尔属性) |
事件
序号 |
事件 |
描述 |
1 |
onchange |
当下拉列表选项值发生变化时才会触发 |
2 |
onclick` |
只要点击就会触发(选项值可以不改变) |
下拉列表使用<select> + <optgroup> + <option>组合元素实现
参数名name定义在<select>中,参数值value,定义在<option>中.
<form action="">
<!-- 当前默认选项值是"CSS3", 点击CSS3不会触发change事件,除此之外都会触发 -->
<!-- click事件不在乎当前值是否发生变化, 只要点击一定触发, 注意与change事件的区别 -->
<select name="" id="" size="8" multiple>
<optgroup label="分组标题1">
<option value="请求参数值">HTML5</option>
<option value="请求参数值2" selected>CSS3</option>
<option value="请求参数值3" disabled>JavaScript</option>
<!-- 使用label属性,可省略选项文本,并将option转为单标签 -->
<option value="请求参数值" label="ECMScript6"> </option
><option value="jquery" label="jQuery"> </option
></optgroup>
<optgroup label="分组标题2">
<option value="请求参数值4" label="PHP"> </option
><option value="请求参数值5" label="MySQL"> </option
><option value="请求参数值6" label="Laravel"> </option
></optgroup>
</select>
</form>
文本域(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 |
onclic |
点击时触发 |
2 |
onchang |
文本被修改时触发 |
3 |
onselec |
文本被选中时触发 |
<textarea>是双标签,没有value属性,标签内部的文本就是参数值
<textarea
name="reply"
id=""
cols="30"
rows="10"
minlength="5"
maxlength="50"
form="common"
placeholder="不超过50字符"
onchange="alert('内容改变了')"
onselect="this.style.color='red'"
>
表单域分组元素<fieldset>
- 当表单字段非常多时,分组管理很有必要,例如将必填项与选填项分开
- 它只有一个子元素
<legend>
,设置分组标题
常用属性
序号 |
属性 |
描述 |
1 |
name |
分组名称 |
2 |
form |
分组所属表单,默认是最近的表单 |
3 |
disabled |
禁用分组(布尔属性) |
name,for`属性仅供参考,提交参数仍依赖内部控件中的form属性
<!-- 提交设置通过<button>元素完成 -->
<form action="" id="register"></form>
<!-- 表单域分组1 -->
<fieldset name="base" form="register">
<legend>基本信息</legend>
<section>
<input
type="email"
name="email"
placeholder="您的邮箱"
form="register"
autofocus
/>
</section>
</fieldset>
<!-- 表单域分组2 -->
<fieldset name="other" form="register">
<legend>选填信息</legend>
<section>
<input
type="text"
name="nickname"
placeholder="您的呢称"
form="register"
/>
</section>
</fieldset>
<button
type="submit"
form="register"
formaction="register.php"
formmethod="POST"
formtarget="_blank"
>
提交
</button>