Web前端信息注册页面设计（附完整代码）

已于 2024-06-11 09:16:18 修改
阅读量1.8k 收藏 21
点赞数 9
分类专栏： Web前端 文章标签： 前端
于 2024-04-11 19:11:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74427084/article/details/137649474
版权
本文详细描述了一个新员工信息注册网页的设计，包括页面布局、表单元素设置（如姓名、学号、密码等必填项）、数据验证、HTML5输入类型的应用以及导航链接的样式等。
摘要由CSDN通过智能技术生成

 一 实验内容

设计如图1所示新学生信息注册网页，主要要求如下：

  1. 设置页面标题为“新员工入职报到”；
  2. 使用表格布局，令页面内容居中显示；
  3. 使用h3标签居中显示“新员工注册信息”，并设置一个页面顶部锚点；
  4. 在注册信息填写区域前后设置水平分隔线；
  5. 显式地声明表单使用get方式提交，表单中所有输入域必须设置name属性，设置表单的自动完成功能；
  6. 设置用户名、学号和密码为必填项，在输入域后显示红色“*”号，设置用户名输入框默认获得焦点，姓名输入框和学号输入框中设置提示信息；密码输入框中提示用户“请输入8位数字密码”，并设置为自动数字校验；
  7. 除用户名、学号、密码、单选按钮、复选框、列表框和文本区之外，其它input元素必须为HTML5新增的输入类型；
  8. 右侧图像域请使用学生本人的半身像；
  9. 性别默认选择“男”，借助label标签使得用户可以通过单选按钮后的文本进行勾选；
  10. 身高最大、最小、步长和默认值分别为210、150、5、175厘米；体重最大、最小、步长和默认值分别为90、40、2、55千克；
  11. 电话号码输入框中提示“请输入11位数字号码”，并设置pattern属性进行数字校验；
  12. 家庭住址下拉列表中依此设置“北京、上海、广州、深圳和成都”5个选项，默认选择“成都”；
  13. 复选框中默认选择运动和电影；
  14. 使用datalist标签为“常用网址”输入框提供可选网址列表，如图2所示；
  15. 文件域上传2份简历文件；
  16. 个人评价文本区设置行数为4行，最宽字符为40，默认显示文本“本人性格热情开朗，待人友好，为人诚实谦虚...”
  17. 插入一个隐藏域，设置value值为你的幸运数字；
  18. 设置“注册”和“重置”两个按钮，居中显示；
  19. 在页面底部插入“电话”、“短信”、“E-Mail”和“返回顶部”4个导航链接，前三个导航链接必须使用相应的超链接伪协议，“返回顶部”链接到页面顶部锚点。另外，需设置链接状态样式，链接字体为蓝色，已访问过为灰色，鼠标经过时为红色，鼠标按下时为黄色。

图1 页面效果图

 图2 “常用网址”提示效果 

二 完整代码 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新生报到</title>
<style>
    #bottom a:link {
      color: blue;
      text-decoration: none;
    }

    #bottom a:visited {
      color: gray;
      text-decoration: none;
    }

    #bottom a:hover {
      color: red;
      text-decoration: underline;
    }

    #bottom a:active {
      color: yellow;
      text-decoration: none;
    }

</style>
</head>
<body>
<a name="top"></a>
<h3 align="center" style="color:red">注册信息</h3>
<hr/>

