1、按钮常用属性
序号 |
属性 |
描述 |
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" |
1.5 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>按钮元素</title>
<style>
h3 {
text-align: center;
}
form {
padding: 20px;
box-sizing: border-box;
width: 350px;
box-shadow: 0 0 8px #888;
border-radius: 10px;
margin: auto;
background-color: #0077aa;
display: grid;
gap: 15px;
}
input {
width: 240px;
height: 25px;
}
label {
font-size: 20px;
}
section:last-of-type {
display: flex;
justify-content: center;
margin-left: 45px;
}
button {
height: 25px;
width: 64px;
border: none;
outline: none;
font-size: 12px;
margin: 0 14px;
}
</style>
</head>
<body>
<h3>登录与注册</h3>
<form action="">
<section>
<label for="tel">手机:</label><input type="tel" name="tel" id="tel">
</section>
<section>
<label for="psd">密码:</label><input type="password" name="psd" id="psd">
</section>
<!--动态设置登录注册,使用不同的脚本进行处理,使用不同方式提交参数-->
<section>
<button type="submit" formaction="login.php" formmethod="POST" formtarget="_blank">登录</button>
<button type="submit" formaction="register.php" formmethod="GET" formtarget="_blank">注册</button>
<button type="reset">重置</button>
<!--<button type="button">button</button>-->
</section>
</form>
</body>
</html>
1.5 代码运行效果展示
http://www.dashushu.club/homework0404/demo1.html
2、下拉列表常用属性与事件:<select>
+ <optgroup>
+ <option>
<select>
:表示是下拉列表<optgroup>
:给下拉列表分组<option>
:下拉列表的值<optgroup label="...">
: 分组名称- 参数名
name
定义在<select>
中,参数值value
,定义在<option>
中
2.1 <select>
属性
序号 |
属性 |
描述 |
1 |
name |
请求参数名称/变量名 |
2 |
multiple |
是否允许多选(布尔属性) |
3 |
size |
允许同时显示的列表项 |
4 |
disabled |
是否禁用(布尔属性) |
5 |
onchange |
事件属性当下拉列表选项值发生变化时才会触发 |
6 |
onclick |
事件属性只要点击就会触发(选项值可以不改变) |
2.2 <option>
属性
序号 |
属性 |
描述 |
1 |
value |
请求参数的值 |
2 |
label |
默认选项文本值 |
3 |
selected |
是否选中(布尔属性) |
3 |
disabled |
是否禁用(布尔属性) |
2.3 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉列表</title>
</head>
<body>
<form action="">
<!--size="10":下拉显示数量-->
<!--onchange="alert(this.value)":当前默认选项值是"北京", 点击北京不会触发change事件,除此之外都会触发-->
<!--onclick="alert(this.value)":click事件不在乎当前值是否发生变化, 只要点击一定触发, 注意与change事件的区别-->
<select
id=""
name=""
multiple=""
onchange="alert(this.value)"
onclick="alert(this.value)"
>
<optgroup label="直辖市">
<option value="" selected>北京</option>
<option value="">天津</option>
<option value="">上海</option>
<option value="">重庆</option>
</optgroup>
<!-- 使用label属性,可省略选项文本,并将option转为单标签 -->
<optgroup label="省份">
<option value="" label="云南">
<option value="" label="贵州">
<option value="" label="四川">
</optgroup>
</select>
</form>
</body>
</html>
2.4 代码运行效果展示
http://www.dashushu.club/homework0404/demo2.html
3、文本域常用属性与事件
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 |
自动完成(布尔属性) |
13 |
onclick |
事件属性点击时触发 |
14 |
onchange |
事件属性文本被修改时触发 |
15 |
onselect |
事件属性文本被选中时触发 |
3.2 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本域</title>
<style>
body {
width: 80%;
margin: auto;
display: grid;
row-gap: 15px;
}
button {
height: 30px;
border: none;
outline: none;
background-color: lightseagreen;
color: white;
}
button:hover {
background-color: orangered;
cursor: pointer;
}
</style>
</head>
<body>
<!-- 表单内部为空,控件全部使用form属性与之绑定 -->
<form action="" id="common"></form>
<!-- change:值改变时触发, select:选中文本时触发 -->
<textarea
name="reply"
id=""
cols="30"
rows="10"
minlength="5"
maxlength="50"
form="common"
placeholder="不超过100字"
onchange="alert('请确认修改')"
onselect="this.style.color='red'"
></textarea>
<!-- 动态设置处理脚本与请求类型 -->
<button
type="submit"
form="common"
formaction="register.php"
formmethod="POST"
>提交</button>
</body>
</html>
3.3 代码运行效果展示
http://www.dashushu.club/homework0404/demo3.html
4、表单域常用属性与事件
- 当表单字段非常多时,分组管理很有必要,例如将必填项与选填项分开
- 它只有一个子元素
<legend>
,设置分组标题
4.1 常用属性
序号 |
属性 |
描述 |
1 |
name |
分组名称 |
2 |
form |
分组所属表单,默认是最近的表单 |
3 |
disabled |
禁用分组(布尔属性) |
name
,form
属性仅供参考,提交参数仍依赖内部控件中的form
属性
4.2 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单域</title>
<style>
body {
display: grid;
row-gap: 15px;
width: 800px;
}
h3 {
text-align: center;
color: red;
}
fieldset {
color: lightseagreen;
border-radius: 6px;
border: 2px solid lightseagreen;
}
fieldset:hover {
background-color: lightcyan;
}
fieldset > section {
display: grid;
grid-template-columns: 1fr;
column-gap: 15px;
}
fieldset > legend {
text-align: center;
}
input {
width: 280px;
border-bottom: 1px solid #666;
background-color: transparent;
margin: 5px;
}
button {
height: 30px;
border: none;
outline: none;
border-radius: 6px;
background-color: lightseagreen;
color: white;
}
button:hover {
background-color: darkorchid;
cursor: pointer;
}
</style>
</head>
<body>
<h3>个人简历表</h3>
<!-- 提交设置通过<button>元素完成 -->
<form action="" id="register"></form>
<!-- 表单域分组-基本信息 -->
<fieldset name="base" form="register">
<legend>基本信息</legend>
<section>
<input type="text" name="email" placeholder="姓名:" form="register" autofocus/>
<input type="tel" name="tel" placeholder="电话:" form="register"/>
<input type="email" name="email" placeholder="您的邮箱:" form="register" autofocus/>
<input type="number" name="wechat" placeholder="微信:" form="register"/>
</section>
</fieldset>
<!-- 表单域分组-工作经历 -->
<fieldset name="other" form="register">
<legend>工作经历</legend>
<section>
<input type="text" name="nickname" placeholder="公司名称" form="register"/>
<input type="text" name="nickname" placeholder="所属部门" form="register"/>
<input type="text" name="nickname" placeholder="岗位" form="register"/>
<input type="text" name="nickname" placeholder="薪资情况" form="register"/>
<textarea name="reply" id="" cols="30" rows="4" minlength="5" maxlength="50"
form="common"
placeholder="职责描述"
></textarea>
</section>
</fieldset>
<!-- 表单域分组-项目经验 -->
<fieldset name="other" form="register">
<legend>项目经验</legend>
<section>
<input type="text" name="nickname" placeholder="项目名称" form="register"/>
<input type="text" name="nickname" placeholder="项目描述" form="register"/>
<textarea name="reply" id="" cols="30" rows="4" minlength="5" maxlength="50"
form="common"
placeholder="不超过100字"
onchange="alert('请确认修改')"
onselect="this.style.color='red'"
></textarea>
</section>
</fieldset>
<!-- 表单域分组-自我评价 -->
<fieldset name="other" form="register">
<legend>自我评价</legend>
<section>
<textarea name="reply" id="" cols="30" rows="4" minlength="5" maxlength="50"
form="common"
placeholder="不超过100字"
onchange="alert('请确认修改')"
onselect="this.style.color='red'"
></textarea>
</section>
</fieldset>
<!-- 表单域分组-附加信息 -->
<fieldset name="other" form="register">
<legend>附加信息</legend>
<section>
<textarea name="reply" id="" cols="30" rows="4" minlength="5" maxlength="50"
form="common"
placeholder="不超过100字"
onchange="alert('请确认修改')"
onselect="this.style.color='red'"
></textarea>
</section>
</fieldset>
<button
type="submit"
form="register"
formaction="register.php"
formmethod="POST"
formtarget="_blank"
>提交</button>
</body>
</html>
4.3 代码运行效果展示
http://www.dashushu.club/homework0404/demo4.html