Struts2--表单标签--day06--20200402

表单标签

表单标签将在 HTML 文档里被呈现为一个表单元素。
1.使用表单标签的优点:

  • 表单回显
  • 对页面进行布局和排版

2.标签的属性可以被赋值为一个静态的值或一个 OGNL 表达式。
如果在赋值时使用了一个 OGNL 表达式并把它用 %{} 括起来, 这个表达式将会被求值。
表单应用初体验代码:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 <s:form action="save.do">
  <s:hidden name="userId" ></s:hidden>
  <s:textfield name="userName" label="用户名"></s:textfield>
  <s:password name="password" label="密码"></s:password>
  <s:textarea name="desc" label="描述"></s:textarea>
  <s:submit value="提交"></s:submit> 
 </s:form>
</body>
</html>

查看后台代码为:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 <form id="save" name="save" action="save.do;jsessionid=6BC44C07610F454F89A58322C987AE8C" method="post">
  <table class="wwFormTable">
  <input type="hidden" name="userId" value="" id="save_userId"/>
   <tr>
    <td class="tdLabel"><label for="save_userName" class="label">用户名:</label></td>
    <td><input type="text" name="userName" value="" id="save_userName"/></td>
   </tr>
   <tr>
    <td class="tdLabel"><label for="save_password" class="label">密码:</label></td>
    <td><input type="password" name="password" id="save_password"/></td>
   </tr>
   <tr>
    <td class="tdLabel"><label for="save_desc" class="label">描述:</label></td>
    <td><textarea name="desc" cols="" rows="" id="save_desc"></textarea></td>
   </tr>
   <tr>
    <td colspan="2"><div align="right"><input type="submit" id="save_0" value="提交"/>
    </div></td>
   </tr>
  </table>
 </form>
</body>
</html>

跳转的struts.xml配置。

  <action name="save" class="com.test.UserAction"  method="save">
   <result name="save_suecess">/form-tag.jsp</result>
  </action>

注:页面跳转用户数据基本信息会在页面做回显,原理是从对象栈中的栈顶元素开始往下寻找对应的属性值进行显示,其中password没有回显,如果需要回显需要设置回显属性showPassword。

textfield, password, hidden 标签

在这里插入图片描述

submit 标签

submit 标签将呈现为一个提交按钮。根据其 type 属性的值,这个标签可以提供 3 种呈现效果:

input: <input type=“submit” …/>
button: <input type=“button” …/>
image: <input type=“image” />

在这里插入图片描述

textarea 标签

在这里插入图片描述

checkbox 标签

checkbox 标签将呈现为一个 HTML 复选框元素。该复选框元素通常用于提交一个布尔值
能够解决HTML中checkbox的提交问题:如果该复选框未被选中, 在请求中就不会增加一个请求参数,提交赋值可能会出错.
源代码:

<s:checkbox name="married" label="是否已婚"></s:checkbox> 

转换后代码:

<input type="checkbox" name="married" value="true" checked="checked" id="save_married"/>
<input type="hidden" id="__checkbox_save_married" name="__checkbox_married" value="true" /> 
<label for="save_married" class="checkboxLabel">是否已婚</label>

checkbox 标签有一个 fieldValue 属性,该属性指定的值将在用户提交表单时作为被选中的单选框的实际值发送到服务器.。如果没有使用 fieldValue 属性, 单选框的值将为 true 或 false。

select标签

下拉列表选择框
在这里插入图片描述
1)list, listKey 和 listValue 属性
用例:

<%
  List<City> cities=new ArrayList<City>();
  cities.add(new City(1001,"AA"));
  cities.add(new City(1002,"BB"));
  cities.add(new City(1003,"BB"));
  cities.add(new City(1004,"BB"));
  request.setAttribute("cities",cities);
 %>
 <s:select name="city" list="#attr.cities" listKey="cityId" listValue="cityName" label="请选择城市"></s:select>

或者如下:

 <s:select name="city" list="#request.cities" listKey="cityId" listValue="cityName" label="请选择城市"></s:select>

