struts2 UI标签示例-优快云博客

本文展示了常用的HTML UI标签，包括文本框、文本区域、单选按钮、复选框、文件上传、提交按钮、下拉列表、双联动列表、上下载动列表框、选项转移列表，以及相关属性和用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

常用UI标签：

Textfield标签输出一个HTML单行文本输入控件

Textarea标签输出一个HTML多行文本输入控件

Radio标签输出单选按钮

checkboxlist标签即复选框

file标签用于上传文件（accept属性，指出接受文件的MIME类型）

Submit标签输出一个按钮

Select标签输出一个下拉列表框

doubleselect标签输出关联的两个HTML列表框，产生联动效果

updownselect标签创建一个带有上下移动的按钮的列表框

optiontransferselect标签创建一个选项转移列表组建

下面是一个完整的示例：

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%> <%@ taglib prefix="s" uri="/struts-tags"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<a href="http://www.w3.org/TR/html4/loose.dtd">http://www.w3.org/TR/html4/loose.dtd</a>"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>struts2UI标签示例</title> </head> <body>

<hr size="3" color="blue"> Textfield标签输出一个HTML单行文本输入控件，等价于HTML代码&lt;input type=”text”&gt;: <s:form action="××××" method="post" theme="xhtml"> <s:textfield name="username" label="用户名" value="张三" maxlength="12" size="20" /> </s:form>

<hr size="3" color="blue"> Textarea标签输出一个HTML多行文本输入控件，等价于HTML代码：&lt;textarea /&gt; <s:textarea name="comment" label="个人简介" rows="3" cols="15" wrap="true" />

<hr size="3" color="blue"> Radio标签输出一个HTML多行文本输入控件，等价于HTML代码：&lt;textarea /&gt; <s:radio label="性别" name="gender" list="#{'male':'男','female':'女'}" />

<hr size="3" color="blue"> checkboxlist标签即复选框 <s:checkboxlist name="interest" list="#{1:'足球',2:'篮球',3:'排球',4:'游泳'}" label="兴趣爱好" />

<hr size="3" color="blue"> file标签用于上传文件（accept属性，指出接受文件的MIME类型） <s:file name="pic" label="图片" accept="image/bmp,image/png,image/gif,image/jpeg,image/pjpeg" />

<hr size="3" color="blue"> Submit标签输出一个按钮，submit标签和form标签使用可以提供异步表单提交功能(要使用的提交按钮的类型，有效值：input button image): <s:submit type="image" method="login" src="images/login.jpg" /> <s:submit type="button" action="selectTag" method="login" label="登陆" />

<hr size="3" color="blue"> Select标签输出一个下拉列表框，相当于HTML代码中的&lt;select/&gt; 使用name和list属性，list属性的值是一个列表: <s:select label="最高学历" name="education" list="{'高中','大学','硕士','博士'}" /> 使用name和list属性，list属性的值是一个Map: <s:select label="最高学历" name="education" list="#{1:'高中',2:'大学',3:'硕士',4:'博士'}" /> 使用headerKey和headerValue属性设置header选项: <s:select label="最高学历" name="education" list="{'高中','大学','硕士','博士'}" headerKey="-1" headerValue="请选择您的学历" /> 使用multiple属性设置多选和使用size属性设置下拉框可显示的选项个数: <s:select label="最高学历" name="education" list="{'高中','大学','硕士','博士'}" multiple="true" size="3" /> 使用listKey和listValue属性，利用Action实例的属性（property）来设置选项的值和选项的内容: &lt;s:select label="最高学历" name="education" list="educations" listKey="id" listValue="name"/&gt;

<hr size="3" color="blue"> doubleselect标签输出关联的两个HTML列表框，产生联动效果 <s:form name="doubleselect"> <s:doubleselect label="请选择所在的省市" name="province" list="{'山西省','陕西省'}" doubleName="city" doubleList="top == '山西省' ? {'太原市','大同市','长治市','临汾市'} :{'西安市','汉中市','咸阳市','延安市'}" /> </s:form>

<hr size="3" color="blue"> updownselect标签创建一个带有上下移动的按钮的列表框，可以通过上下移动按钮来调整列表框的选项的位置:  <s:updownselect name="books" label="请选择您想选择的书籍" labelposition="top" moveUpLabel="up" moveDownLabel="down" selectAllLabel="all" list="#{1:'Spring2.0宝典' ,2:'轻量级J2EE企业应用实战' ,3:'基于J2EE的Ajax宝典'}" listKey="key" listValue="value" size="3" />

<hr size="3" color="blue"> optiontransferselect标签创建一个选项转移列表组建，它由两个select标签以及它们之间的用于将选项在两个select之间相互移动的按钮组成。表单提交时，将提交两个列表框中选中的选项: <s:optiontransferselect label="最喜爱的图书" name="javaBook" list="{'《Java Web开发详解》', '《Struts 2深入详解》', '《Java快速入门》'}" doubleName="cBook" doubleList="{'《VC++深入详解》', '《C++ Primer》', '《C++程序设计语言》'}" />

<s:optiontransferselect label="最喜爱的图书" name="book1" leftTitle="Java图书" rightTitle="C/C++图书" list="{'《Java Web开发详解》', '《Struts 2深入详解》', '《Java快速入门》'}" headerKey="-1" headerValue="--- 请选择 ---" emptyOption="true" doubleName="book2" doubleList="{'《VC++深入详解》', '《C++ Primer》', '《C++程序设计语言》'}" doubleHeaderKey="-1" doubleHeaderValue="--- 请选择 ---" doubleEmptyOption="true" addToLeftLabel="向左移动" addToRightLabel="向右移动" addAllToLeftLabel="全部左移" addAllToRightLabel="全部右移" selectAllLabel="全部选择" leftUpLabel="向上移动" leftDownLabel="向下移动" rightUpLabel="向上移动" rightDownLabel="向下移动" />

</body> </html>