2024.9.25（周三）

复制代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <title>员工信息</title>
    <style>
        /* 整体页面布局和样式 */
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            background-image: url('img.jpg'); /* 添加背景图片 */
            background-size: cover; /* 使背景图片覆盖整个页面 */
            background-position: center; /* 背景图片居中 */
            background-repeat: no-repeat; /* 不重复背景图片 */
        }

        h1 {
            text-align: center;
            color: #f5f2f2;
        }

        form {
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
            width: 400px;
            margin: 0 auto;
        }

        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        input[type="text"],
        input[type="number"],
        select {
            width: 100%;
            padding: 8px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 3px;
        }

        button {
            background-color: #007BFF;
            color: #fff;
            padding: 10px 15px;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            display: block; /* Ensures button is a block element */
            margin: 0 auto; /* Centers the button */
        }

        button:hover {
            background-color: #0056b3;
        }

        /* 结果展示区域样式 */
        .result-section {
            margin-top: 20px;
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
            width: 400px;
            margin: 0 auto;
        }

        h2 {
            color: #f3f0f0;
        }

        p {
            margin: 5px 0;
        }
    </style>
</head>
<body>

<h1>员工信息</h1>
<form method="post" action="processEmployee.jsp">
    <label for="employee_id">员工 ID</label>
    <input type="text" id="employee_id" name="employee_id" required>

    <label for="team_id">所属班组 ID</label>
    <input type="text" id="team_id" name="team_id" required>

    <label for="name">员工姓名</label>
    <input type="text" id="name" name="name" required>

    <label for="gender">性别</label>
    <select id="gender" name="gender" required>
        <option value="男">男</option>
        <option value="女">女</option>
    </select>

    <label for="hire_date">入职日期</label>
    <input type="text" id="hire_date" name="hire_date" required>

    <label for="position">职位</label>
    <input type="text" id="position" name="position" required>

    <label for="skill_level">技能等级</label>
    <select id="skill_level" name="skill_level" required>
        <option value="初级">初级</option>
        <option value="中级">中级</option>
        <option value="高级">高级</option>
    </select>

    <label for="contact_number">联系电话</label>
    <input type="text" id="contact_number" name="contact_number">

    <button type="submit">提交</button>
</form>

<%-- 结果展示部分 --%>
<%
    String employeeId = request.getParameter("employee_id");
    String teamId = request.getParameter("team_id");
    String name = request.getParameter("name");
    String gender = request.getParameter("gender");
    String hireDate = request.getParameter("hire_date");
    String position = request.getParameter("position");
    String skillLevel = request.getParameter("skill_level");
    String contactNumber = request.getParameter("contact_number");

    if (employeeId != null) {
%>
<div class="result-section">
    <h2>输入结果</h2>
    <p><strong>员工 ID:</strong> <%= employeeId %></p>
    <p><strong>所属班组 ID:</strong> <%= teamId %></p>
    <p><strong>员工姓名:</strong> <%= name %></p>
    <p><strong>性别:</strong> <%= gender %></p>
    <p><strong>入职日期:</strong> <%= hireDate %></p>
    <p><strong>职位:</strong> <%= position %></p>
    <p><strong>技能等级:</strong> <%= skillLevel %></p>
    <p><strong>联系电话:</strong> <%= contactNumber != null ? contactNumber : "无" %></p>
</div>
<%
    }
%>

</body>
</html>
复制代码

 

posted @   记得关月亮  阅读(4)  评论(0)  编辑  收藏  举报
相关博文：
·  2024.9.26（周四）
·  2024.10.7（周一）
·  html表单
·  员工考勤管理系统前端页面
·  关于页面的代码 一般使用模板
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 使用C#创建一个MCP客户端
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列1：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示
SQL AI 助手