表单控件

在之前的学习中,我们已经了解如何使用表单作为用户输入界面。最基本的两种表单组件是<input><textarea>,都可以输入任意文本。但是只有文本输入的交互显然是不够的,当用户输入的值属于某一个固定集合,例如:

  1. 用户性别:从{“男”,“女”,”保密”}中三选一(必选且只能选一个)
  2. 调查类选项:从{"Java", "C", "Python"}中选择任意项(也可以不选)作为自己擅长的编程语言

为了满足这一类选择输入场景,HTML提供了几种不同类型的输入控件:

单选按钮(Radio Buttons)

当用户从若干给定的的选择中选取其一时,就会用到单选框。用户性别可以这样实现:

<form>
  <div class="radio">
    <label>
      <input type="radio" name="gender" value="male" checked> 男
    </label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" name="gender" value="female" checked> 女
    </label>
  </div>
</form>

效果如下所示:

Clipboard Image.png

上述两个Radio Button,因为他们的name属性是一样的,所以二者只有一个可以被选中。

复选框(Checkboxes)

当用户需要从若干给定的选择中选取一个或若干选项时,就会用到复选框。例子:

<div class="checkbox">
  <label>
    <input type="checkbox" name="lang" value="java">Java
  </label>
</div>
<div class="checkbox">
  <label>
    <input type="checkbox" name="lang" value="python">Python
  </label>
</div>

效果如下所示:

Clipboard Image.png

下拉列表(Select)

用户性别只有两种,但是如果选项比较多——例如选择国籍,如果把每一个国家都用Radio Button列出来,显然是不合适的,对于这种情况HTML提供了一种更加友好的输入控件——下拉列表(Select):

<select name="select" class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

效果如下:

Clipboard Image.png

在Servlet中获取表单控件的值

用户输入并提交表单后,服务器收到表单数据并进行处理,那么在Servlet中如何获取这些特殊类型的表单输入数据呢?

单选按钮

单选按钮的情况最简单,由于是多选一,那么本质上和普通的文本输入框在HTTP请求中的编码方式是一样的,例如:

<input type="radio" name="gender" value="male" checked>

HTTP请求中表单数据编码格式为<name>=<value>(都对应<input>标签属性的值):

gender=male

在Servlet中通过request.getParameter("gender")就可以获取表单数据。

复选框

复选框按钮相对复杂一些,因为可以存在多个同时被选中的值:

<input type="checkbox" name="lang" value="java" checked>Java
<input type="checkbox" name="lang" value="python" checked>Python

此时Java和Python两个选项都被选中,所以表单数据编码是:

lang=java&lang=python

lang存在两个值,这时在Servlet中需要使用另一个API来获取它们:

String[] values = request.getParameterValues("lang");

下拉列表

与单选按钮的处理方式相同

例子:用户登录表单

大多数网站中,为了防止用户关闭浏览器后需要重新登录,都会在登录表单中设置“下次自动登录”选项,在这一选项被勾选后,一段时间内用户不必重复登录网站,即时浏览器被关闭。

HTML表单

用户登录的表单HTML代码如下:

<form class="form-signin" method="post">
  <h2 class="form-signin-heading">天码营博客</h2>
  <label for="inputUsername" class="sr-only">Username</label>
  <input type="text" id="inputUsername" name="username"
    class="form-control" placeholder="用户名" required autofocus>
  <label for="inputPassword" class="sr-only">Password</label>
  <input type="password" id="inputPassword" name="password"
    class="form-control" placeholder="密码" required>
  <div class="checkbox">
    <label>
      <input type="checkbox" name="remember-me" value="remember-me"> 下次自动登录
    </label>
  </div>

  <button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
</form>其中

其中包含一个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()) {
    //下次自动登录按钮被选中
}
//相关登录逻辑

具体相关的实现逻辑这里暂时省略,在后面的学习中我们会继续来完善登录功能。

登录发表评论 注册

反馈意见