技术文章-深入Beehive标签库系列教程(2) - 表单标签：文本框和按钮

新手上路

产品中心

BEA AquaLogic
AquaLogic BPM Suite
AquaLogic Service Bus
WebLogic Platform
WebLogic Server
BEA Workshop
WebLogic Portal
WebLogic Integration
BEA JRockit
WebLogic Event Server
BEA WLCP
更多产品中心

技术中心

SOA
Web Services
Open Source
XML
EJB
JDBC
JMS
Persistence

开发人员社区

在线技术论坛

User Group
dev2dev学堂
dev2dev Live!

dev2dev show
在线学堂
技术文章

论坛集粹

资源

CodeShare
代码库
Security Advisories
Utilities & Tools

关注dev2dev

dev2dev动态
市场活动

培训
电子刊物
书籍

dev2dev@works
Rss Feeds

dev2dev 首页 > 资源中心 > 技术文章

深入Beehive标签库系列教程(2) - 表单标签：文本框和按钮

时间：2006-06-22
作者：肖菁
浏览次数：
本文关键字：Beehive, NetUI, Taglib, 标签, 表单, 教程

文章工具

推荐给朋友

打印文章

　　　　表单是用于收集用户输入的主要途径，也是页面显示的重要内容。表单控件包括文本框(包括单行文本框、密码框、隐藏框和多行文本)、单选框、多选框、下拉框、按钮（包括普通按钮、提交按钮和取消按钮），表1中列举了表单控件和NETUI标签之间的对应关系。

表1 表单控件和NETUI标签对应关系

表单控件	对应标签	说明
单行文本框	netui:textBox
密码框	netui:textBox	password=”true”
隐藏框	netui:hidden
多行文本	netui:textArea
普通按钮	netui:button	type=”button”
提交按钮	netui:button	type=”submit”
取消按钮	netui:button	type=”reset”
单选框	netui: radioButtonGroup和netui: radioButtonOption
多选框	netui:checkBox、netui:checkBoxGroup和netu:checkBoxOption
下拉框	netui:select和netuiOption

　　接下来的几篇文章将结合例子给大家介绍这些netui标签的常用属性、使用方法。

netui:form

　　netui:form标签用于显示一个表单，他的action属性用于设置form的提交目标地址，我们可以使用下面的代码来完成提交给名为begin的Action表单的显示。

<netui:form action=“begin”>
</netui:form>

netui:textbox、netui:hidden、netui:textArea

　　表单中用文本框收集用户输入的文本信息，这些文本的收集方式分为基本文本信息、密码信息和多行文本信息。

　　基本文本信息、密码信息的收集都可以使用netui:textBox标签来完成，用netui:textBox收集密码信息时应该设置标签的password的属性为”true”，

　　多行文本信息的收集则使用netui:textArea标签来完成。

　　还有一种特殊的文本框就是隐藏文本框，用于显示一些用户看不见、但是对当前表单绝对有用的信息，它对应的标签是netui:hidden。

　　我们可以在JSP中使用下面的代码显示简单的文本框。

　　<netui:textBox dataSource=“data1” size=“12” />

　　如果要显示一个密码输入框，我们应该使用下面的代码。

　　<netui:textBox password=“true” dataSource=“data2” size=“12” />

　　要显示隐藏文本框，我们需要使用下面的代码。

　　<netui:hidden dataSource="data1" />

　　我们可以采用如下的代码来显示一个5行40列的多行文本输入框。

　　<netui:textArea cols=“40” rows=“5” dataSource=“data3”/>

　　清单1是显示文本框所有标签的完整代码，另外增加了如何在部分标签上应用css样式的例子。