<form action="" method="get">
  <table width="743" border="0" align="center" >
    <tr>
      <td width="151" align="right">姓名：</td>
      <td width="323"><label for="stdname"></label>
      <input type="text" name="stdname" id="stdname" required="required" /><span class="required" style="color:red">*</span></td>
      <td width="247" rowspan="12"><img src="实验1素材/images/Andy.jpg" width="239" height="351" /></td>
    </tr>
    <tr>
      <td align="right">学号：</td>
      <td><label for="stdnum"></label>
      <input type="text" name="stdnum" id="stdnum" required="required"/><span class= "required" style="color:red">*</span></td>
    </tr>
    <tr>
      <td align="right">密码：</td>
      <td><label for="stdpsd"></label>
      <input type="password" name="stdpsd" id="stdpsd" required="required" maxlength="8" placeholder="请输入8位数字密码" pattern="\d{8}" /><span class="required" style="color:red">*</span></td>
    </tr>
    <tr>
      <td align="right">性别：</td>
      <td><input type="radio" name="radio" id="man" value="man" checked="checked"/>
        <label for="man">男
          <input type="radio" name="radio" id="woman" value="woman" />
          女
      </label></td>
    </tr>
    <tr>
      <td align="right">身高：</td>
      <td><label for="high"></label>
      <input type="number" value="175" name="high" id="high" max="210" min="150" step=""5/>厘米</td>
    </tr>
    <tr>
      <td align="right">体重：</td>
      <td><label for="weight"></label>
      <input type="range" name="weight" id="weight" min="40" max="90" step="2" value="55"/>千克</td>
    </tr>
    <tr>
      <td align="right">生日：</td>
      <td><label for="birthday"></label>
      <input type="date" name="birthday" id="birthday" /></td>
    </tr>
    <tr>
      <td align="right">电话号码：</td>
      <td><label for="tel"></label>
      <input type="tel" name="tel" id="tel"  maxlength="11" placeholder="请输入11位数字号码"  pattern="\d{11}"/></td>
    </tr>
    <tr>
      <td align="right">E-mail:</td>
      <td><label for="email"></label>
      <input type="email" name="email" id="email" /></td>
    </tr>
    <tr>
      <td align="right">个人主页：</td>
      <td><label for="personmal"></label>
      <input type="text" name="personmal" id="personmal" /></td>
    </tr>
    <tr>
      <td align="right">家庭住址：</td>
      <td><label for="area"></label>
        <select name="area" id="area"><option value="成都">成都</option><option value="北京">北京</option><option value="上海">上海</option><option value="深圳">深圳</option><option value="广州">广州</option>
      </select></td>
    </tr>
    <tr>
      <td align="right">我的颜色：</td>
      <td><label for="color"></label>
      <input type="color" name="color" id="color" /></td>
    </tr>
    <tr>
      <td align="right">我的运动：</td>
      <td><input type="checkbox" name="basketball" id="basketball" />
        篮球
        <label for="basketball">
          <input type="checkbox" name="football" id="football" checked="checked" />
        足球
        <input type="checkbox" name="swim" id="swim" />
        游泳
        <input type="checkbox" name="pingpong" id="pingpong" checked="checked" />
        乒乓球
        </label></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td align="right">常用网址：</td>
      <td><label for="net"></label>
      <input list="net"><datalist id="net"><option value="http://www.baidu.com   百度"><option value="http://www.sina.com    新浪"><option value="http://www.google.com  谷歌"></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td align="right">简历两份：</td>
      <td><label for="jianli"></label>
      <input type="file" name="jianli" id="jianli" /></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td align="right">个人自述：</td>
      <td rowspan="4"><label for="zishu"></label>
      <textarea name="zishu" id="zishu" cols="45" rows="5">我是一位特别热爱学习的孩子</textarea></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><input type="hidden" name="hiddenField" id="hiddenField" value="88"/></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td colspan="3"><input type="submit" name="zc" id="zc" value="注册" style="margin-left:250px;" />
      <input type="submit" name="cz" id="cz" value="重置" style="margin-left:100px;" /></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
</form>
<hr/>

<div id="bottom">
      <a href="tel:电话号码" style="margin-left:596px;">电话</a>
      <a href="sms:电话号码" style="margin-left:60px;">短信</a>
      <a href="mailto:邮箱地址" style="margin-left:60px;">E-Mail</a>
      <a href="#top" style="margin-left:60px; color:blue;">返回顶部</a>
</div>

</body>
</html>

