当前位置：首页 > article >正文

JavaWeb | 表单开发

article 2024/9/25 9:40:16

- 1.认识表单
- 2.表单的作用
- 3.定义表单
- 4.获得表单提交的元素：
- - “单一表单元素” 数据的获取
  - “捆绑表单元素” 数据的获取
  - “同名表单元素” 数据的获取
- 5.隐藏表单元素
- 6.解决中文乱码问题 :
- - 中文无法显示
  - 在提交过程中显示乱码

1.认识表单

表单是用户和服务器之间进行信息交互的重要手段，通过提交表单，可以将表单中数据提交到服务器端。

2.表单的作用

百度输入界面就是一个表单，用户可以在表单上进行一些输入，在提交时根据用户输入来执行程序在表单中一般会有一个按钮来负责提交。点击按钮，会将内容提交到服务器端。表单元素放在之间。

3.定义表单

表单有如下性质 : (在这里仅根据JSP来介绍表单的基本定义方法)
在表单中可以 输入内容 ,这些输入功能由控件提供,叫作 表单元素。

在表单中一般会有一个按钮负责提交，单击 提交按钮 表单元素中的内容会提交给服务器端。
表单元素放在form标签之间。
<%-- 定义表单 --%>
<%-- 用action属性来指定表单提交到哪个页面 / 携带数据跳转到哪个页面--%>
<form action="/page.jsp">
    请输入账号:<input name = "account" type="text"><br>
    请输入密码:<input name = "password" type="password"><br>
    <input type="submit" value="登录">
</form>

4.获得表单提交的元素：

“单一表单元素” 数据的获取

textForm1.jsp

<%-- 使用method="post"可以再浏览器地址栏上看不出参数，比较安全 --%>
<form action="/书本上代码和知识点/第五章/textForm_result.jsp" method="post">
    请输入学生的模糊资料:<br>
    <input name="stuname" type="type"><br>
    
    <%-- 多行文本框  --%>
    <textarea name="info" rows="5" cols="30"></textarea><br>
    
    <%--  单选框  --%>
    <input name="sex" type="radio" value="boy" checked>男
    <input name="sex" type="radio" value="girl" checked>女<br>
    
    <%--  下拉框 --%>
    <select name="home">
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
        <option value="广东">广东</option>
    </select>
        
    <input type="submit" value="注册">
</form>

textForm_result1.jsp

<%-- 通过request内置对象来获得表单传来的参数--%>
<%
    String stuname = request.getParameter("stuname");
    //使用out内置对象来在页面上输出数据
    out.print("输入的查询的关键字为:" + stuname);

    //获得多行文本框中的数据
    String info = request.getParameter("info");
    out.print("多行文本框中的内容为:" + info);

    //获得单选按钮中的数据
    String sex = request.getParameter("sex");
    out.print("单选框中的内容为:" + sex);

    //获取下拉菜单/下拉框中的内容
    String home = request.getParameter("home");
    out.print("下拉菜单中的内容为:" + home);
%>

“捆绑表单元素” 数据的获取

捆绑表单元素 数据的获取： 获得多个表单元素。

textForm2.jsp

<form action="textForm_result2.jsp" method="post">

    <%--  多选框/复选框  --%>
    请输入自己的信息进行注册:<br>
    请选择你的爱好:
    <input name="fav1" type="checkbox" value="sing">唱歌
    <input name="fav1" type="checkbox" value="dance">跳舞
    <input name="fav1" type="checkbox" value="ball">打球
    <input name="fav1" type="checkbox" value="game">打游戏
    <input type="submit" value="查询">


    <%--  多选列表框  --%>
    <select name="fav2" multiple>
        <option value="sing">唱歌</option>
        <option value="dance">跳舞</option>
        <option value="dance">跳舞</option>
        <option value="ball">打球</option>
        <option value="game">打游戏</option>
    </select>

    <input type="submit" value="注册">
</form>

textForm_result2.jsp

<%-- 通过request内置对象来获得表单传来的参数--%>
<%
    //获得"多选框"中内容 (传来的参数是一个数组)
    String[] fav1 = request.getParameterValues("fav");
    //输出选择的爱好
    for (int i = 0; i < fav1.length; i++) {
        out.print(fav1[i]);
    }

    //输出 "选择多选列表框" 中的内容
    String[] fav2 = request.getParameterValues("fav2");
    for (int i = 0; i < fav2.length; i++) {
        out.print(fav2[i]);
    }
%>

“同名表单元素” 数据的获取

在很多情况下，其他 表单元素也可以设置为同名。例如在注册界面上输入用户的电话号码,最多可以输入4个，则可以用4个同名的文本框进行输入。

multiNameForm.jsp

<%-- 请您输入自己的信息进行注册--%>
<form action="multiNameForm_result.jsp">
    请您输入您的电话号码（最多四个）: <br>
    <%
        for (int i = 1; i <= 4; i++) {
    %>
        号码:<%= i%>: <input name="phone" type="text"><br>
    <%
        }
    %>
    <input type="submit" value="注册">
</form>

multiNameForm_result.jsp

<%
    String[] phone = request.getParameterValues("phone");
    out.print("号码为: ");
    for (int i = 0; i < phone.length; i++) {
        out.print(phone[i]);
    }
%>

5.隐藏表单元素

用 type=“hidden” 设置 隐藏表单元素，它是隐藏在网页上的一个表单元素，并不会在网页上显示出来。

formP1_hidden.jsp

<%
//定义一个变量
    String str = "12";
    int number = Integer.parseInt(str); //用包装类将String类型数据解析为: int类型
%>

该数字的平方为: <%= number * number %><hr>

<%--  method="post" : url上不会显示传递的参数信息  --%>
<form action="formP2.jsp"  method="post">
    
<%--  隐藏表单  --%>
<%--  type="hidden" : 隐藏表单,网页上不会显示该元素  --%>    
<%--   将表单中要传递的值隐藏起来，但跳转到的那个页面还是能接收到这个参数的 --%>
   <input type="hidden" name="number" value="<%= number%>">
    <input type="">
    <input type="submit" value="到达p2">
</form>

formP2.jsp

<%-- 获得隐藏表单中传来的参数--%>
<%
//获得number
    String str = request.getParameter("number");
    int number = Integer.parseInt(str);
%>
该数字的立方为: <%= number * number * number%><br>

6.解决中文乱码问题 :

如果使用的是 Tomcat服务器，在提交过程中经常会出现 中文乱码问题，可通过两个方面解决乱码问题。

中文无法显示

在有些JSP中，中文根本无法显示，通常的原因是 没有把文件头上的字符集设置为中文字符集。
<%@ page language="java" contentType="text/html;charset=gb2312"  %>
<%@ page  language="java" pageEncoding="gb2312" %> 