表单控件
在之前的学习中,我们已经了解如何使用表单作为用户输入界面。最基本的两种表单组件是和,都可以输入任意文本。但是只有文本输入的交互显然是不够的,当用户输入的值属于某一个固定集合,例如:用户性别:从{“男”,“女”,”保密”}中三选一(必选且只能选一个)
调查类选项:从{"Java", "C", "Python"}中选择任意项(也可以不选)作为自己擅长的编程语言
为了满足这一类选择输入场景,HTML提供了几种不同类型的输入控件:
单选按钮(Radio Buttons)
当用户从若干给定的的选择中选取其一时,就会用到单选框。用户性别可以这样实现:
男
女
效果如下所示:
上述两个Radio Button,因为他们的name属性是一样的,所以二者只有一个可以被选中。
复选框(Checkboxes)
当用户需要从若干给定的选择中选取一个或若干选项时,就会用到复选框。例子:
Java
Python
效果如下所示:
下拉列表(Select)
用户性别只有两种,但是如果选项比较多——例如选择国籍,如果把每一个国家都用Radio Button列出来,显然是不合适的,对于这种情况HTML提供了一种更加友好的输入控件——下拉列表(Select):
1
2
3
4
5
效果如下:
在Servlet中获取表单控件的值
用户输入并提交表单后,服务器收到表单数据并进行处理,那么在Servlet中如何获取这些特殊类型的表单输入数据呢?
单选按钮
单选按钮的情况最简单,由于是多选一,那么本质上和普通的文本输入框在HTTP请求中的编码方式是一样的,例如:
HTTP请求中表单数据编码格式为=(都对应标签属性的值):
gender=male
在Servlet中通过request.getParameter("gender")就可以获取表单数据。
复选框
复选框按钮相对复杂一些,因为可以存在多个同时被选中的值:
Java
Python
此时Java和Python两个选项都被选中,所以表单数据编码是:
lang=java&lang=python
即lang存在两个值,这时在Servlet中需要使用另一个API来获取它们:
String[] values = request.getParameterValues("lang");
下拉列表
与单选按钮的处理方式相同
例子:用户登录表单
大多数网站中,为了防止用户关闭浏览器后需要重新登录,都会在登录表单中设置“下次自动登录”选项,在这一选项被勾选后,一段时间内用户不必重复登录网站,即时浏览器被关闭。
HTML表单
用户登录的表单HTML代码如下:
天码营博客
Username
class="form-control" placeholder="用户名" required autofocus>
Password
class="form-control" placeholder="密码" required>
下次自动登录
登录
其中其中包含一个Checkbox,如果它被勾选,表单提交的POST请求中会包含remember-me=remember-me。
Servlet处理表单请求
String username = req.getParameter("username");
String password = req.getParameter("password");
String[] values = req.getParameterValues("remember-me");
if (values != null && !values[0].isEmpty()) {
//下次自动登录按钮被选中
}
//相关登录逻辑
具体相关的实现逻辑这里暂时省略,在后面的学习中我们会继续来完善登录功能。