Struts2中UI标签之表单标签介绍

时间:2022-11-02 08:10:09

1.在Struts2中UI标签的表单标签分为两种:form标签本身和单个表单标签。



2.Struts2表单标签包括:form、textfield、password、radio、checkbox、checkboxlist、select、doubleselect、combobox、optiontransferselect、optgroup、updownselect、textarea、hidden、file、label、submit、token、head、datepicker、reset、richtexteditor 等。

其中这些标签的意义如下:

form:输出一个form表单。

textfield:输出一个单行文本框。

password:输出一个密码框。

radio:输出一个单选框。

checkbox:输出一个复选框。

checkboxlist:输出一个复选框列表。

select:输出一个下拉框。

doubleselect:输出一个双选下拉框部件,第二个下拉框依赖第一个。

combobox:输出一个部件,可以从下拉框的内容填充一个文本框。

optiontransferselect:输出一个选项移动下拉组件,主要是两个下拉框和用来在两个下拉框之间移动选项的按钮。

updownselect:输出一个下拉框控件,带有上下按钮来移动下拉框组件元素。

textarea:输出一个多行文本框。

hidden:输出一个hidden表单字段。

file:输出一个文件选择框。

label:输出一个label。

submit:输出一个submit(提交)表单按钮。

token:输出一个隐藏的字段来防止多次提交表单。

head:输出对应theme的head部分的内容,比如Css和JavaScript的引用。

datepicker:输出一个日期选择部件,使用JavaScript和DOM。

reset:输出一个reset(重置)表单按钮。

richtexteditor:输出一个富文本编辑器。



3.对于Struts2的表单标签,大都是动态来生成HTML代码的,因此有很多的属性都是通用的,也就是大多表单标签都有的一些属性,接下来就来介绍一下:

(1).name属性和value属性:在Struts2的表单标签中的name属性和value属性基本等同于HTML组件的name属性和value属性,但有些不同的地方:Struts2的表单标签在动态生成HTML代码时,如果标签没有设置value属性的话,就会从值栈中按照name获取相应的值,把这个获取到的值设置成生成的HTML组件的value属性值。

(2).其他通用属性:除了上面的name属性和value属性之外,大多数Struts2的表单标签还有几组通用属性:

~~与css相关的属性:

cssClass:指定生成的HTML组件的class属性。

cssStyle:指定生成的HTML组件的style属性,使用内联的css属性。

cssErrorClass:指定验证失败时引用的css属性。

cssErrorStyle:指定验证失败时引用的内联css属性。


~~与触发事件相关的属性:

onblur:指定生成的HTML组件失去焦点时触发的事件。

onchange:指定生成的HTML组件内容改变时触发的事件。

onclick:指定生成的HTML组件被单击时触发的事件。

ondbclick:指定生成的HTML组件被双击时触发的事件。

onfocus:指定生成的HTML组件获得焦点时触发的事件。

onkeydown:指定在生成的HTML组件中按下键盘时触发的事件。

onkeypress:指定在生成的HTML组件中按下并释放键盘时触发的事件。

onkeyup:指定在生成的HTML组件中释放键盘时触发的事件。

onmousedown:指定在生成的HTML组件中按下鼠标时触发的事件。

onmousemove:指定在生成的HTML组件中鼠标移动时触发的事件。

onmouseout:指定鼠标移动出生成的HTML组件时触发的事件。

onmouseover:指定鼠标移动入生成的HTML组件时触发的事件。

onmouseup:指定释放鼠标按键时触发的事件。

onselect:指定生成的HTML组件中选中区域改变时触发的事件。


~~与悬浮提示相关的属性:

jsTooltipEnabled:是否允许用JavaScript来生成悬浮提示。

tooltip:悬浮提示的内容。

tootipDelay:悬浮提示出现的延迟时间,以毫秒为单位。

tooltipIcon:悬浮提示使用的图标的URL路径。


~~其他来源于html的属性:

accesskey:指定快捷键,如果设置这个属性为x,按Alt+x就可以快速定位到这个生成的HTML组件。