生成代码:

 <tr>
  <td class="tdLabel"><label for="save_city" class="label">请选择城市:</label></td>
  <td><select name="city" id="save_city">
   <option value="1001">AA</option>
   <option value="1002">BB</option>
   <option value="1003">BB</option>
   <option value="1004">BB</option>
   </select>
  </td>
 </tr>

显示结果:
在这里插入图片描述

optgroup 标签

optgroup 标签对 select 元素所提供的选项进行分组,每个选项有它自己的来源。
在这里插入图片描述
用例:

  <s:select list="{11,12,13,14,15,16,17,18,19,20}"
   headerKey=""
   headerValue="请选择"
   name="age"
   label="Age">
   <s:optgroup label="21-30" list="#{21:21,222:333}"></s:optgroup>
   <s:optgroup label="31-40" list="#{31:31}"></s:optgroup>
  </s:select>

生成结果:

<tr>
    <td class="tdLabel"><label for="save_cities" class="label">请选择城市:</label></td>
    <td><input type="checkbox" name="cities" value="1001" id="cities-1"/>
  <label for="cities-1" class="checkboxLabel">AA</label>
  <input type="checkbox" name="cities" value="1002" id="cities-2"/>
  <label for="cities-2" class="checkboxLabel">BB</label>
  <input type="checkbox" name="cities" value="1003" id="cities-3"/>
  <label for="cities-3" class="checkboxLabel">BB</label>
  <input type="checkbox" name="cities" value="1004" id="cities-4"/>
  <label for="cities-4" class="checkboxLabel">BB</label>
  <input type="hidden" id="__multiselect_save_cities" name="__multiselect_cities" value=""/>    
 </td>
</tr>

radio 标签

一般地, 使用 radio 标签实现 “多选一”,对于 “真/假” 则该使用 checkbox 标签。
在这里插入图片描述
1)list, listKey 和 listValue 属性
用例:

<s:radio name="gender" list="#{'1':'男','0':'女'}" label="性别"></s:radio> 

生成代码:

<tr>
    <td class="tdLabel"><label for="save_gender" class="label">性别:</label></td>
    <td><input type="radio" name="gender" id="save_gender1" value="1"/><label for="save_gender1"></label>
  <input type="radio" name="gender" id="save_gender0" value="0"/><label for="save_gender0"></label>
    </td>
</tr>

显示结果:
在这里插入图片描述

checkboxlist 标签

checkboxlist 标签将呈现一组多选框

在这里插入图片描述
用例:

<%
  List<City> cities=new ArrayList<City>();
  cities.add(new City(1001,"AA"));
  cities.add(new City(1002,"BB"));
  cities.add(new City(1003,"BB"));
  cities.add(new City(1004,"BB"));
  request.setAttribute("cities",cities);
 %>
<s:checkboxlist name="cities" list="#attr.cities" listKey="cityId" listValue="cityName" label="请选择城市"></s:checkboxlist>

生成代码:

<tr>
    <td class="tdLabel"><label for="save_cities" class="label">请选择城市:</label></td>
    <td>
 <input type="checkbox" name="cities" value="1001" id="cities-1"/>
 <label for="cities-1" class="checkboxLabel">AA</label>
 <input type="checkbox" name="cities" value="1002" id="cities-2"/>
 <label for="cities-2" class="checkboxLabel">BB</label>
 <input type="checkbox" name="cities" value="1003" id="cities-3"/>
 <label for="cities-3" class="checkboxLabel">BB</label>
 <input type="checkbox" name="cities" value="1004" id="cities-4"/>
 <label for="cities-4" class="checkboxLabel">BB</label>
 <input type="hidden" id="__multiselect_save_cities" name="__multiselect_cities" value=""/>    
 </td>
</tr>

City类的主要属性:

 private Integer cityId;
 private String cityName;

action类的主要属性:

 private String userId;
 private String userName;
 private String password;
 private String desc;
 private boolean married;
 private List<String> cities;
 <!--注意,如果为String数组无法回显,使用整数数组可以回显,可以用集合进行回显-->
 private Integer gender;
 private Integer age;
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值