基本表单的开发

最新推荐文章于 2025-03-04 15:35:16 发布

转载最新推荐文章于 2025-03-04 15:35:16 发布 · 134 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/chuiyuan/blog/275351

文章标签：

#javascript #python #ViewUI

本文详细介绍了HTML表单的基本概念及其元素，包括文本框、密码框、多选文本框等，并探讨了如何通过JavaScript进行表单验证及解决提交过程中的乱码问题。

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

2019独角兽企业重金招聘Python工程师标准>>>

一。定义表单

表单有如下性质

可以输入一些内容，叫表单元素

一般都有一个按钮负责提交

单击提交后，表单元素中的内容会提交给服务器

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

如下：

<form>
请输入号码：<input name="account" type ="text"><br>
请输入密码 ： <input name= "password" type= "password"><br>
<input type ="submit"  value="登录">
</form>

表单中的内容会提交给服务器，如何确定提交给服务器端的那个页面呢？可以用 action属性来确定。

改上面的

<form action ="page.jsp">

那么 page.jsp 中如何得到提交过来的内容呢。用的是request对象。

二。单一表单元素数据的获取

单一表单指的是表单元素送给服务器时，只是一个变量。

（1）获得文本框中的数据

实际中可以根据传递的值查询数据库。

如果输入的是中文，不能正常显示，后面不规则讲怎么办。下面的都是英文的。

我们可以看到，提交的内容在浏览器的地址上都可以看到，因为默认是 get ,不安全，怎么办呢，方法是在表单中，将属性method 改成 post .

get 和post 是提交请求的两种方法。

（2）获得密码框中的数据

<input name ="password" type="password"> <br>

不会显示密码明文。

(3)获得多选文本框中的数据

<textarea name= "info" rows="5" cols="30"></textarea>

(4)获得单选按钮中的数据

  请您选择性别：
    <input name= "sex" type="radio"  value="boy"  checked> 男
    <input name ="sex" type ="radio"  value="girl" >女<br>

提交过去的是value 而不是后面的汉字。

(5)获取下拉菜单中的数据

  <select name ="home">
    <option value = "beijing">北京</option>
     <option value = "shanghai">上海</option>
      <option value = "wuhan">武汉</option>
    </select>

三。一些问题

(1)用javascrept进行验证

有时候，要会输入的内容作一些验证，比如输入用户名不能为空，因此，当我们点击提交时，不能马上提交，而要先验证，这里要用到javascript ，

因此，提交按钮不能设定为 submit ,而应该是 button .

<body>
  <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 name="account"  type= "text" ><br>
		请输入密码：
		<input name ="password" type ="password"> <br>
		<input type="button"  value="登录" onClick="validate()"> 
	</form>
</body>

（2）提交过程中显示乱码

当我们把汉字提交给服务器时，服务器认为是iso-8859编码，而在网页上显示的是 gb2312 编码，不能兼容，有三种方法解

1. 将其转换成 gb2312

这个方法要对每一个字符串进行转码，很麻烦。

 <% 
 String name = request.getParameter("name");
 if (name!=null){
   name = new String (name.getBytes("ISO-8859-1"), "gb2312");
   out.println(name);
   }
   %>

2. 直接修改 request 的编码

这样就不用再对每一个字符串进行转码

 <% 
 request.setCharacterEncoding("gb2312");
 String name = request.getParameter("name");
 if (name!=null){
   //name = new String (name.getBytes("ISO-8859-1"), "gb2312");
   out.println(name);
   }
   %>

注意：

要在取出值前进行设置，表单的提交方法应该是post ,且在每一个页面中都要进行设置，也比较复杂。

3 使用过虑器

可以对整个web 运用进行设置。

转载于:https://my.oschina.net/chuiyuan/blog/275351