disabled:生成的HTML组件是否可用。

id:指定生成的HTML组件的id。

tabindex:指定生成的HTML组件的tab顺序的索引。

title:指定生成的HTML组件的标题信息。


~~与提示文本相关的属性:

label:用来显示在HTML组件前的文本。

key:同label一样,也是用来显示在HTML组件前的文本,但是其内容取自国际化信息。

labelposition:标签文本显示的位置,可以选择top或left。


~~与模板和主题相关的属性:

template:指定使用的模板。

templateDir:指定使用的模板所在的目录。

theme:指定使用的主题。


~~与是否为必填项相关的属性:

required:指定此生成的HTML组件是否为必填项。

requiredposition:指定此生成的HTML组件是必填项时提示信息显示的位置,可以选择left或right。



4.接下来分别对一些常用的表单标签进行介绍:

(1).form标签:form(表单)标签是所有UI组件中最特别的一个,其它的UI组件要与服务器交互数据,必须放在这个标签内。这个标签也是在编写服务器端应用的时候最常用的一个标签,几乎所有的交互页面都可以看见它的影子。

form标签的属性如下表所示:

名称 是否必需 默认值 类型 说明
action 当前的action String 指定提交的action的名字,不要添加.action后缀
namespace 当前的命名空间 String 指定提交的action所属的名称空间
method post String HTML表单的method属性,取值为get或post
enctype String 上传文件时,设为multipart/form-data
focusElement String 指定某个表单元素的id,当页面加载时,该元素具有焦点
validate Boolean 是否执行客户端验证,只有使用xhtml主题或ajax主题时才有效


(2).单行文本框textfield标签:单行文本框是表单域中最常见,textfield标签对应着HTML的<input type="text"/>,用于生成单行文本。

除了上面列出的各种常见通用属性,textfield标签还有几个其它的属性:

名称 是否必需 默认值 类型 说明
maxlength Integer 文本输入控件可以输入字符的最大长度
readonly false Boolean 当该属性的值为true时,用户不能在文本控件中输入文本
size Integer 指定文本输入控件的可视尺寸


(3).password标签:即密码框,用来输入一段单行文本,但是不会明文显示,而是用掩码代替。password标签对应<input type="password"/>。

除了上面列出的各种常见通用属性,password标签还有几个其它的属性:

名称 是否必需 默认值 类型 说明
maxlength Integer 口令输入控件可以输入字符的最大长度
readonly false Boolean 当该属性的值为true时, 用户不能在口令控件中输入文本
size Integer 指定口令输入控件的可视尺寸
showPassword false Boolean 是否显示密码,当为true时,密码被显示。除非特殊需求,否则不要将该属性设为true


(4)submit标签:submit标签输出一个提交按钮。submit标签和form标签一起使用可以提供异步表单提交功能,submit标签可以输出以下三种类型提交按钮:

input:等价于:<input type="submit"/> 

image:等价于:<input type="image"/>

button:等价于:<input type="button"/>

除了上面列出的各种常见通用属性,submit标签还有几个其它的属性:

名称 是否必需 默认值 类型 说明
type input String 要使用的提交按钮的类型,有效值为:input、button、image
src String 为image类型的提交按钮设置图片地址,该属性对input和button类型的提交按钮无效
action String 指定处理提交请求的action
method String 指定处理提交请求的action的方法


(5).select标签:用来输出一个html列表框,等价于:<select><option></option></select>。

除了上面列出的各种常见通用属性,select标签还有几个其它的属性:

名称 是否必需 默认值 类型 说明
list Collection、Map、Enumeration、Iterator、array 要迭代的集合,使用集合中的元素来设置各个选项,如果list的属性为Map的话,则Map的key成为选项的value,Map的value会成为选项的内容
listKey String 指定集合对象中的哪个属性作为选项的value
listValue String 指定集合对象中的哪个属性作为选项的内容
headerKey String 设置当用户选择了header选项时,提交的value,如果使用该属性,不能为该属性设置空值
headerValue String 显示在页面中header选项的内容
emptyOption false Boolean 是否在header选项后面添加一个空选项