送江入海
关注
专栏目录
web前端网页设计作品web期末大作业web前端作业网页制作代码web大作业制作网页代码
07-10
临近期末, 你是否还在为HTML网页设计期末作业而发愁，是否为还在为老师的网页制作作业要求感到头大？是否觉得HTML网页作业无从下手？，网页要求的总数量太多？是否找不到合适的模板？等等一系列问题。本资源就可以为你解决你所面临的这些问题，原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作资源合集，画面精美，非常适合初学者学习使用。 多套(HTML+CSS+JS)网页设计的学生期末大作业，都符合学校或者学生考试期末作业的水平，都是div+css框架代码写的，可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载!
WEB基本网页代码（含登录、注册、信息维护等）
06-10
自己做的最简单的网页，有登录、注册、信息维护、密码找回、查看个人信息等功能，含加密与解密。数据库的创建为 Create table userinfo( Username varchar primary key, Pwd varchar, Gender varchar, Email varchar, Question varchar, Answer varchar)
web网页项目--用户登录，注册页面代码
最新发布
weixin_74197037的博客
10-05 1193
【代码】web网页项目--用户登录，注册页面代码。
web前端——表单注册页面设计（注册信息）
weixin_65997960的博客
03-18 5235
在页面底部插入“电话”、“短信”、“E-Mail”和“返回顶部”4个导航链接，前三个导航链接必须使用相应的超链接伪协议，“返回顶部”链接到页面顶部锚点。另外，需设置链接状态样式，链接字体为蓝色，已访问过为灰色，鼠标经过时为红色，鼠标按下时为黄色。设置用户名、学号和密码为必填项，在输入域后显示红色“*”号，设置用户名输入框默认获得焦点，密码输入框中提示用户“请输入。除用户名、学号、密码、单选按钮、复选框、列表框和文本区之外，其它input元素必须为HTML5新增的输入类型；个选项，默认选择“成都”；
HTML + CSS + JavaScript 实现注册页面信息验证 详细教程（表单验证）
热门推荐
射手座轩木酱的代码天地~
05-13 2万+
本文介绍使用HTML + CSS + JavaScript 实现注册页面信息验证的详细方法。完整代码见文章末尾。对注册信息进行判断，判断其是否符合要求。（如：密码6-12位字符，不能有空格等）这里拿用户名和密码进行验证：用户名和密码都是6-12位字符，不能有空格。我们可以使用三个块标签，可以将这三个部分分别放到每个块标签中。不过这个时候还没有验证功能，下面将实现这一功能。（用户名/密码格式是否正确）创建一个注册页面，如下图。第一部分：两个段落文本。第三部分：登录/有账号。
网页与HTML学习笔记006 | 表单标签及制作注册页面
M99922000的博客
10-18 876
初学HTML学习笔记：表单标签，以及制作综合运用之注册页面
设计一个用户注册表单，其提交页面（tijiao.jsp）和信息获取（huoqu.jsp）后显示页面
qq_62735492的博客
04-05 5765
题解 张继军 董卫 《java web 应用开发技术与案例教程》课后习题之第三章第5题 题目内容 源代码 运行结果 题目内容 5.设计一个用户注册表单，其提交页面和信息获取后显示页面，如图运行结果所示，用户填写完并提交后输出用户填写的信息。 源代码 tijiao.jsp <form action="huoqu.jsp" method="post" name="myform"> 用户名：<input name="txtUser" type="text
极简注册登录页面 大学生Web前端期末静态网页设计作业html源代码
01-02
极简注册登录页面 大学生Web前端期末静态网页设计作业html源代码 极简注册登录页面 大学生Web前端期末静态网页设计作业html源代码 极简注册登录页面 大学生Web前端期末静态网页设计作业html源代码 极简注册登录页面 ...
大学生Web前端期末静态网页设计作业html源代码
12-25
本资料包包含了一位大学生在Web前端课程期末所完成的静态网页设计作业，主要使用了原生的HTML、CSS和JavaScript技术。这个项目是学习Web前端开发基础的绝佳实例，让我们一起深入探讨其中蕴含的知识点。 1. **HTML**...
Java Web实现登陆注册页面前端与后台数据连接（代码+sql文件）
12-31
Java Web实现登陆注册页面前端与后台数据连接（代码+sql文件）。Java Web实现登陆注册页面前端与后台数据连接（代码+sql文件）。Java Web实现登陆注册页面前端与后台数据连接（代码+sql文件）。
大学生Web前端期末静态网页设计作业html源代码 漂亮大气注册登录页面
01-02
漂亮大气注册登录页面 大学生Web前端期末静态网页设计作业html源代码 漂亮大气注册登录页面 大学生Web前端期末静态网页设计作业html源代码 漂亮大气注册登录页面 大学生Web前端期末静态网页设计作业html源代码 漂亮...
web前端设计大作业-简易淘宝网设计，含项目完整代码、实验报告
08-14
学习参考: 该项目提供了一个实际的Web前端设计案例，读者可以学习其中的代码实现和设计思路。通过阅读代码和实验报告，理解如何设计网页布局、处理用户交互、实现购物车等核心功能。 课程作业: 该项目适合作为Web...
基于JAVAWeb的用户登录、注册功能
m0_64703222的博客
09-08 7396
【代码】基于JAVAWeb的用户登录、注册功能。
表单的学习——简单的注册窗口
m0_67737085的博客
09-29 1185
HTML学习（10）
Web--用户注册界面
qq_52318347的博客
04-20 5488
web学习
【Web前端基础】实验9 表单页面设计
Lailalalala的博客
07-30 9257
构建基础页面：参会注册表、设计建言页面、设计调查问卷
HTML表单标签-注册页面
weixin_62971115的博客
08-12 571
【代码】HTML表单标签-注册页面。
【Java 进阶篇】Java Web 编写注册页面案例
繁依Fanyi的博客
10-11 3318
注册页面是许多Web应用程序的关键组成部分，它允许用户创建自己的账户，以便访问应用程序的功能。在这个示例中，我们将创建一个简单的注册页面，涵盖了用户提供的基本信息，如用户名、密码和电子邮件地址。通过这个详细的教程，你现在应该能够创建一个基本的Java Web注册页面，包括HTML表单、CSS样式、Servlet处理和数据库连接。请记住，实际的应用可能需要更多的安全性、错误处理和数据验证，但这个示例可以帮助你入门Web开发中的关键概念。希望你能够继续学习和改进这个示例，以创建更复杂和功能强大的Web应用程序。
编写注册表单 HTML
一七
03-28 4104
通过编写一个注册页学习 HTML 表单学习如何控制人们在表单中可以输入的数据类型，以及使用一些新的 CSS 工具装饰页面
web前端登录注册页面
08-30
你可以通过以下步骤来创建一个简单的Web前端登录注册页面： 1. 创建HTML文件：创建一个名为index.html的文件，并在其中编写基本的HTML结构。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Login/Register Page</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <h1>Login</h1> <form id="loginForm"> <label for="username">Username:</label> <input type="text" id="username" name="username" required> <br> <label for="password">Password:</label> <input type="password" id="password" name="password" required> <br> <input type="submit" value="Login"> </form> <p>Don't have an account? <a href="#register">Register here</a></p> </div> <div class="container" id="register"> <h1>Register</h1> <form id="registerForm"> <label for="regUsername">Username:</label> <input type="text" id="regUsername" name="regUsername" required> <br> <label for="regPassword">Password:</label> <input type="password" id="regPassword" name="regPassword" required> <br> <input type="submit" value="Register"> </form> <p>Already have an account? <a href="#login">Login here</a></p> </div> <script src="script.js"></script> </body> </html> ``` 2. 创建CSS文件：创建一个名为style.css的文件，并为登录注册页面添加一些基本样式。 ```css .container { width: 300px; margin: 0 auto; padding-top: 100px; } form { margin-bottom: 20px; } label { display: block; margin-bottom: 5px; } input[type="text"], input[type="password"] { width: 100%; padding: 5px; margin-bottom: 10px; } input[type="submit"] { width: 100%; padding: 8px; background-color: #4CAF50; color: white; border: none; cursor: pointer; } a { text-decoration: none; } ``` 3. 创建JavaScript文件：创建一个名为script.js的文件，并在其中添加一些交互逻辑。 ```javascript document.getElementById("loginForm").addEventListener("submit", function(event) { event.preventDefault(); // 处理登录逻辑 }); document.getElementById("registerForm").addEventListener("submit", function(event) { event.preventDefault(); // 处理注册逻辑 }); ``` 通过上述步骤，你就可以创建一个简单的Web前端登录注册页面。请注意，上述代码只提供了基本的结构和样式，你还需要在后端编写相应的登录和注册逻辑。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值