HTML与JavaScript实现注册页面

1.实现效果

2.HTML表单

2.1input标签

2.2for属性

2.3name属性

2.4select标签

3.JS窗口事件

3.1document.getElementById简单介绍

4.HTML和JavaScript源码

HTML与JavaScript实现注册页面

1.实现效果

HTML与JavaScript实现注册页面

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

最终实现效果:

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

2.HTML表单

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

2.1input标签

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

HTML与JavaScript实现注册页面

一个密码框:

显示效果:

HTML与JavaScript实现注册页面

2.2for属性

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

效果展示:

HTML与JavaScript实现注册页面

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

2.3name属性

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

	
		
			
				爱好:
				篮球
				羽毛球
				拳击

显示效果:

HTML与JavaScript实现注册页面

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

	
		
			
				爱好:
				篮球
				羽毛球
				拳击

显示效果:

HTML与JavaScript实现注册页面

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

2.4select标签

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

	
		
			
				
				选择住址
				湖北
				新疆
				西藏

显示效果:

HTML与JavaScript实现注册页面以上代码展示了、、value的用法，实现了一个简单选择框。

3.JS窗口事件

3.1document.getElementById简单介绍

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

	
		
			
				
			
		
		
			document.getElementById('but').onclick = function() {
				alert("弹出一个警告");
			}

显示效果:

HTML与JavaScript实现注册页面

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

4.HTML和JavaScript源码


	
		
		注册框的实现
		
			* {
				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;
			 }

		
	
	

		
			
				注册
				
					
						账号
						
					
					
						密码