multiple

size


false


Boolean

Integer

是否多选

显示的选项个数


(6).optgroup标签:作为select的子标签,用来生成一组选项。一个下拉列表框中可以包含多个选项组,可以在一个<s:select>标签中使用多个<s:optgroup>标签。

optgroup标签的主要属性有:

~list:用于生成下拉框选项的集合。

~listKey:生成的选项的value属性。

~listValue:生成的选项显示的文字。

~label:用于生成选项组的文本。


(7).radio标签:用来生成一系列的单选框,用户只能选择其中的一个。Struts2的radio标签对应于HTML的<input type="radio"/>。

除了上面列出的各种常见通用属性,radio标签还有几个其它的属性:

~list:用于生成单选框的集合,必须配置。

~listKey:生成的radio的value属性。

~listValue:生成的radio后面显示的文字。

这三个属性一定要配合使用,由list属性指定从哪个集合中获得元素,由listKey属性指定获得元素之后使用元素的哪个属性作为生成的<input type="radio"/>的value属性,由listValue属性指定生成的<input type="radio"/>后的给用户看的文字。


(8).checkboxlist标签:复选框组用来生成一系列复选框,用户可以选择其中的零到多个,Struts2的checkboxlist标签用来生成一组<input type="check"/>。

这个标签和上面介绍的radio标签的属性极其类似,除上面列出常见通用属性,其主要属性有:

~list:用于生成复选框的集合。

~listKey:生成的checkbox的value属性。

~listValue:生成的checkbox后面显示的文字。

这三个属性的用法与radio标签的那三个属性相同。


(9).doubleselect标签:doubleselect标签是select标签的扩展,当有大量的选项要给用户做选择时,可以使用这个标签。例如需要用户先选择国家,再选择省份,再选择市等等更多选择时,可以使用doubleselect这个标签。其中和select不同的地方,doubleselect标签的第一个下拉框是一个分组的列表可以通过list属性来指定。通过使用JavaScript等方法,第二个下拉框会随着第一个下拉框的选择不同而不同。

doubleselect标签的属性为:

属性 数据类型 是否必须 描述
list Collection 列出的内容,可以是表达式
listKey String 列表的Key的表达式
listValue String 列表value的表达式
doubleList Collection 用来对所有列表列表项求值的表达式
doubleListKey String 列表的Key的表达式
doubleListValue String 列表value的表达式
doubleName String 用来映射到第二个下拉框的表单的名字
doubleValue Object 第二个下拉框的表单元素的值
headerKey String 如果选择header仅提交第一个下拉框
headerValue String 用户看到的header选项的内容,仅对第一个适用
emptyOption Boolean 表格和内容之间是否置空格,对第一个下拉框
multiple Boolean 设为TRUE就允许用户选择多个值
size String 设定下拉框的长度



(10).combobox标签:Struts2的combobox标签用于生成一个文本框和一个下拉框,下拉框出现在文本框的下面,在最终提交的时候只提交文本框的输入值,下拉框用于在其选项改变时,也就是onchange事件被触发时,把自身的被选中项的值赋到文本框上。
combobox的属性分别来自文本框和下拉框:
~来自文本框的属性:
maxlength:单行文本框中所能容纳的最大文本长度。
size:单行文本框自身的长度。
readonly:单行文本框是否只读。

~来自下拉框的属性:
list:用于生成下拉框的集合。
listKey:生成的选项的value属性。
listValue:生成的选项显示的文字。


(11).checkbox标签:用来输出一个HTML复选框,等价于HTML代码:<input type="checkbox"/>。


(12).updownselect标签:用来生成一个可以*上下移动选项的下拉框。生成选项的用法和Struts2的select标签一样,都是由list、listKey、listValue三个属性来设置。

