html编写·登录框

用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>

登陆界面:
html编写·登录框_第1张图片
完整代码如下:

<!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内插入以下代码:


美化后的登录框效果:
html编写·登录框_第2张图片

你可能感兴趣的:(HTML)