HTML基础实现简单的注册和登录页面

最新推荐文章于 2024-04-14 17:57:58 发布
最新推荐文章于 2024-04-14 17:57:58 发布
阅读量6.4k 收藏 42
点赞数 1
分类专栏： 笔记 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zwb1365237878/article/details/111184485
版权

为了保证格式的规范，使用table表格
注册页面

<body >
		<form action="#" method="">
			<h3 align="center">注册</h3>
			<a id="position"></a>
			<table align="center">
				<tr>
					<td><label for="username">用户名：</label></td>
					<td><input type="rdt" name="uname" id="username" placeholder="请输入手机号或邮箱" /><br></td>
					<td></td>
				</tr>
				<tr>
					<td><label for="pwd">密&nbsp;&nbsp;&nbsp;码：</label></td>
					<td><input type="password" name="password" id="pwd" placeholder="请输入密码"/></td>
					<td></td>
				</tr>
				<tr>
					<td><label for="pwd">确认密码：</label></td>
					<td><input type="password" name="password" id="pwd" placeholder="请再次输入密码"/></td>
					<td></td>
				</tr>
				<tr>
					<td>家庭住址：</td>
					<td> <select name="pros" id="">
                         <option value="beijing">河南省</option>
                         <option value="henan">江苏省</option>
                         <option value="zhejiang">浙江省</option>
                         </select></td>
					<td> <select name="citys" id="">
                         <option value="nanyang">南阳市</option>
                         <option value="shangqiu">商丘市</option>
                         <option value="zhengzhou">郑州市</option>
                         </select></td>
				</tr>
				<tr>
					<td>性&nbsp;&nbsp;&nbsp;别：</td>
					<td><input type="radio" name="sex" value="男" checked/>男
					<input type="radio" name="sex" value="女" >女</td>
				</tr>
				<tr>
					<td><label for="phone">联系方式：</label></td>
					<td><input type="rdt" name="phone" id="phone" placeholder="请输入手机号" ></td>
					<td><input type="submit" value="获取验证码" /></td>
				</tr>
				<tr>
					<td><label for="code">验证码：</label></td>
					<td><input type="rdt" name="code" id="code" placeholder="请输入验证码" ></td>
					<td></td>
				</tr>
				<tr>
					<td><input type="submit" value="注册"></td>
					<td></td>
					<td></td>
				</tr>
			</table>
		</form>

结果图
在这里插入图片描述登录页面

<form action="#">
			<h3 align="center">登录</h3>
			<table align="center">
				<tr>
					<td><label for="username">用户名：</label></td>
					<td><input type="rdt" name="uname" id="username" placeholder="请输入手机号或邮箱" /><br></td>
				</tr>
				<tr>
					<td><label for="pwd">密&nbsp;&nbsp;&nbsp;码：</label></td>
					<td><input type="password" name="password" id="pwd" placeholder="请输入密码"/></td>
				</tr>
				<tr>
					<td><input type="submit" value="登录"></td>
					<td><input type="submit" value="注册"></td>
				</tr>
			</table>
			<a href="./作业1.html#position">注册</a>
		</form>

结果图
在这里插入图片描述

