Java Web实验七：使用JSP实现商城注册页面

最新推荐文章于 2024-04-28 21:01:38 发布

爱编程的松子

最新推荐文章于 2024-04-28 21:01:38 发布

阅读量706

点赞数 10

分类专栏： Java Web 文章标签： java 前端开发语言

本文链接：https://blog.csdn.net/jianguosongzi/article/details/137356706

版权

Java Web 专栏收录该内容

11 篇文章 8 订阅

订阅专栏

实验七使用JSP实现商城注册页面

一、实验目的

1. 学会用JSP编写和运行网页页面，理解其运行原理；

2. 理解JSP页面（page）指令和动作的语法格式，并熟练使用；

3. 理解JSP中常用的内置对象，并熟练使用。

二、实验内容

使用JSP实现商城注册页面的设计以及功能实现，注册页面如图所示：

其中，性别是单选框，购物偏好项是复选框，信息填写完成后，如果发现信息填写有误，可以点击“重填”按钮，一键清空已填信息，如果点击“注册”按钮，则将请求转发到登录页面login.jsp，如下图所示：

三、实验结果（源代码、运行截图）

register.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <style>
        section h1 {
            text-align: center;
            margin-left: 90%;
            font-size: 2em;

        }
        .form-container {
            text-align: left;
            margin-left: 40%;
            vertical-align: middle; /* 垂直居中对齐 */
            display: inline-block; /* 使标签和输入框在同一行显示 */

        }
        .form-group {
            margin-bottom: 15px; /* 每个表单组之间的间距 */
        }



        .form-group label {
            display: inline-block; /* 使得标签成为行内块级元素 */
            width: 100px; /* 标签宽度，确保对齐 */
            text-align: right; /* 文本右对齐 */
            margin-left: -50px;
            vertical-align: top; /* 与输入框顶部对齐 */
        }
        .form-group input,
        .form-group select {
            vertical-align: middle; /* 与标签垂直居中对齐 */
            margin-left: 10px; /* 左侧间距，以便与标签分隔开 */
        }




    </style>
</head>
<body>
<div class="form-container">
    <h1>用户注册</h1>
    <form action="register.jsp" method="post">
        <div class="form-group">
            <label for="username">用户名:</label>
            <input type="text" id="username" name="username" placeholder="请输入用户名">
        </div>
        <div class="form-group">
            <label for="password">密码:</label>
            <input type="password" id="password" name="password" placeholder="请输入密码">
        </div>
        <div class="form-group">
            <label for="phone">手机号:</label>
            <input type="text" id="phone" name="phone" placeholder="请输入手机号">
        </div>
        <div class="form-group">
            <label>性别:</label>


                <input type="radio" name="gender" value="1"> 男
                <input type="radio" name="gender" value="2"> 女

        </div>
        <div class="form-group">
            <%--@declare id="preferences"--%><label for="preferences">购物偏好:</label>
            <input type="checkbox" id="pref1" name="preferences" value="books">数码3C
            <input type="checkbox" id="pref2" name="preferences" value="electronics">男装女装<br>
                <%--@declare id="preferences"--%><label for="preferences"></label>
            <input type="checkbox" id="pref3" name="preferences" value="clothes">家具家电
                <input type="checkbox" id="pref4" name="preferences" value="items">生活百货
        </div>
        <div class="form-group">
            <label for="address">收货地址:</label>
            <textarea id="address" name="address" placeholder="请输入收货地址"></textarea>
        </div>

            &nbsp;&nbsp;&nbsp;
            <button type="submit" name="action" value="register">注册</button>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <button type="button" onclick="clearForm()">重填</button>


    </form>
</div>


<script>
    function clearForm() {
        document.querySelector('form').reset();
        // 如果需要重置默认文字
        document.querySelectorAll('input[type="text"], input[type="password"], input[type="tel"], textarea').forEach(function(input) {

        });
    }
</script>
</body>
</html>
<%
    // 检查是否有注册请求
    String action = request.getParameter("action");
    if ("register".equals(action)) {

        request.getRequestDispatcher("login.jsp").forward(request, response);
        return;
    }
%>

login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <style>

        .form-group {
            margin-bottom: 15px; /* 每个表单组之间的间距 */
        }



        .form-group label {
        display: inline-block; /* 使得标签成为行内块级元素 */
        width: 100px; /* 标签宽度，确保对齐 */
        text-align: right; /* 文本右对齐 */
        margin-left: -50px;
        vertical-align: top; /* 与输入框顶部对齐 */
        }
    </style>
</head>
<body>
<h1>用户登录</h1>
<form action="login.jsp" method="post">

        <div class="form-group">
            <label for="username">用户名:</label>
            <input type="text" id="username" name="username" placeholder="请输入用户名">
        </div>
        <div class="form-group">
            <label for="password">密码:</label>
            <input type="password" id="password" name="password" placeholder="请输入密码">
        </div>
    <input type="submit" value="登录">
</form>
</body>
</html>

爱编程的松子

关注

10
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
Java Web实验七：使用JSP实现商城注册页面

2. 理解JSP页面（page）指令和动作的语法格式，并熟练使用；1. 学会用JSP编写和运行网页页面，理解其运行原理；3. 理解JSP中常用的内置对象，并熟练使用。实验七使用JSP实现商城注册页面。
复制链接

扫一扫