HTML与JavaScript实现注册页面

这篇具有很好参考价值的文章主要介绍了HTML与JavaScript实现注册页面。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

javascript用户注册页面,HTML5+CSS,JavaScript,html,前端,javascript,html5

目录

1.实现效果

2.HTML表单

2.1input标签

2.2for属性

2.3name属性

2.4select标签

3.JS窗口事件

3.1document.getElementById简单介绍

4.HTML和JavaScript源码

javascript用户注册页面,HTML5+CSS,JavaScript,html,前端,javascript,html5

1.实现效果

javascript用户注册页面,HTML5+CSS,JavaScript,html,前端,javascript,html5

以上图片为效果图展示,当我们输入错误的信息时,在注册框的最下方会提示相应的错误信息。当你输入正确的信息,则输出注册成功。性别实现单选,爱好实现多选,住址实现选择框等等。在下方2-3小节中讲解相关属性的用法,如想要源码直接跳过2-3节直接到第4节,第4节为源码展示

最终实现效果:

  1. 账号或密码输入错误,提示警告信息
  2. 性别实现单选框
  3. 爱好实现多选框
  4. 住址实现选择框
  5. 自我介绍实现多行文本输入框
  6. 提交按钮实现窗口事件

2.HTML表单

<form> 标签用于为用户输入创建HTML表单。表单能够包含<input>标签,表单还可以包含menus、textarea、fieldset、legend和label元素,本期主要讲解<label>标签的用法。


2.1input标签

<input>标签中type里面设置的就是属性,你想要输入的是文本就设置text属性,想要输入的是密码就设置password属性。

javascript用户注册页面,HTML5+CSS,JavaScript,html,前端,javascript,html5


 一个密码框:


	<body>
		<form>
			<div>
				<label>密码</label>
				<input type="password"/>
			</div>
		</form>
	</body>

 显示效果:

javascript用户注册页面,HTML5+CSS,JavaScript,html,前端,javascript,html5


2.2for属性

for属性可把label绑定到另外一个元素。for 属性的值设置为相关元素的id属性的值,就能与相关属性同步,因此for属性规定label绑定到哪个表单元素。如:


	<body>
		<form>
			<div>
				<label for="class">密码</label>
				<input type="password" id="class"/>
			</div>
		</form>
	</body>

效果展示:

javascript用户注册页面,HTML5+CSS,JavaScript,html,前端,javascript,html5

当我们点击密码这个文本时,后面的方框会闪烁光标,达到了一个绑定的效果。这就是for属性的用途。


2.3name属性

当我们在使用单选框时,如果直接编写几行单选框时。我们不必须每个单选值都得选,因此我们可以使用name属性来使这几行单选框达到只能选一个单选值的效果。如:


	<body>
		<form>
			<div>
				<label>爱好:</label>
				<input type="radio"/>篮球
				<input type="radio"/>羽毛球
				<input type="radio"/>拳击
			</div>
		</form>
	</body>

显示效果:

javascript用户注册页面,HTML5+CSS,JavaScript,html,前端,javascript,html5


我们可以看到,所有的单选都能够被选,那我们编写这几行代码就没有意义了,因此我们可以这样去修改: 

	<body>
		<form>
			<div>
				<label>爱好:</label>
				<input type="radio" name="rad"/>篮球
				<input type="radio" name="rad"/>羽毛球
				<input type="radio" name="rad"/>拳击
			</div>
		</form>
	</body>

 显示效果:

javascript用户注册页面,HTML5+CSS,JavaScript,html,前端,javascript,html5

以上代码中,我们把每个<input>标签中都加入了一个name="rad"的属性,达到了这三个单选框变为一个单选框的效果。


2.4select标签

<select>标签,代表选择框<select>标签里面使用<option>标签来达到选择效果。<option>标签里面有value值,value值代表着该字段在第几行,注意一般按照从0往后增加。

	<body>
		<form>
			<div>
				<select>
				<option value="0">选择住址</option>
				<option value="1">湖北</option>
				<option value="2">新疆</option>
				<option value="3">西藏</option>
				</select>
			</div>
		</form>
	</body>

显示效果:

javascript用户注册页面,HTML5+CSS,JavaScript,html,前端,javascript,html5 以上代码展示了<select>、<option>、value的用法,实现了一个简单选择框。


3.JS窗口事件


3.1document.getElementById简单介绍

