用HTML设计最基础的登录页面工具/原料moredw方法/步骤1/5分步阅读

新建一个HTML文档，如图所示

2/5

设计基本登录页面，在body编写一个form标签

3/5

在form标签内输入

id=loginForm action= method=post

如图所示

4/5

然后在form标签里输入三个p标签

5/5

第一个p标签输入

用户名：input type=text name=username required /

第二个标签输入

密 码：input type=password name=password required /

第三个标签输入

input type=submit /

如图所示

方法/步骤21/5

建立js标签，输入script

2/5

然后在script标签里输入

(function() )();

3/5

然后编写if else语句，输入

if (typeof window.screenX === number) {

var eleLoginForm = document.querySelector(#loginForm);

eleLoginForm.addEventListener(submit, function(e) {

localStorage.username = document.querySelector(input).value;

alert();

this.reset();

e.preventDefault();

}, false);

} else {

alert();

4/5

在if里的alert输入登录成功

在else里的alert输入浏览器不支持HTML5表单

5/5

最后按f12预览即可看到登录页面

HTMLWEB前端