HTML 基础知识
1.1 常用属性
序号 |
属性 |
描述 |
1 |
type |
必须使用预定义的submit ,button ,reset 之一 |
2 |
name |
按钮的位移名称,与ID等效 |
3 |
value |
按钮文本初始值,可通过JavaScript修改 |
4 |
disabled |
禁用按钮 |
5 |
form |
按钮所属表单(此时按钮type 默认类型为submit 提交) |
6 |
formaction |
设置不同按钮可将表单数据提交到不同的 URL 处理 |
7 |
formmethod |
动态设置<form> 属性值,如formmethod="GET" |
8 |
formtarget |
设置数据接收页面打开方式分别为_self 和_blank |
1.2 示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>按钮元素</title>
<style>
form {
padding: 20px;
width: 350px;
box-shadow: 0 0 8px #888;
border-radius: 10px;
box-sizing: border-box;
margin: auto;
background-color: lightskyblue;
display: grid;
gap: 15px;
}
form > section {
display: grid;
grid-template-columns: 60px 1fr;
}
h3 {
text-align: center;
}
section:last-of-type {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 10px;
}
button {
height: 30px;
border: none;
outline: none;
}
button:hover {
background-color: lightseagreen;
color: white;
cursor: pointer;
}
</style>
</head>
<body>
<h3>登录/注册</h3>
<form action="">
<section>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" required />
</section>
<section>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required />
</section>
<section>
<button formaction="login.php" formmethod="POST" formtarget="_blank">
登录
</button>
<button formaction="register.php" formmethod="GET" formtarget="_blank">
注册
</button>
</section>
</form>
</body>
</html>
1.3 效果图
1.4 运行效果
http://211.149.219.93:90/0404/button.html
2. 下拉列表元素 <select>
- 下拉列表使用
<select>
+ <optgroup>
+ <option>
组合元素实现 - 参数名
name
定义在<select>
中,参数值value
,定义在<option>
中
2.1 <select>
属性
序号 |
属性 |
描述 |
1 |
name |
请求参数名称/变量名 |
2 |
multiple |
是否允许多选(布尔属性) |
3 |
size |
允许同时显示的列表项 |
3 |
disabled |
是否禁用(布尔属性) |
2.2 <optgroup>
属性
2.3 <option>
属性
序号 |
属性 |
描述 |
1 |
value |
请求参数的值 |
2 |
label |
默认选项文本值 |
3 |
selected |
是否选中(布尔属性) |
3 |
disabled |
是否禁用(布尔属性) |
2.4 <select>
事件属性
序号 |
事件属性 |
描述 |
1 |
onchange |
当下拉列表选项值发生变化时才会触发 |
2 |
onclick |
只要点击就会触发(选项值可以不改变) |
2.5 示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>表单中的下拉列表</title>
</head>
<body>
<form action="">
<!-- 当前默认选项值是"CSS3", 点击CSS3不会触发change事件,除此之外都会触发 -->
<!-- click事件不在乎当前值是否发生变化, 只要点击一定触发, 注意与change事件的区别 -->
<select
name="lang"
id="lang"
size="8"
multiple
onchange="alert(this.value)"
onclick="alert(this.value)"
>
<optgroup label="前端">
<option value="html5">HTML5</option>
<option value="css3" selected>CSS3</option>
<option value="javascript">JavaScript</option>
</optgroup>
<optgroup label="后端">
<!-- 使用label属性,可省略选项文本,并将option转为单标签 -->
<option value="php" label="PHP"> </option>
<option value="mysql" label="MySQL"></option>
<option value="laravel" label="Laravel"></option>
</optgroup>
</select>
</form>
</body>
</html>
2.6 效果图
2.7 运行效果
http://211.149.219.93:90/0404/select.html
3. 多行文本域元素<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 |
文本被选中时触发 |
提示: <textarea>
是双标签,没有value
属性,标签内部的文本就是参数值
3.3 示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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: blueviolet;
cursor: pointer;
}
</style>
</head>
<body>
<form action="" id="common"></form>
<!-- onchang:当内容改变时触发 -->
<!-- onselect:当内容被选中时触发 -->
<textarea
name="replay"
cols="30"
rows="10"
minlength="5"
maxlength="50"
form="common"
placeholder="不能超过50个字"
onchange="alert('内容改变了')"
onselect="this.style.color = 'red'"
>
hello,word
</textarea
>
<button
type="submit"
form="common"
formaction="register.php"
formmethod="POST"
>
提交
</button>
</body>
</html>
3.4 效果图
3.5 运行效果
http://211.149.219.93:90/0404/textarea.html
4. 表单域分组元素<fieldset>
4.1 常用属性
序号 |
属性 |
描述 |
1 |
name |
分组名称 |
2 |
form |
分组所属表单,默认是最近的表单 |
3 |
disabled |
禁用分组(布尔属性) |
name
,form
属性仅供参考,提交参数仍依赖内部控件中的form
属性
4.2 示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>表单域分组元素</title>
<style>
body {
display: grid;
row-gap: 15px;
}
fieldset {
color: lightseagreen;
border-radius: 6px;
border: 2px solid lightseagreen;
}
fieldset > section {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 15px;
}
input {
border: none;
outline: none;
border-bottom: 1px solid #666;
background-color: transparent;
}
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>
<form action="" id="register"></form>
<!-- 第一个表单分组 -->
<fieldset name="base" form="register">
<legend>基本信息</legend>
<section>
<input
type="email"
name="email"
placeholder="你的邮箱"
form="register"
autofocus
/>
<input
type="password"
name="pasw1"
placeholder="你的密码"
form="register"
/>
<input
type="password"
name="pasw2"
placeholder="重复密码"
form="register"
/>
</section>
</fieldset>
<!-- 第二表单分组 -->
<fieldset name="base" form="register">
<legend>选填信息</legend>
<section>
<input
type="text"
name="nickname"
placeholder="你的昵称"
form="register"
/>
<input
type="number"
name="age"
min="0"
max="120"
placeholder="你的年龄"
form="register"
/>
</section>
</fieldset>
<button
type="submit"
form="register"
formaction="register.php"
formmethod="POST"
formtarget="_blank"
>
提交
</button>
</body>
</html>
4.3 效果图
4.4 运行效果
http://211.149.219.93:90/0404/fieldset.html
5 总结
- 学习button标签的常用属性,与input标签中
type=button
的用法区别。 - 学习下拉列表select标签元素的常用属性与事件,常用事件有
onchange
和onclick
。 - 学习文本域<textarea>元素常用属性与事件,了解<textarea>事件属性的用法。
- 学习表单域分组元素<fieldset>用法,一般用在表单字段过多时,进行分组管理