当我们点击一个表单中的id时想要达到某些效果的时候,我们可以使用document.getElementById('id名').onclick来创建一个匿名函数。如:

	<body>
		<form>
			<div>
				<button id="but">按钮</button>
			</div>
		</form>
		<script>
			document.getElementById('but').onclick = function() {
				alert("弹出一个警告");
			}
		</script>
	</body>

显示效果:

javascript用户注册页面,HTML5+CSS,JavaScript,html,前端,javascript,html5

以上代码展示了document.getElementById('id名').onclick创建一个匿名函数,并且弹出一个警告框。


4.HTML和JavaScript源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册框的实现</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			.container {
				width: 100%;
			}
			.register-wrap {
				width: 600px;
				margin: 50px auto;
				border: 1.5px solid #2d77bd;
				border-radius: 10px;
				padding: 20 px 50ox;
				box-shadow: 0;			
			}
			.register-wrap h1 {
				background-color:#2d77bd;
				height:60px;
				line-height: 50px;
				border-radius: 10px 10px 0 0;
				font-size: 30px;
				color: whitesmoke;
				text-align: center;
				font-weight: 15px
			}
			#username,#password,#iner {
				padding:10px 20px;
				width: 45%;
				border: 1px solid ;
				border-radius: 5px;
				padding-left: 0px;
			}
			.form-control label {
				margin-right: px;
				padding-left: 100px;
			}
			 .form-control input[type=button] {
				 width: 20%;
				 height: 50px;
				 line-height: 50px;
				 background-color: #2d77bd;
				 border: none;
				 color: #fff;
				 font-size: 20px;
				 margin-left: 230px; 
				 border-radius: 6px;
			 }
			 .errorInfo {
				 color: red;
				 font-size: 20px;
				 display: none;
				 text-align: center;
			 }

		</style>
	</head>
	<body>

		<div class="container">
			<div class="register-wrap">
				<h1>注册</h1>
				<form>
					<div class="form-control">
						<label for="username">账号</label>
						<input type="text" id="username" placeholder="账号设置在6-8位数字,不能包含有admin字段"/>
					</div>
					<div class="form-control">
						<label for="password">密码</label>
						<input type="password" id="password" placeholder="密码设置在6-8位数字,不能包含有admin字段"/>
					</div >
					<div class="form-control">
						<label>性别</label>
						<input type="radio" name="sex"/>男
						<input type="radio" name="sex"/>女
					</div>
					<div class="form-control">
						<label>爱好</label>
						<input type="checkbox" name="sport" value="1"/>蓝球
						<input type="checkbox" name="sport" value="2"/>羽毛球
						<input type="checkbox"name="sport" value="3"/>足球
					</div>
					<div class="form-control">
						<label>住址</label>
						<select>
							<option value="0">请选择住址</option>
							<option value="1">湖北</option>
							<option value="2">湖南</option>
							<option value="3">新疆</option>
							<option value="4">西藏</option>
						</select>
					</div>
					<div class="form-control">
						<label>自我介绍</label>
						<textarea id="iner" class="texta"></textarea>
					</div>
					
					<div class="form-control">
						<input type="button" id="subnit" value="提交"/>
					</div>
					<div>
						<div id="errorInfo" class="errorInfo"">错误提示</div>
					</div>
				</form>
			</div>
		</div>
		<script>
			document.getElementById('subnit').onclick = function(e) {
				e.preventDefault();
				
				let username = document.getElementById('username').value;
				let password = document.getElementById('password').value;
				let errorInfo = document.getElementById('errorInfo');
				
				if(username.length < 6 || username.length>10) {
					errorInfo.innerText = "账号长度应当在6~8之间";
					errorInfo.style.display = "block";
				} 
				else if(username.toLocaleLowerCase().includes("admin")) {
					errorInfo.innerText="不能包含admin这个字段";
					errorInfo.style.display = "block";
				}
				else if(password.length<6 || password.length>8) {
					errorInfo.innerText="密码长度应当6~8之间";
					errorInfo.style.display = "block";
				}
				else if(password.charAt(password.length-1) !== "*") {
					errorInfo.innerText="密码的最后一位必须是*";
					errorInfo.style.display = "block";
				}else {
					errorInfo.innerText="注册成功";
				}
			}
		</script>
	</body>
</html>

本期博客到这里就结束了,感谢你的阅读。

javascript用户注册页面,HTML5+CSS,JavaScript,html,前端,javascript,html5文章来源地址https://www.toymoban.com/news/detail-765346.html

