runsly 技术分享 2021-10-22

HTML+CSS编写登录框

用html制作登陆框并用css美化

登录框的编写

1.表单提交：

<form action="/form.html" method="GET">

action 是表单提交的地址
method 是提交保单的方法

<input type="submit" value="确认登陆">

提交表单

<input type="reset"  value="清空">

对表单里面已经输入的内容做重置

2.账号和密码的输入：

<div class="flex1">账号：<input type="text"></div>
<div class="flex1">密码：<input type="password"></div>

3.单选框：
设置一个单选框，代码如下：

<div class="city">
          <label for="city">位置</label>
          <select name="city" id="city">
                <option value="zhenzhou" selected >郑州</option>
                <option value="luoyang">洛阳</option>
                <option value="aayang">安阳</option>
                <option value="sanmengxia">三门峡</option>
                <option value="pindingshan">平顶山</option>
                <option value="xinyang">信阳</option>
          </select>

登陆界面：

完整代码如下：

<!DOCTYPE html>
<html>
<head>
      <title>登录</title>
</head>
<body>
<form action="/form.html" method="GET">
     <!-- action： 表单提交的地址 -->
    <!-- method：提交保单的方法 -->
    <div class="login">
       <div class="flex1 login-top">登录窗口</div>
       <div class="flex1">账号：<input type="text"></div>
       <div class="flex1">密码：<input type="password"></div>
       <div class="city">
          <label for="city">位置</label>
          <select name="city" id="city">
                <option value="zhenzhou" selected >郑州</option>
                <option value="luoyang">洛阳</option>
                <option value="aayang">安阳</option>
                <option value="sanmengxia">三门峡</option>
                <option value="pindingshan">平顶山</option>
                <option value="xinyang">信阳</option>
          </select>
       <!-- selected 表示被选中在页面展示的选项 -->
       <input type="submit" value="确认登陆"> 
       <!-- 可以提交表单 -->
       <input type="reset"  value="清空">
       <!-- 对表单里面已经输入的内容做重置 -->
   </div>
</body>
</html>

CSS美化：

在head内插入以下代码：

<style> .login{
            width: 300px;
            height: 100px;
            background: #eee;
            border-radius: 10px;
            margin: 100px auto;
            display: flex;
            flex-direction: column;
        }
        body{
            background:#369;    
        }
      </style>