【HTML5】登录页面制作简易版

2023-04-20 292

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 本文讲解：登录页面制作简易版

刚开始学习Java。文件的命名，讲道理应该以英文为主，但是英语又不好，所以只好用拼音，最痛苦的应该算是那些英语又不好，又想秀一下的程序员，一半英语一半拼音，如mainFangFa~~~你说看了糟心不糟心。

前言：

大家好，我是拳击哥。今天给大家带来的是采用外部样式表制作一个简单的登录页面制作，主要讲解form表单的用法以及class属性用法。

1、form表单定义和用法

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

1.1input标签定义和用法

<input> 标签规定用户可输入数据的输入字段。根据不同的 type 属性，输入字段有多种形态。输入字段可以是text（文本）、password（密码）、radio（单选按钮）、checkbox（多选框）、button（按钮）等等。

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

编辑

1.2label标签for属性

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

1.3实例

制作一个账号密码的显示，我们用到text（文本）和password（密码）属性

<form>
  <div>
  <label for="username">账号</label>
  <input type="text" name="username"/>
  </div>
  <div>
  <label for="pass">密码</label>
  <input type="password" name="pass"/>
  </div>    
</form>

页面显示效果：

编辑

我们可以认为是拥有两个for分别带有两个input中相同标签的text、password的表单。

第一个div中账号for的""内容与第一个input中name相同，因此for属性规定了label绑定了text表单元素。

第二个div中密码for""内容与第二个input中name相同，因此for属性规定了label绑定了password表单元素。

2、HTML5class属性

在HTML5中，class属性可以定义元素的类名，常用于指向样式表的类（class选择器）。我们在css中通过.号来引用类名。前提得用<link>标签定义文档与外部资源的关系。比如<link href="css/test.css" rel="stylesheet"/>。

实例：我要通过css设置html里面一个段落

<p class="test"> 人活一生，值得爱的东西很多，不要因为一个不满意就灰心。<br />
出门在外不论别人给你热脸还是冷脸都别往心里去，外面的世界
尊重的是人的背景而非人本身。
</p>

.test {
  font-size: 15px;
  color: orange;
  background: chocolate;
}

页面显示效果：

编辑

3、设计登录页面

3.1html源码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>登录页面</title>
    <link type="text/css" href="../css/task_twenty.css" rel="stylesheet">
  </head>
  <body>
    <form action="#" method="post">
      <div class="form-control">
        <label for="username">账号</label>
        <input type="text" id="username" name="username" class="number" pattern="^[a-zA-Z][a-zA-Z0-9][]$" required />
      </div>
      <div class="form-control">
        <label for="password">密码</label>
        <input type="password" id="password" name="pas" class="pas" pattern="^[a-zA-Z]\w{5,17}$" required/>
      <button class="loginbtn" >登录</button>
    </form>
  </body>
</html>

3.2css源码

* {
  padding: 0;
  margin: 0;
  border: 0;
}
body {
  font-size: 18px;
  font-family: "黑体";
  background: url(../img/timg.jpg) no-repeat top center;
  color: #FFF;
}
form {
  width: 420px;
  height: 200px;
  padding-top: 60px;
  margin: 250px auto;
  background: rgb(255,255,255,0.1);
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.3);
}
.form-control {
  margin-top: 15px;
  text-align: center;
}
.number,.pas {
  width: 165px;
  height: 18px;
  border: 1px solid rgba(255,255,255,0.3);
  padding: 2px 2px 2px 22px;
  border-radius: 5px;
  color: #FFF;
}
.number {
  background:url(../img/33.png) no-repeat 5px center rgb(255,255,255,0.1) ;
}
.pas {
  background: url(../img/44.png) no-repeat 5px center rgba(255,255,255,0.3);
}
.loginbtn {
  width: 193px;
  height: 28px;
  border-radius: 6px;
  border: 10px solid #000;
  margin-left: 45px;
  background: #2d77bd;
  color: #FFF;
  border: none;
  margin-top:10px;
}