用HTML设计最基础的登录页面

来源：互联网 2023-03-16 19:16:25 160

用HTML设计最基础的登录页面

工具/原料

方法/步骤

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

用HTML设计最基础的登录页面

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

用HTML设计最基础的登录页面

在form标签内输入

id="loginForm" action="" method="post"

如图所示

用HTML设计最基础的登录页面

3相关内容未经授权抓取自百度经验

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

用HTML设计最基础的登录页面

第一个p标签输入

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

第二个标签输入

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

第三个标签输入

input type="submit" />

如图所示

用HTML设计最基础的登录页面

方法/步骤2

建立js标签，输入script

用HTML设计最基础的登录页面

然后在script标签里输入

(function() )();

用HTML设计最基础的登录页面

然后编写if else语句，输入

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

var eleLoginForm = document.querySelector("#loginForm");

eleLoginForm.addEventListener("submit", function(e) {

localStorage.username = document.querySelector("input[name='username']").value;

alert();

this.reset();

e.preventDefault();

}, false);

} else {

alert();

用HTML设计最基础的登录页面

在if里的alert输入登录成功

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

用HTML设计最基础的登录页面

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

用HTML设计最基础的登录页面

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签： HTML

上一篇：如何在js里实现点击元素后移除元素下一篇：HTML中定义字体较大文本

用HTML设计最基础的登录页面

工具/原料

方法/步骤

方法/步骤2

热门文章

标签列表