用户交互元素
前面,我们学习的 HTML 元素都是用来 展示信息
的。
但是现在的Web网页不仅仅是展示信息的网页,同时还可以是一个交互式的应用程序。
那必须有能够和 用户交互
的 HTML元素,比如可以让用户 输入信息的
本章就讲解一些常用的让 用户交互 HTML 元素。
用户交互元素 是和 js语言紧密相关的,这里我们先了解这些元素的界面呈现特性
后面在学习 js Web应用这个阶段时,会了解到如何代码操作这些元素,比如获取输入的值,设置输入内容等。
input 概述
input
元素是最常见的交互元素之一
比如 单行文本输入框
<input type="text" id="name" value="白月黑羽">
input元素,根据其属性 type
的不同取值,可以界面呈现出不同类型的输入元素,
比如
type="text"
输入单行字符串
type="email"
输入email,非email格式,提交表单前,会有错误提示
type="number"
输入数字,不能输入非数字字符,可以输入负数或者小数点
type="password"
输入密码,缺省不回显在界面上
type="checkbox"
复选框
type="radio"
单选按钮
type="color"
选择颜色值
type="range"
选择范围值
type="date"
日期选择框
type="time"
时间选择框
type="datetime-local"
日期时间选择框
type="week"
选择第几周
type="submit"
提交按钮,点击提交所属表单(form)信息
type="reset"
重置按钮,点击重置所属form输入元素
表单 form
通常,对应某个交互功能的一组用户输入元素,比如输入注册信息,
会放到一个 表单元素 form
中。
如下
<head>
<style>
form {
border : 1px solid gray;
margin : 5rem auto;
width : 400px;
height : 200px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
</style>
</head>
<body>
<form action="/register" method="post">
<div>
<input type="text" name="user_name" placeholder="用户名">
</div>
<div>
<input type="email" name="user_email" placeholder="email" >
</div>
<div>
<input type="submit">
<input type="reset">
</div>
</form>
</body>
上面的form,填入合适的用户名、email地址后,
按F12, 打开开发者工具栏,选择 network 页
然后点击提交按钮,可以发现,有http请求消息,携带用户填入的数据信息,提交到网站服务端了
关于http协议和消息格式,后面讲js语言的时候会有详细讲解。
这里只要知道这是一种网络传输数据的协议就可以了。
这个 http 消息里面
-
请求 method
是 form 的method
属性定义的 -
请求 url
是 form 的action
属性定义的 -
消息体数据格式 是
application/x-www-form-urlencoded
消息体数据格式由参数
enctype
指定。本例中没有填写,缺省值就是
application/x-www-form-urlencoded
上例中,如果填写的
user_name=asef user_email=1750696907@qq.com
对应 urlencoded格式的 消息体内容就是
user_name=asef&user_email=1750696907%40qq.com
字段之间用
&
隔开,每个字段是字段名=字段值
的格式字段名就是输入元素的
name
属性的值
消息体格式参数
enctype
的值 还可以是:-
multipart/form-data
这个值通常用在 form 中有 input 类型是file, 上传文件数据的时候
-
text/plain
纯文本格式,上例中,对应消息体内容就是
user_name=asef user_email=1750696907@qq.com
如果你希望更灵活的数据格式,比如 json, 就得自己写 js 代码来实现了,后面js教程中有讲解。
-
注意:其实使用js代码,也可以直接获取各个输入元素里面的用户输入内容,并不一定需要把这些元素放在form中。
但是使用form 会带来额外的好处,比如语义的清晰性,字段的自动检查(比如email格式等) 输入框按回车键自动提交等等。
所以还是推荐尽量使用form
form提交后,就是发送了一个 POST HTTP请求,当前浏览器的访问的网址就变成了 属性 action
指定的url地址
如果你只是想发送异步Ajax请求,并不想更新网址,怎么办?
一种方法是,上面说的,不用form了,直接使用js代码获取用户输入内容,使用js发送Ajax请求。
另外一种方法,仍然使用form,因为我们想利用form的自动检查等等好处
额外通过js代码,指定form提交事件处理函数,进行处理,如下
<!DOCTYPE html>
<html>
<head>
<style>
form {
border : 1px solid gray;
margin : 30% auto;
width : 400px;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script>
window.onload = e => {
// 指定form提交事件处理函数
$("#form_reg").submit(function(e) {
// 阻止后续缺省的form提交行为
e.preventDefault();
// 获取表单数据,使用js代码发送Ajax请求
var form = $(this);
var actionUrl = form.attr('action');
$.ajax({
type: "POST",
url: actionUrl,
data: form.serialize(), // form数据序列化
success: function(data){
alert(data); // 响应数据
}
});
})
}
</script>
</head>
<body>
<form action="/register" method="post" id="form_reg">
<div>
<input type="text" name="user_name" placeholder="用户名">
</div>
<div>
<input type="email" name="user_email" placeholder="email" >
</div>
<div>
<input type="submit">
<input type="reset">
</div>
</form>
</body>
</html>
input - text、email、password
最常见的 input 类型 就是 type="text"
, text 也是 默认
的type属性
text 表示 这个input 元素 单行文本框
,是用来输入单行字符串的。
其它的type,比如 email、password 也是单行文本输入
当input 是text、email、password类型时,还有一些其它常用属性,比如:
-
value
指定了输入框初始文字内容,用户可以输入改变其内容,也可以通过 js 代码修改和获取
比如
<input type="text" value="白月黑羽" />
-
maxlength
输入框 最多 可输入字符数。
-
minlength
输入框 最少 可输入字符数。
在表单中,提交时,如果数量少于minlength,会有错误提示
-
placeholder
输入框为空时显示的一个示例值。
-
readonly
只要有该属性,表示输入框中的内容为只读。
-
size
一个数字,指示输入框有多少个字符宽度。
比如
<!DOCTYPE html>
<html>
<head>
<style>
form {
border : 1px solid gray;
margin : 5% auto;
width : 400px;
height: 200px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
</style>
</head>
<body>
<form action="/register" method="post">
<div>
<input type="text" name="user_name"
minlength="4"
maxlength="20"
size="20"
placeholder="用户名">
</div>
<div>
<input type="password" name="user_name"
minlength="4"
maxlength="10"
size="10"
placeholder="密码">
</div>
<div>
<input type="email" name="user_email"
minlength="8"
maxlength="20"
size="20"
placeholder="x@x.com" >
</div>
<div>
<input type="text" name="for_test"
readonly
value="只读测试">
</div>
<div>
<input type="submit">
<input type="reset">
</div>
</form>
</body>
</html>
input - number
input 类型为 number
,表示输入的是数字
数字输入框在获取输入焦点或者鼠标移到上方时,会有上下增减数值箭头按钮出现,可以点击 或者 按上下方向键 进行数字的增减
number类型的input,常用属性有:
-
value
指明输入框的初始值
比如
<input type="number" value="100" />
-
placeholder
输入框为空时显示的一个示例值
比如
<input type="number" placeholder="请输入年龄" />
-
max
输入框 可输入数字最大值,超过该值时会有错误提示,
点击增加箭头,不会超过该数值
比如
<input type="number" max="10" />
-
min
输入框 可输入数字最小值,小于该值时会有错误提示,
点击减少箭头,不会小于该数值
比如
<input type="number" max="10" min="5"/>
-
readonly
只要有该属性,表示输入框中的内容为只读。
-
step
一个数字,表示输入框数字的增减单位,
指示输入框点击上下箭头时,会按这个step为粒度增减。
当输入的数字不是该值的倍数时,会有错误提示
比如
<input type="number" step="2"/>
标签 label
我们往往需要给输入元素加上 标签说明,可以使用 label
,
如下
<div>
<label for="name">用户名:</label>
<input type="text" id="name"
name="user_name" placeholder="用户名">
</div>
<br>
<div>
<label for="email">email :</label>
<input type="email" id='email'
name="user_email" placeholder="email" >
</div>
label的for属性的值和哪个输入元素的id值一致,就是关联哪个元素。
点击label,关联的输入元素就会处于输入焦点状态。
多行文本框 textarea
textarea
是多行文本输入框
<label for="desc">个人信息:</label>
<textarea id="desc" name="desc" rows="5" cols="30">我是...</textarea>
和单行输入框不一样,初始内容是放在元素开、闭标签之间的,而不是作为value属性的值
常用的属性有:
- rows/cols
rows
、 cols
属性 分别指定 输入框的行数和列数
- placeholder
placeholder
属性可以指定输入框的提示语
另外 textarea 有 wrap属性,取值为
-
off
一行文字超过文本框宽度时,不换行, textarea元素出现水平滚动条
比如
<textarea rows="5" cols="30" wrap="off" >111111111111111111111111222222222222222222</textarea>
-
soft
一行文字超过文本框宽度时,剩余内容 折到下一行显示,但是实际内容并没有换行符,这是缺省值
-
hard
设置该值时,必须同时指定
cols
属性这样,一行文字超过文本框宽度时,浏览器自动插入换行符 (CR+LF),剩余内容 折到下一行显示
soft 和 hard 的区别,主要是出现在 form 表单中,提交请求时, hard里面会有换行符,而soft并没有换行符
看下面例子
<form action="/register" method="post">
<textarea name="desc-hard" rows="6" cols="20" wrap="hard"
>11111111111111111111111111111111</textarea>
<textarea name="desc-soft" rows="6" cols="20" wrap="soft"
>11111111111111111111111111111111</textarea>
<div>
<input type="submit">
</div>
</form>
按钮 button
前面我们已经学过 input
元素 的type属性为 submit
或者 reset
显示为一个按钮
但是那个按钮文字内容都是固定的,中文语言环境下,显示为 提交
和 重置
如果我们要定制按钮上显示的文字该怎么办呢?
可以使用 button
元素
比如,上面的内容可以改为:
<div>
<button>注册</button>
<input type="reset">
</div>
button元素有type属性,取值可以是
-
submit
这是缺省值,所以点击上面的按钮,一样可以提交表单数据到服务端
-
reset
就像
<input type="reset">
一样可以重置from里面的其它控件值 -
button
没有缺省行为,通常点击动作是配合js代码进行处理
单选 input - radio
如果你要让用户在一批选项中只能选择其中一个,适合使用 单选按钮 <input type="radio">
比如
<div>您的性别是
<div>
<input type="radio" id="female" name="gender" value="a">
<label for="female">女</label>
</div>
<div>
<input type="radio" id="male" name="gender" value="b" checked>
<label for="male">男</label>
</div>
</div>
注意:一组 radio 的 name
属性必须一致,这样,浏览器才知道哪些 radio是一组的,其中只能选中一个
checked
属性出现,代表该选项初始状态为选中。
label 标签的 for
属性值 关联的是 相同id值 的 radio 元素。
上例中,所属表单提交时,消息体中数据如下
gender=b
就是 : name属性的值=选中的value属性的值
复选 input - checkbox
如果你要让用户在一批选项中可以选择多个,可以使用 复选元素 <input type="checkbox">
比如
<div>选择你要学习的语言
<div>
<input type="checkbox" id="Python" name="Python" value='1'>
<label for="Python">Python</label>
</div>
<div>
<input type="checkbox" id="JavaScript" name="JavaScript" value='2'>
<label for="JavaScript">JavaScript</label>
</div>
<div>
<input type="checkbox" id="C" name="C" value='3'>
<label for="C">C</label>
</div>
<div>
<input type="checkbox" id="Java" name="java" value='4' checked>
<label for="Java">Java</label>
</div>
</div>
注意:和 radio 不一样, 每个选项 name
属性必须不一致
checked
属性出现,代表该选项初始状态为选中。
label 标签的 for
属性值 关联的是 相同id值 的 radio 元素。
上例中,勾选Python、C、Java 这3项, 提交表单时,消息体中数据如下
Python=1&C=1&java=on
就是 : name属性的值=选中的value属性的值
如果没有value属性,等号右边的值为 on
没有勾选的选项不会出现在消息数据中
选择框 select
选择选项,还可以用专门的选择框元素 select
比如
<div>选择学科
<select name="subjects" multiple size="10">
<optgroup label="编程语言">
<option value="C">C</option>
<option value="Java" selected>Java</option>
<option value="Javascript">Javascript</option>
</optgroup>
<optgroup label="应用方向">
<option value="autotest" selected>自动化测试</option>
<option value="gui">图形界面</option>
<option value="webdev" disabled>web开发</option>
</optgroup>
</select>
</div>
select 元素的 size
属性指定选项框的行数
select 元素的 multiple
属性出现,代表该选择框是多选,所有选项直接呈现在界面上。按Ctrl键点击元素可以多选
如果没有 multiple
属性, 代表该选择框是单选
如果没有 multiple
属性, 也没有 size
属性,点击选择框,所有选项以下拉列表方式呈现,点击选项选中, 选中选项呈现在选择框里,如下所示
<div>选择学科
<select name="subjects" >
<optgroup label="编程语言">
<option value="C">C</option>
<option value="Java" selected>Java</option>
<option value="Javascript">Javascript</option>
</optgroup>
<optgroup label="应用方向">
<option value="autotest" selected>自动化测试</option>
<option value="gui">图形界面</option>
<option value="webdev" disabled>web开发</option>
</optgroup>
</select>
</div>
optgroup
元素作为 select 的子元素,可以把选项分为几个组。
该元素不是必须的。
option
对应一个个的选项
option 元素的 selected
属性出现,表示该项一开始默认是选中状态
option 元素的 disable
属性出现,表示该项当前不可选择
上例中,勾选C、Java、自动化测试、图形界面 这4项, 提交表单时,消息体中数据如下
subjects=C&subjects=Java&subjects=autotest&subjects=gui
就是 : select元素name属性的值=选中的option元素value属性的值
没有选择的选项不会出现在消息数据中