Java EE---表单开发

（一）什么是表单

表单是将用户输入的信息封装提交给服务器，实现与用户的交互。表单是用<form>标签定义的，它类似于一个容器，表单对象必须在表单中才能有效，语法：                                                                                                                                  

表单的作用:

●表单中可以输入一些内容，这些输入功能由控件提供，叫做表单元素;

●表单中一般都有一个按钮负责提交;点击提交按钮，表单元素中的内容会提交给服务器端;

●表单元素放在<form></form>之间。

扩展：

method属性：用于指定哪种方法提交表单数据提交到服务器。默认情况下是get。

get方法将表单内容附在URL地址后面，因此有长度限制（最大8192个字符），而且不安全。

post方法将用户在表单中输入的数据包含在表单主体中，一起提交给服务器，该方法没有信息长度限制，也比较安全。

（1）文本框与密码框

<form>
    姓名：<input type="text" value="" name="userName"/>
    <br>
    密码:<input type="password" value="123456" name="pwd"/>
</form>

（2）单选框与复选框
语法：

<input type="radio" value="单选按钮的值" name="单选按钮的名称" checked>

<form>
 <input type="radio" value="male" name="sex" checked>男
  <input type="radio" value="female" name="sex" >女

</form>

 

<form>
 <input type="checkbox" value="zhangsan" name="lover" checked>张三
  <input type="checkbox" value="lisi" name="lover" >李四
  <input type="checkbox" value="wangwu" name="lover" checked>王五
</form>

（3）按钮

语法：

<form>
<input type="reset" value="按钮的值" name="按钮的名称">重置
  <input type="reset" value="按钮的值" name="按钮的名称">提交
</form>

<form>
姓名：<input type="text" name="userName"/><br>
  <input type="submit" value="提交">
  <input type="reset" value="重置">
  <input type="button" value="关闭" onclick="window.close()"/>
</form>

 （4）文件域：上传文件或照片功能

语法：

<input type="file" name="文件域的名称">

<form action="" enctype="multipart/form-data">
你的靓照：<input type="file" name="fileName"/>

</form>

 （5）下拉列表

语法：

<select name="下拉列表道德名称" size="显示的项数" multiple>
    <option value="选项值1" selected>选项1显示内容</option>
    <option value="选项值2" selected>选项2显示内容</option>
</select>

size用来设定列表在页面中最多现实的项数，当超过这个值时就会出现滚动条。

multiple表示。列表可以进行多项选择。selected是被选中的

 

<select name="下拉列表道德名称" size="显示的项数" multiple>
    <option value="beijing" selected>北京</option>
    <option value="shanghai" selected>上海</option>
    <option value="guangzhou" >广州</option>
    <option value="shenzhen" >深圳</option>
</select>

 （6）文本区：用来输入多行文本

语法：

<textarea name="文本区的名称" cols="列数" rows="行数"></textarea>

cols用于设定文本区的列数，也就是宽度；rows用于设定文本区的行数，也就是高度，当文本区内容超出这一范围时会出现滚动条。

<textarea name="texts" cols="10" rows="10"></textarea>

（二）表单定义、元素值获取

表单一般格式:

表单元素值的获取

用一般按钮取代“提交”按钮的方法

（1）单行文本框数据的获取

<form action="textForm_result.jsp">
	请您输入学生的模糊资料：<BR>
	<input name="stuname" type="text">
	<input type="submit" value="查询">
</form>
<%
	String stuname = request.getParameter("stuname");
	out.println("输入的查询关键字为:" + stuname);
%>

说明：

省略method属性，默认为get方式，在地址栏可见表单元素的取值，不够安全; post可弥补get的不足;输入汉字，也可能出现乱码。

（2）多行文本框数据的获取

<form action="textareaForm_result.jsp" method="post">
       请您输入账号：<input name="account" type="text">
       请您输入密码：<input name="password" type="password">
       请您输入个人信息：<textarea name="info" rows="5" cols="30"></textarea>
       <input type="submit" value="注册">
</form>
<%
	String info = request.getParameter("info");
	out.println("个人信息为:" + info);
%>

 （3）单选钮数据的获取(通常为一组互斥选项中选一个)

<form action="radioForm_result.jsp" method="post">
		请您输入账号：<input name="account" type="text"><BR>
		请您输入密码：<input name="password" type="password"><BR>
		请您选择性别：
		<input name="sex" type="radio" value="boy" checked>男
		<input name="sex" type="radio" value="girl">女<BR>
		<input type="submit" value="注册">
</form>
<%
		String sex = request.getParameter("sex");
		out.println("性别为:" + sex);
%>

说明:所得的选项值不是显示“男”或“女”，而是value的值"boy"”或"girl”，若不指定value值，则为“on”;加上checked，则为默选项。

（4）下拉列表框数据的获取

<form action="selectForm_result.jsp" method="post">
	请您输入账号：<input name="account" type="text"><BR>
	请您输入密码：<input name="password" type="password"><BR>
	请您选择家乡：
	<select name="home">
		<option value="beijing">北京</option>
		<option value="shanghai">上海</option>
		<option value="guangdong">广东</option>
	</select>	
	<input type="submit" value="注册">
</form>
<%            String home = request.getParameter("home");
	out.println("家乡为:" + home);                                      
%>

说明:所得的选项值不是显示“北京”、“上海”、”广东” 而是value的值”beijing”'、”shanghai”、“guangdong”,若不指定value值，则为显示值。

（5）表单注意事项

<script type="text/javascript">
	function validate(){
		if(loginForm.account.value==""){
			alert("账号不能为空!");
			return;
		}
		if(loginForm.password.value==""){
			alert("密码不能为空!");
			return;
		}
		loginForm.submit();
	}
</script>
<form name="loginForm" action="target.jsp " method="post">
	......		
                <input type="button" value="登录" onClick="validate()">	
</form>

 

（6）同名表单元素 

同名表单元素及其值的获取方法什么是同名表单元素? 就是指同一个表单中，多个表单元素的名称相同。 在特定环境中，同名表单元素有意义，例如:填写兴趣、爱好

<input name="fav" type="checkbox" value="sing">唱歌
<input name="fav" type="checkbox" value="dance">跳舞
<input name="fav" type="checkbox" value="ball">打球
<input name="fav" type="checkbox" value="game">打游戏

同名表单元素值的获取方法

同名表单元素包括:复选框、多选列表框、其他同名表单元素等 

获取复选框组的数据

<form action="checkForm_result.jsp" method="post">
	请您选择您的爱好：
	<input name="fav" type="checkbox" value="sing">唱歌
	<input name="fav" type="checkbox" value="dance">跳舞
	<input name="fav" type="checkbox" value="ball">打球
	<input name="fav" type="checkbox" value="game">打游戏<BR>
	<input type="submit" value="注册">
</form>
<%
	String[] fav = request.getParameterValues("fav");
	out.println("爱好为:");
	for(int i=0;i<fav.length;i++){
		out.println(fav[i]);
	}
%>

说明：各选项写入checked,表示选定;(2)若选项未指定value值，则默认为on。

（7）隐藏表单元素

说明:()隐藏表单元素不会在浏览器上显示，但可以通过 request.getParameter("参数名”)方法得到，通过这一方式可以在页与页之间传递信息;(2)在源代码上可以看见，有一定安全隐患