　　清单1 web\inputTextExamples.jsp


 <%@ page language="java" contentType="text/html;charset=gb2312"%>
 <%@ taglib uri="http://beehive.apache.org/netui/tags-databinding-1.0"
   prefix="netui-data"%>
 <%@ taglib uri="http://beehive.apache.org/netui/tags-html-1.0"
   prefix="netui"%>
 <%@ taglib uri="http://beehive.apache.org/netui/tags-template-1.0"
   prefix="netui-template"%>
 <netui:html>
   <head>
   <title>Form Examples</title>
   <netui:base/>
   <style type="text/css">
   <!--
    .textClass {
    background-color: #CCCCCC;
   }
   -->
   </style>
   </head>
   <netui:body>
    <center>使用标签显示表单的例子</center><BR>
    <netui:form action="begin">
    <%
       // 准备要在文本框中显示的内容
       request.setAttribute("data1", "普通文本框");
       request.setAttribute("data2", "密码框");
       request.setAttribute("data3", "多行文本框\r\n第二行");
    %>
    文本框的例子:<BR>
    <netui:textBox dataSource="data1" /><BR>
    应用了css的文本框：<BR>
    <netui:textBox dataSource="data1"
      style="background:#CCCCCC;"/><BR><BR>
    隐藏文本框的例子:<BR>
       <netui:hidden dataSource="data1" /><BR><BR>
    密码框的例子:<BR>
    <netui:textBox password="true" dataSource="data2" /><BR>
    应用了css的密码框：<BR>
    <netui:textBox dataSource="data2"
      styleClass="textClass"/><BR><BR>
    多行文本框(5行40列)的例子：<BR>
    <netui:textArea cols="40" rows="5" dataSource="data3"/><BR>
    <BR>
    <netui:anchor formSubmit="true">提交</netui:anchor>
    </netui:form>
   </netui:body>
 </netui:html>

netui:button

　　html标准中按钮分为三种：普通按钮（button）、提交按钮(submit)和重置按钮(cancel)，在NETUI中，这三种按钮对应的标签都是netui:button，三种按钮使用netui:button的type属性区分。

　　我们可以在JSP中增加下面的代码，显示提交按钮的例子。

　　<netui:button type=” submit” value=”提交” />

　　在JSP中增加下面的代码可以显示重置按钮。

　　<netui:button type=”reset” value=”取消”/>

　　显示普通按钮可以使用下面的代码。

　　<netui:button type=”button” value=”普通按钮”/>

　　完整的显示按钮和在netui:button中使用JavaScript的例子请参见清单2。

　　清单2 web\inputButtonExamples.jsp


 <%@ page language="java" contentType="text/html;charset=gb2312"%>
 <%@ taglib uri="http://beehive.apache.org/netui/tags-databinding-1.0"
   prefix="netui-data"%>
 <%@ taglib uri="http://beehive.apache.org/netui/tags-html-1.0"
   prefix="netui"%>
 <%@ taglib uri="http://beehive.apache.org/netui/tags-template-1.0"
   prefix="netui-template"%>
 <netui:html>
   <head>
   <title>Form Examples</title>
   <netui:base/>
   </head>
   <netui:body>
    <center>使用标签显示表单的例子</center><BR>
    <netui:form action="begin">
    显示提交按钮的例子:<BR>
    <netui:button type="submit" value="提交" /><BR>
    显示重置按钮的例子:<BR>
    <netui:button type="reset" value="取消"/><BR>
    显示普通按钮的例子：<BR>
    <netui:button type="button" value="普通按钮"/><BR>
    支持JavaScript的普通按钮的例子：<BR>
    <netui:button type="button" value="支持JavaScript的普通按钮" onClick="Javascript:alert('点击按钮调用JavaScript事件');"/><BR>
    </netui:form>
   </netui:body>
 </netui:html>

作者简介
肖菁	肖菁是唯J族(www.vivianj.org)创始人，BEA 杭州User Group负责人，自由撰稿人，开源项目BuildFileDesigner(buildfiledesign.sourceforge.net)和V-Security(v-security.sourceforge.net)创始人。

作者其它文章