Tsuyuri kanawu
关注
  • 1
    点赞
  • 踩
  • 42
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
html5用手机号码注册表单特效代码
03-20
html5用手机号码注册表单代码是一款适合手机APP软件手机页面注册模板下载。
HTMl 实现用户的登录注册界面
m0_46168903的博客
04-24 1万+
自己体会 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g
入门HTML5：简单的个人注册信息页面实现
最新发布
2401_83050569的博客
04-14 429
<input type="radio">女</label><button type="">按钮</button>设置label标签的for属性值和表单控件的id属性值相同。<label for="man">男
html学生信息注册
★探梦少年☆的博客
03-07 2355
一个效果图 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>注册页面</title> </head> <body> <center> <form> <table> <tr> &lt...
如何在html语言中实现登陆,网页中的登录注册功能是如何实现的
weixin_36089954的博客
05-31 4781
摘要：登录注册是一个网站最常用的也是最基本的功能，本文就来详细的介绍一下在网页中，实现这两个最基本的需求从后端到前端需要做些什么。注：本文所提到的所有代码都已上传至github ，可以直接clone后在终端使用测试。一、前置知识：基础知识可见我之前的博客：HTTP入门(请求与响应的基本知识) 。首先我们至少需要了解HTTP最基本的request请求和response响应的相关概念。再看一下服务端和...
实验二 JSP的内置对象（JavaWeb 登陆和注册页面）
D7584的博客
10-17 1515
JSP的内置对象 一、实验目的 通过编程和上机实验理解 JSP各个页面之间的响应和传递的过程。并且能够熟练的掌握JSP的内置对象的属性和方法，并能灵活运用。 二、实验要求 1．基础练习：内置对象常用方法的使用。 2．编写获取表单数据。 3．按照下列要求实现简单注册、登录程序。 登陆页面： css部分： <style> .m{ text-align: center; margin-top: 5px; } .lab
简单的静态登录注册页面
05-02
对于刚接触前端的同学 在学习了html+css+js后 可以对应写一个简单的登录注册的静态页面。压缩包里面有两个类型的登录注册页面。具体价值意义不大，主要是前期练练对于基本语言的熟练度哈。
HTML简单实现网站布局、图片漂浮、区域跳转、登陆注册及图片查看器
11-22
涉及Dreamweaver实现网站布局、简单站点开发、区域跳转、注册登录界面、图片查看器等内容，课程前期已经详细讲解了TXT撰写HTML基础代码，后期准备结合软件加深下。非常基础的文章，希望对初学者有所帮助。 内容包括...
运用HTML、CSS、JavaScript基础制作页面
06-10
练习创建简单的WEB项目文件结构； b.熟悉DIV＋CSS网页的写法； c.熟悉JavaScript 事件在页面中的运用。 1．Html部分采用form的形式编写。 2．Css部分参考上图，但是不限于上图，可以发挥自己的想象，例如加背景图，...
使用springboot+mybatis+Vue2.0+elementUI实现简单的登录注册及用户信息获取。
07-09
本demo实现了简单的登录、注册、获取用户信息三个功能，其中包含密码加密，解决了前后端分离项目常见的跨域问题及session问题，界面清晰简单，后台分层清晰，逻辑清楚。 值得一看。 项目结构：ajax_test为后端项目，...
基于Web基础的投票网站（html+css+js）
07-04
制作美观大方的登录页面和注册页面，使用HTML、CSS和JavaScript知识，制作表单页面，并使用虚拟帐号实现登录和重定向功能 2).以表格或div布局方式，设计较人性化、美观大方的投票表单。 3).用图形化方式，展示使用...
移动端手机号注册登录+验证码页面+填写资料
08-03
移动端通过手机号登录app弹出框，4位input验证码获取弹出框，用户资料填写弹出框。jquery+mui+html5+css3
登录注册界面html mysql_HTML登录注册页面简单实现
weixin_36257615的博客
01-19 1057
registerfunctioncheckUserName(){//验证用户名varfname=document.myform.username.value;varreg=/^[0-9a-zA-Z]/;if(fname.length!= 0){for(i=0;ialert("只能输入字母或数字");return false;}}if(fname.length<4||fname.length&...
登录注册页面（html+css+js）
weixin_46048542的博客
11-21 2266
【代码】登录注册页面（html+css+js）
HTML&CSS实现经典登录注册页面
热门推荐
Hedy的博客
10-09 18万+
提要：本篇文章说的是一个简单的登录、注册页面用HTML结合css如何实现，包括两个页面的相互跳转，不包括对输入数据的处理，适合刚入门的新手小白。 1、首先看一下最后的实现效果：首先是一个登录界面，点击“立即注册”会跳转到第二张图片，也就是注册界面，点击注册界面的“请登录”又会跳转回到第一个登录界面。 2、下面看一下具体的代码实现（使用的开发工具是HBuilder，有非常强大的提示功能，...
使用HTML写一个注册界面（简单）
zhou_mumu的博客
07-26 8936
界面效果： 编写过程： 中间没有使用css，只有一个注册界面的结构 为了使看起来整齐，首先使用了<table>表格标签将页面作为没有线条的两列表格（见上方右图） 标题使用<h4>标签即可，而左边一列的较为简单直接<td>即可，只用看右边 第一行 使用input标签中的radio属性实现单选过程，图片则使用img标签即可，要达到点击图片和文字直接选中的效果则需要图片文字放在label标签中，要达到单选的效果，一定要在选项中使用name属性将他们标为同类 第二
HTML5页面（php）——注册界面
_囡囡吖_的博客
08-13 1398
php学生信息管理系统——注册页面展示 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>用户注册—综合信息管理系统</title> <style type="text/...
手机验证注册html页面图片,手机验证登录页面
weixin_29447621的博客
06-03 511
* {margin:0;padding:0;}html,body {height:100%;}.login-bg {height:100%;background-image:linear-gradient(160deg,#b100ff 20%,#00b3ff 80%);position:relative;}.content {position:absolute;width:320px;height...
手机短信注册页面h5css3+html5模板
ICode联盟
02-15 998
下载地址 一款漂亮的手机短信注册页面h5模板，一共三个页面，实用的移动端注册页面模板，实用手机号码注册。 dd:
jsp实现最简单的登录注册增删改查
05-27
好的，下面是一个最简单的JSP实现登录注册增删改查的示例： 登录功能： ``` <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登录</title> </head> <body> <% String username = request.getParameter("username"); String password = request.getParameter("password"); // 这里可以将用户名和密码与数据库中的数据进行比对，验证用户身份 if(username!=null && password!=null && username.equals("admin") && password.equals("123456")){ session.setAttribute("username",username); // 将用户名存储到会话中 response.sendRedirect("index.jsp"); // 跳转到主页 }else{ out.print("用户名或密码错误！"); } %> <form method="post"> <label>用户名：</label><input type="text" name="username"><br> <label>密码：</label><input type="password" name="password"><br> <input type="submit" value="登录"> </form> </body> </html> ``` 注册功能： ``` <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>注册</title> </head> <body> <% String username = request.getParameter("username"); String password = request.getParameter("password"); // 这里可以将用户名和密码存储到数据库中 out.print("注册成功！"); %> <form method="post"> <label>用户名：</label><input type="text" name="username"><br> <label>密码：</label><input type="password" name="password"><br> <input type="submit" value="注册"> </form> </body> </html> ``` 增加功能： ``` <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>增加</title> </head> <body> <% String name = request.getParameter("name"); String age = request.getParameter("age"); // 这里可以将姓名和年龄存储到数据库中 out.print("增加成功！"); %> <form method="post"> <label>姓名：</label><input type="text" name="name"><br> <label>年龄：</label><input type="text" name="age"><br> <input type="submit" value="增加"> </form> </body> </html> ``` 删除功能： ``` <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>删除</title> </head> <body> <% String id = request.getParameter("id"); // 这里可以根据id从数据库中删除对应的记录 out.print("删除成功！"); %> <form method="post"> <label>编号：</label><input type="text" name="id"><br> <input type="submit" value="删除"> </form> </body> </html> ``` 修改功能： ``` <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>修改</title> </head> <body> <% String id = request.getParameter("id"); String name = request.getParameter("name"); String age = request.getParameter("age"); // 这里可以根据id从数据库中查询对应的记录，并进行修改 out.print("修改成功！"); %> <form method="post"> <label>编号：</label><input type="text" name="id"><br> <label>姓名：</label><input type="text" name="name"><br> <label>年龄：</label><input type="text" name="age"><br> <input type="submit" value="修改"> </form> </body> </html> ``` 查询功能： ``` <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>查询</title> </head> <body> <% // 这里可以从数据库中查询所有记录，并将其显示在页面上 out.print("查询结果如下：<br>"); out.print("1 张三 18<br>"); out.print("2 李四 20<br>"); out.print("3 王五 22<br>"); %> </body> </html> ``` 注意：这个示例只是一个简单的示例，实际的项目中可能会更加复杂，需要根据具体的业务需求进行开发。同时，这里没有使用任何框架，只是使用了最基础的JSP和Servlet知识，开发中还可以使用更加高级的技术来实现相应的功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值