HTML学习——用户注册页面
2024-04-17 20:24:38
目录
- 实验一：ＨＴＭＬ应用
- 实现代码如下：
- 初步实现效果：
- 第一次优化后代码如下：
- 第二次优化后代码如下：
- 实验项目完善，加入提交反馈页面，并判断2次密码是否输入正确：
- 实验总结：
实验一：ＨＴＭＬ应用
HTML学习网站推荐：https://www.w3school.com.cn/html/index.asp
实验内容：
请用HTML标签，表单做出以下效果
实现代码如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><base href="<%=basePath%>"><title>新用户注册</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">--><datalist id="学历"> <!-- 用datalist标签做一个学历下拉菜单选项 --><option value="小学"><option value="初中"><option value="高中"><option value="本科"><option value="硕士"><option value="博士"></datalist> <style type="text/css"> <!-- 字体格式 -->.a {font-family: "microsoft sans serif";}.b{font-family: "microsoft yahei";}.c{font-family: "SimSun";}.d{font-family: "SimHei";}.e{font-family: "\5FAE\8F6F\96C5\9ED1";}</style></head><body class="b"> <!-- 整体用字体b，微软雅黑 --><h1 class ="a"><center><font color="red">新用户注册</font></center></h1> <!-- 一级标题居中显示 --><h2 class="c"><center><font color = "blue">请准确填写个人信息，以使我们更好的为你服务</font></center></h2> <!-- 二级标题居中显示 --><center><HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="80%" color=#987cb9 SIZE=3> <!-- 俩头渐变透明的分割线 --><form id="form1" name="forme1" method = "post" action = ""> <!-- 表单 --><table border="1" bordercolor="#FF"> <!-- 表格 --><tr><td colspan="2">注册信息()</td></tr> <!-- 占据两列 --><tr><td>用户名</td><td><input type="text" name="user name" id="user name"></td></tr> <!--用户名文本框 --><tr><td>密码</td><td><input type="password" name="password" id="password"></td></tr> <!--密码框 --><tr><td>密码确认</td><td><input type="password" name="password" id="password"></td></tr> <!--密码框 --><tr><td>性别</td><td><input type="radio" name="sex" value="male" checked> 男 <input type="radio" name="sex" value="female" > 女 </td></tr> <!--单选框 --><tr><td>个人爱好</td><td> <!--复选框 --><input type="checkbox" name="hobby" value="movie"> 电影 <input type="checkbox" name="hobby" value="music"> 音乐 <input type="checkbox" name="hobby" value="coding"> 编程 <br> <input type="checkbox" name="hobby" value="basketball"> 篮球 <input type="checkbox" name="hobby" value="football"> 足球 <input type="checkbox" name="hobby" value="other"> 其他 </td></tr><tr><td>学历</td><td><input list="学历" name="学历"></td></tr> <!--下拉菜单 --><tr><td>备注</td><td><textarea name="message" rows="3" cols="30"></textarea></td></tr> <!--多行文本输入框 --><tr><td colspan="2"><center><input type="submit" value="提交"> <input type="reset" value="重置"> <!--提交重置按钮 --></center></td></tr></table></form><HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="80%" color=#987cb9 SIZE=3> <!-- 俩头渐变透明的分割线 --></center></body>
</html>初步实现效果：
第一次优化后代码如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><base href="<%=basePath%>"><title>新用户注册</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">--><datalist id="学历"> <!-- 用datalist标签做一个学历下拉菜单选项 --><option value="小学"><option value="初中"><option value="高中"><option value="本科"><option value="硕士"><option value="博士"></datalist> <style type="text/css"> <!-- 字体格式 -->.a {font-family: "microsoft sans serif";}.b{font-family: "microsoft yahei";}.c{font-family: "SimSun";}.d{font-family: "SimHei";}.e{font-family: "\5FAE\8F6F\96C5\9ED1";}</style></head><body class="b"> <!-- 整体用字体b，微软雅黑 --><h1 class ="a" style="text-align:center">新用户注册</h1> <!-- 一级标题居中显示 --><h2 class="c" style="text-align:center">请准确填写个人信息，以使我们更好的为你服务</h2> <!-- 二级标题居中显示 --><center><HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="80%" color=#987cb9 SIZE=3> <!-- 俩头渐变透明的分割线 --><form id="form1" name="forme1" method = "post" action = ""> <!-- 表单 --><table border="1" bordercolor="#FF"> <!-- 表格 --><tr><td colspan="2">注册信息()</td></tr> <!-- 占据两列 --><tr><td>用户名</td><td><input type="text" name="user name" id="user name"></td></tr> <!--用户名文本框 --><tr><td>密码</td><td><input type="password" name="password" id="password"></td></tr> <!--密码框 --><tr><td>密码确认</td><td><input type="password" name="password" id="password"></td></tr> <!--密码框 --><tr><td>性别</td><td><input type="radio" name="sex" value="male" checked> 男 <input type="radio" name="sex" value="female" > 女 </td></tr> <!--单选框 --><tr><td>个人爱好</td><td> <!--复选框 --><input type="checkbox" name="hobby" value="movie"> 电影 <input type="checkbox" name="hobby" value="music"> 音乐 <input type="checkbox" name="hobby" value="coding"> 编程 <br> <input type="checkbox" name="hobby" value="basketball"> 篮球 <input type="checkbox" name="hobby" value="football"> 足球 <input type="checkbox" name="hobby" value="other"> 其他 </td></tr><tr><td>学历</td><td><input list="学历" name="学历"></td></tr> <!--下拉菜单 --><tr><td>备注</td><td><textarea name="message" rows="3" cols="30"></textarea></td></tr> <!--多行文本输入框 --><tr><td colspan="2"><center><input type="submit" value="提交"> <input type="reset" value="重置"> <!--提交重置按钮 --></center></td></tr></table></form><HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="80%" color=#987cb9 SIZE=3> <!-- 俩头渐变透明的分割线 --></center></body>
</html>第二次优化后代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>新用户注册</title><style type="text/css"> <!-- 字体格式 -->.a {font-family: "microsoft sans serif";}.b{font-family: "microsoft yahei";}.c{font-family: "SimSun";}.d{font-family: "SimHei";}.e{font-family: "\5FAE\8F6F\96C5\9ED1";}</style></head><body class="b"> <!-- 整体用字体b，微软雅黑 --><center><form id="form1" name="forme1" method = "post" action = ""> <!-- 表单 --><h1 class ="a" style="text-align:center"><font color = "red">新用户注册</font></h1> <!-- 一级标题居中显示 --><h2 class="c" style="text-align:center"><font color = "blue">请准确填写个人信息，以使我们更好的为你服务</font></h2> <!-- 二级标题居中显示 --><!-- <HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="50%" color=#987cb9 SIZE=3> --><!-- 俩头渐变透明的分割线 --><!-- <HR style="border-bottom:2 dashed #987cb9" width="50%" color= red SIZE=2> --><span style="width:1050px;border-bottom:1px red dashed;"></span><table border="1" bordercolor="#FF" align = "center"> <!-- 表格 --><tr><!-- 占据两列 --><td colspan="2" align = "left">注册信息()</td></tr> <tr><!--用户名文本框 --><td>用户名</td><td><input type="text" name="user name" id="user name"></td></tr> <tr><!--密码框 --><td>密 码</td><td><input type="password" name="password1"></td></tr><tr><td>密码确认</td><td><input type="password" name="password2"></td></tr> <tr><!--单选框 --><td>性别</td><td><input type="radio" name="sex" value="male" checked> 男 <input type="radio" name="sex" value="female" > 女 </td></tr> <tr><!--复选框 --><td>个人爱好</td><td> <input type="checkbox" name="hobby" value="movie">电影 <input type="checkbox" name="hobby" value="music">音乐 <input type="checkbox" name="hobby" value="coding">编程<br> <input type="checkbox" name="hobby" value="basketball">篮球 <input type="checkbox" name="hobby" value="football">足球 <input type="checkbox" name="hobby" value="other">其他 </td></tr><tr><!--下拉菜单 --><td>学历</td><td><select name="xueli"><option value ="XX">小学</option><option value ="CZ">初中</option><option value="GZ">高中</option><option value="BK" selected>本科</option><option value ="SS">硕士</option><option value ="BS">博士</option></select> </td></tr> <tr><!--多行文本输入框 --><td>备注</td><td><textarea name="message" rows="3" cols="30">请输入详细说明...</textarea></td></tr> <tr><!--提交重置按钮 --><td colspan="2" align="center"><input type="submit" value="提交"> <input type="reset" value="重置"> </td></tr> </table><span style="width:1050px;border-top:1px red dashed;"></span><!-- <HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="50%" color=#987cb9 SIZE=3>--> <!-- 俩头渐变透明的分割线 --></form></center></body>
</html>实验项目完善，加入提交反馈页面，并判断2次密码是否输入正确：
注册页面MyJsp.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>新用户注册</title><style type="text/css"> <!-- 字体格式 -->.a {font-family: "microsoft sans serif";}.b{font-family: "microsoft yahei";}.c{font-family: "SimSun";}.d{font-family: "SimHei";}.e{font-family: "\5FAE\8F6F\96C5\9ED1";}</style></head><body class="b"> <!-- 整体用字体b，微软雅黑 --><center><form id="form1" name="forme1" method = "post" action = "Register.jsp"> <!-- 表单 --><h1 class ="a" style="text-align:center"><font color = "red">新用户注册</font></h1> <!-- 一级标题居中显示 --><h2 class="c" style="text-align:center"><font color = "blue">请准确填写个人信息，以使我们更好的为你服务</font></h2> <!-- 二级标题居中显示 --><!-- <HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="50%" color=#987cb9 SIZE=3> --><!-- 俩头渐变透明的分割线 --><!-- <HR style="border-bottom:2 dashed #987cb9" width="50%" color= red SIZE=2> --><span style="width:1050px;border-bottom:1px red dashed;"></span><table border="1" bordercolor="#FF" align = "center"> <!-- 表格 --><tr><!-- 占据两列 --><td colspan="2" align = "left">注册信息()</td></tr> <tr><!--用户名文本框 --><td>用户名</td><td><input type="text" name="user name" id="user name"></td></tr> <tr><!--密码框 --><td>密 码</td><td><input type="password" name="password1"></td></tr><tr><td>密码确认</td><td><input type="password" name="password2"></td></tr> <tr><!--单选框 --><td>性别</td><td><input type="radio" name="sex" value="男" checked> 男 <input type="radio" name="sex" value="女" > 女 </td></tr> <tr><!--复选框 --><td>个人爱好</td><td> <input type="checkbox" name="hobby" value="电影">电影 <input type="checkbox" name="hobby" value="音乐">音乐 <input type="checkbox" name="hobby" value="编程">编程<br> <input type="checkbox" name="hobby" value="篮球">篮球 <input type="checkbox" name="hobby" value="足球">足球 <input type="checkbox" name="hobby" value="其他">其他 </td></tr><tr><!--下拉菜单 --><td>学历</td><td><select name="xueli"><option value ="小学">小学</option><option value ="初中">初中</option><option value="高中">高中</option><option value="本科" selected>本科</option><option value ="硕士">硕士</option><option value ="博士">博士</option></select> </td></tr> <tr><!--多行文本输入框 --><td>备注</td><td><textarea name="message" rows="3" cols="30">请输入详细说明...</textarea></td></tr> <tr><!--提交重置按钮 --><td colspan="2" align="center"><input type="submit" value="提交"> <input type="reset" value="重置"> </td></tr> </table><span style="width:1050px;border-top:1px red dashed;"></span><!-- <HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="50%" color=#987cb9 SIZE=3>--> <!-- 俩头渐变透明的分割线 --></form></center></body>
</html>反馈页面Register.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><base href="<%=basePath%>"><title>提交</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">--></head><body><% request.setCharacterEncoding("UTF-8");String password1 = request.getParameter("password1");String password2 = request.getParameter("password2");if(password1.equals(password2)){;//out.println("<script language=\"JavaScript\" >alert(\"密码输入正确 \")</script>");}else{out.println("<script language=\"JavaScript\" >alert(\"密码输入错误!请重新输入\")</script>");out.println("<script language=\"JavaScript\" >location.href = 'MyJsp.jsp';</script>");}out. println("您的个人信息是:<br>");out. println("姓名:"+request.getParameter("user name")+"<br>");String sex = request.getParameter("sex");String H[] = request.getParameterValues("hobby");String xueli = request.getParameter("xueli");out.println("性别:" + sex+"<br>");for (int i=0; i<H.length; i++)out.println("爱好:"+ H[i]+"<br>");out.println("学历:"+xueli+"<br>");
%> </body>
</html>实验总结：
表单和表格嵌套使用，如果
<form>写到<table>里边会出现增加行款的结果，<form>标签需写到<table>标签外边。字体设置不推荐使用<font>、<center>标签，这种写法已被淘汰，建议使用CSS。
个人同名博文地址:https://blog.dhbxs.top/posts/ee79c295.html
HTML学习——用户注册页面相关推荐
- 美多商城之用户注册(展示用户注册页面)
一.展示用户注册页面 1.创建用户模块子应用 1.1. 创建用户模块子应用 1.准备apps包,用于管理所有应用 2.在apps包下创建应用users $ cd ~/projects/meiduo_p ...
- HTML实战案例6：制作阿里巴巴用户注册页面
HTML实战案例6:制作阿里巴巴用户注册页面 一.完整的页面效果图 二.代码展示 <!DOCTYPE html> <html> <head> <meta ch ...
- php用户注册功能设计,利用HTML+CSS设计一个简单的用户注册页面【示例】
本篇文章将要给新手小白们介绍如何使用HTML和css制作简单的注册页面.在开发网站过程中,如果网站内容要求是完善的信息站,那么肯定就离不开用户注册的这个功能.这个用户注册界面对于刚入门的前端新手来说, ...
- 用户注册页面的设计与实现（html+css）
用户注册页面的设计与实现(html+css) 文章目录 用户注册页面的设计与实现(html+css) 1.目的 2.内容 3.步骤 4.代码实现 5.页面展示 6.最后 1.目的 熟悉HTML+CSS ...
- 用户注册页面接入短信验证功能的注意点？
网站或者app的用户注册页面,在接入手机短信验证接口的时候,多少都会遇到一些问题,这里就将这些问题及处理方案分享一下: 一.注册页面被刷 如果注册页面未做必要的防范的话,页面上的短信接口很容易被刷,造 ...
- 加载动画php,CSS3学习之页面加载动画（二）
本篇文章给大家分享6种css3的页面加载动画.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 在之前的文章[CSS3学习之页面加载动画(一)]中已经分享了四个CSS3的加载动画,今天 ...
- 【HTML5表单API项目】用户注册页面的设计与实现
用户注册页面的设计与实现 功能要求:使用H5表单技术实现用户注册页面,要求可以输入用户名,密码,真实姓名,电子邮箱等信息进行注册. 验证要求:每个输入栏目的文本框均需要显示提示信息,用户在单击按钮提交 ...
- 用户注册页面的设计与实现
用户注册页面的设计与实现 功能介绍: 1.使用HTML5表单技术实现用户注册页面,要求用户可以输入用户名.密码.真实姓名和电子邮箱等信息进行注册. 2.验证要求:每个输入栏目的文本框均需要显示提示信息 ...
- JavaScript网页设计:用户注册页面
JavaScript网页设计用户注册页面 代码如下: <!DOCTYPE html> <html><head><meta charset="UTF- ...
最新文章
- ATS自定义日志中的各字段解读
- 江湖又现中科大少年班的传说
- 公开课报名 | 那些年，我们在文本分类中遇到的坑
- 【渝粤题库】国家开放大学2021春1398分析化学（本）题目
- Java基本语法（6）--算术运算符
- 【TOJ1132】Square Root，二次同余方程
- 2060 super和5700xt哪个值得买？
- 斯威夫特山地车_斯威夫特弦乐
- windows2003——工作组和域控制器
- svn分支合并到主干（Merge）
- 基于SSM的房屋出租管理系统设计与实现
- java运动控制卡_运动控制卡应用开发教程之VB6.0
- 【热门主题：动漫进击巨人xp主题】
- python模拟ios点击_使用Xcode + Python进行IOS运动轨迹模拟
- PS设置图片背景透明色
- 真分数分解为埃及分数Python3
- 电商项目高并发下库存处理redisson
- 中国移动云mas短信对接（webservice）
- 用循环首次适应算法、最佳适应算法和最坏适应算法，模拟可变分区存储管理，实现对内存区的分配和回收管理
- Effective java 总结11 - 序列化