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

中国IT动力,最新最全的IT技术教程

最新100篇 | 推荐100篇 | 专题100篇 | 排行榜 | 搜索 | 在线API文档

当前位置：> Bea专区 > BEA Workshop

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

作者:肖菁时间:2006-08-04 13:12 出处:bea.com.cn 责编:月夜寒箫

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

　　　表单是用于收集用户输入的主要途径，也是页面显示的重要内容。表单控件包括文本框(包括单行文本框、密码框、隐藏框和多行文本)、单选框、多选框、下拉框、按钮（包括普通按钮、提交按钮和取消按钮），表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>

关闭本页