Java Web开发-----注册登录页面开发实验报告
实验报告1
课程名称： Java Web开发实验 实验类型： 设计型
实验项目名称： 注册登录页面开发
一、实验目的
1. 掌握基本的html表单的使用。
2. 掌握css的使用。
3. 掌握最基本的界面元素使用方法
二、主要仪器设备（必填）
硬件：台式计算机
软件：记事本、EditPlus等编辑软件均可
三、操作方法和实验步骤
第一步：
创建一个文本文件命名为register.html。包含一个表单，用于用户输入用户名、邮箱、密码和确认密码。
第二步：
使用input，label，script，css等组件书写一个完整的注册页面html代码和登录页面的完整html代码。
第三步：
运行html代码即双击register.html和login.html文件
运行结果：
注册页面如下：
登录页面如下：
四、实验结果和分析
（粘贴实验的代码，以及运行结果的截图）
|
register.html |
|
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <title>注册页面</title> <style> body { font-family: Arial, sans-serif; background-color: #f4f4f4; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .login-form { background: white; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); width: 350px; } .login-form h2 { margin-top: 0; text-align: center; } .login-form input[type="text"], .login-form input[type="password"] { width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ccc; border-radius: 3px; } .login-form button { width: 100%; padding: 10px; background: #5cb85c; color: white; border: none; border-radius: 3px; cursor: pointer; } .login-form button:hover { background: #4cae4c; } </style> </head> <body> <div class="login-form"> <h2>注册</h2> <form action="/your-server-side-handler" method="post"> <label for="username">用户名:</label> <input type="text" id="username" name="username" placeholder="用户名" required /> <label for="usermail">邮箱:</label> <input type="text" id="usermail" name="usermail" placeholder="邮箱" required /> <label for="password">密码:</label> <input type="password" id="password" name="password" placeholder="密码" required /> <label for="confirm-password">确认密码:</label> <input type="password" id="confirm-password" name="confirm-password" placeholder="确认密码" required /> <button type="submit">注册</button> </form> </div> </body> </html> |
|
login.html |
|
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>登录页面</title> <style> body { font-family: Arial, sans-serif; background-color: #f4f4f4; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .login-form { background: white; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, .1); width: 350px; } .login-form h2 { margin-top: 0; text-align: center; } .login-form input[type="text"], .login-form input[type="password"] { width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ccc; border-radius: 3px; } .login-form button { width: 100%; padding: 10px; background: #007bff; color: white; border: none; border-radius: 3px; cursor: pointer; } .login-form button:hover { background: #0056b3; } .register-link { text-align: center; margin-top: 10px; } .register-link a { color: #007bff; text-decoration: none; } </style> </head> <body> <div class="login-form"> <h2>登录</h2> <form action="/your-server-side-handler" method="post"> <label for="username">用户名:</label> <input type="text" id="username" name="username" placeholder="用户名" required> <label for="password">密码:</label> <input type="password" id="password" name="password" placeholder="密码" required> <button type="submit">登录</button> </form> <div class="register-link"> 没有账号？<a href="register.html">立即注册</a> </div> </div> </body> </html> |
- 讨论、心得
通过本次实验，我掌握了HTML表单的基本使用方法以及如何利用CSS进行页面样式设计，在创建注册页面的过程中，我学会了如何使用`<form>`标签来构建表单，并通过`<input>`、`<label>`等标签实现用户输入界面的设计。例如，为了收集用户名、邮箱、密码和确认密码信息，我使用了不同类型的`<input>`标签（如`type="text"`用于文本输入，`type="email"`用于邮箱输入，`type="password"`用于密码输入），并结合`<label>`标签为每个输入框提供说明文字。在代码的书写过程中，要尤为注意最后一个标签往往是</>的形式。
Agent 垂直技术社区，欢迎活跃、内容共建。
更多推荐
30
0- 0
已为社区贡献6条内容
所有评论(0)