aspnet登录界面代码_【原创技术分享】HTML简易登录注册表单制作

HTML简易登陆注册表单制作

登录页面在日常生活中十分常见。制作登录页面首先构思页面中想要哪些组成部分，可以打一个草稿，例如下图。

在html文件中的

标签下写入这些内容。

(由于登录框和注册框结构类似，下图只展示登录框的代码。注册框同理，放在另一个id=”signup”的

中，并且与登录框一同包含在类名为box的

标签内)

完成之后在浏览器中查看效果。(图中使用浏览器为Chrome)

然而在理想的效果中，登录框与注册框并不是同时出现的，所以先将注册框隐藏，即在css中设置其display为none。

同时通过css来简单排版得到下图效果。

接下来要实现的目标是 ：

a)设置文本框为必填字段；

b)通过点击

文字跳转切换登录与注册两个框；

c)在注册表单中再次输入密码与密码相同才能注册成功，否则显示警告“两次密码不相同”。

目标a: 设置文本框为必填字段

只要在该标签中加入required(或者required ="required")即可。

再跟上oninvalid = "setCustomValidity ('这里可以自定义input的值提交无效时给的提示')"，

再加上oninput = "setCustomValidity ('')"让提示框出现过后在修改input的值时不显示。

登录框的代码如图，注册框同理

显示效果，在信息填写不完整时点击“登录”按钮：

目标b：切换跳转

这里要用到javascript。

先实现登录界面跳转注册界面，在