到了这里,关于HTML与JavaScript实现注册页面的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • HTML网页设计基础——用户注册界面

    要求网页中显示如下信息: 首先对网页布局进行分析,包含两个部分,标题和表格部分: 定义表格----将网页中的表单元素根据上图所示放入不同的行和列中。 代码如下: 注意: 该实例包含的行和单元格的个数比较多,在书写代码的时候注意不要漏写,可以使用空格隔开,

    2024年02月07日
    浏览(38)
  • 使用javaweb实现登录注册页面,并且对功能和业务进行分层 用户登录成功跳转到主页并展示数据库的商品的信息

    一、Servlet+JSP+JavaBean开发模式(MVC)介绍 Servlet+JSP+JavaBean模式(MVC)适合开发复杂的web应用,在这种模式下,servlet负责处理用户请求,jsp负责数据显示,javabean负责封装数据。 Servlet+JSP+JavaBean模式程序各个模块之间层次清晰,web开发推荐采用此种模式。 这里以一个最常用的用户登录

    2024年02月03日
    浏览(58)
  • 登录页面设置用户必须勾选且阅读完某种协议才能登录或注册

        其实在很多软件的开发过程中,都会出现登录页面,尤其是一个成熟完整的系统,其中的登录页面多多少少的都属有用户须知的隐私协议,那么怎么在用户登录或者注册前让用户稍微浏览一下这个隐私协议呢?我们可以通过监听隐私协议的滚动以及用户是否点击了勾选隐

    2023年04月08日
    浏览(69)
  • 尚融宝20-实现用户注册和用户认证

    目录 一、需求 二、前端整合发送验证码 三、实现用户注册 1、创建VO对象 2、定义常量 3、引入MD5工具类 4、Controller 5、Service 6、前端整合 四、实现用户登录 1、后端整合JWT 2、前端整合 五、校验用户登录 1、后端 2、前端   点击获取验证码后先对手机号进行验证是否为空,其

    2023年04月21日
    浏览(48)
  • Java开发:实现用户注册登录的功能

    一、前言 在Java开发过程中,实现用户的注册功能是最基本的,用户通过手机号或者邮箱作为注册账号也是非常常见的操作方式,不管是通过手机号注册或者邮箱注册,原理都差不多,那么本文就来分享一下在Java开发过程中的用户注册账号的功能实现。 二、准备工作 1、通过

    2023年04月09日
    浏览(47)
  • SpringBoot整合邮箱验证码实现用户注册

    唠嗑部分 今天我们来分享一下在系统开发过程中,如何使用验证码来验证用户并完成用户注册 首先来看一下成品界面展示 说一下以上注册功能的设计: 用户手动输入用户名(全数据库唯一)、密码、确认密码、邮箱地址(单个邮箱最多可注册3个用户)、正确的邮箱验证码,即可

    2024年02月08日
    浏览(60)
  • Django用户认证: 利用Django Auth模块实现用户注册、登录与登出

    用户登录注册属于用户认证的一部分,Django内置了一套用户认证体系,使用起来比较方便,而且支持用户定制和拓展,足以满足任何复杂的业务需求。 Django框架中,用户权限管理被划分为三个层次: 用户 :系统使用者,拥有自己的权限。可被一个或多个用户组包含。 用户组

    2023年04月20日
    浏览(53)
  • MVC框架实现用户登录注册功能(连接数据库)

    一、简单理解MVC框架 二、项目结构 三、项目源码 3.1 User 3.2 UserDao 3.3 RegisterDao 3.4 servletControll 3.5 servletControllRegister 3.6 web.xml 3.7 login.jsp 3.8 register.jsp 3.9 success.jsp 3.10 failure.jsp  四、实现效果 总结 本篇文章主要介绍利用MVC框架去实现一个简单的用户登录注册功能,内容主

    2024年02月06日
    浏览(57)
  • 使用Django Rest Framework设计与实现用户注册API

    在现代Web应用开发中,RESTful API已成为前后端分离架构中的关键组件。Django Rest Framework (DRF) 是一款基于Django的优秀库,提供了丰富的工具和接口,极大地简化了RESTful API的设计与实现。本文将以用户注册功能为例,展示如何运用DRF构建一个完整的API端点,包括数据验证、模型

    2024年04月25日
    浏览(32)
  • 用Java代码实现学生管理系统(可实现用户登录注册功能)

    简单实现学生系统的登录和注册,以及学生信息添加、删除,修改、查询功能。根据需求,创建一个学生类和和用户类以及学生系统类,在登录管理系统之前需要先注册用户,只有输入正确的用户名和密码才可以登录,忘记密码后可以根据用户信息进行修改,用容器存储学生

    2024年02月05日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包