名称 必须 默认值 类型 描述
list Collection、Map、Enumeration、Iterator、array 要迭代的集合,使用集合中的元素来设置各个选项,如果list的属性为Map的话,则Map的key成为选项的value,Map的value会成为选项的内容
listKey String 指定集合对象中的哪个属性作为选项的value
listValue String 指定集合对象中的哪个属性作为选项的内容
headerKey String 设置当用户选择了header选项时,提交的value,如果使用该属性,不能为该属性设置空值
headerValue String 显示在页面中header选项的内容
emptyOption false Boolean 是否在header选项后面添加一个空选项
multiple false Boolean 是否多选
size Integer 显示的选项个数
moveUpLabel   String 设置向上移动按钮上的文本
moveDownLabel   String 设置向下移动按钮上的文本
selectAllLabel   String 设置向全部选择按钮上的文本
allowMoveUp Boolean 设置是否使用向上移动按钮
allowMoveDown Boolean 设置是否使用向下移动按钮
allowSelectAll Boolean 设置是否使用全部选择按钮

这里只需要了解关于上下操作的几个属性:
~allowMoveUp:是否显示“上移”按钮,默认为显示。
~allowMoveDown:是否显示“下移”按钮,默认为显示。
~allowSelectAll:是否显示“全选”按钮,默认为显示。
~moveUpLabel:上移按钮显示的文本。
~moveDownLabel:下移按钮显示的文本。
~selectAllLabel:全选按钮显示的文本。


(13).optiontransferselect标签:用来生成两个下拉框,这两个下拉框左右放置,有按钮可以控制,将选项在两个下拉框之间转移,在每个下拉框下还有按钮,可以像updownselect标签那样控制选项上下移动。

optiontransferselect标签的主要属性可以分为4组:
~~控制左下拉框名字以及数据来源:
name:左下拉框的name属性。
list:用于生成左下拉框的集合。
listKey:生成左下拉框的选项的value属性。
listValue:生成左下拉框的选项显示的文字。
headerKey:在左下拉框所有的选项前再额外加一个选项作为其标题,headerKy设置的是标题的value属性。
headerValue:在左下拉框所有的选项前再额外加一个选项作为其标题,headerValue设置得是标题的显示文字。


~~控制右下拉框名字以及数据来源:
doubleName:右下拉框的name属性。
doubleList:用于生成右下拉框的集合。
doubleListKey:生成右下拉框的选项的value属性。
doubleListValue:生成右下拉框的选项显示的文字。
doubleHeaderKey:在右下拉框所有的选项前再额外加一个选项作为其标题,headerKy设置的是标题的value属性。
doubleHeaderValue:在右下拉框所有的选项前再额外加一个选项作为其标题,headerValue设置得是标题的显示文字。


~~控制两个下拉框之间的左右移按钮:
allowAddAllToLeft:指定是否出现“全部移到左边”按钮。
allowAddToLeft:指定是否出现“移到左边”按钮。
allowAddToRight:指定是否出现“移到右边”按钮。
allowAddAllToRight:指定是否出现“全部移到右边”按钮。
addAllToLeftLabel:指定“全部移到左边”按钮上显示的文本。
addAllToRightLabel:指定“全部移到右边”按钮上显示的文本。
addToLeftLabel:指定“移到左边”按钮的上的文本。
addToRightLabel:指定“移到右边”按钮的上的文本。


~~控制两个下拉框分别的上下移按钮。
allowUpDownOnLeft:指定左边下拉框是否出现上下移按钮。
allowUpDownOnRight:指定右边下拉框是否出现上下移按钮。
leftUpLabel:指定左边下拉框上移按钮上显示的文本。
leftDownLabel:指定左边下拉框下移按钮上显示的文本。
rightUpLabel:指定右边下拉框上移按钮上显示的文本。
rightDownLabel:指定右边下拉框下移按钮上显示的文本。
allowSelectAll:指定两个下拉框是否显示选中全部按钮。




5.接下来附上我写的一个例子,文章地址为: http://blog.csdn.net/u012561176/article/details/45077533 。



6.以上内容仅供大家学习参考,谢谢!