教你如何快速码出一个简单的注册表单

最新推荐文章于 2024-10-01 20:03:47 发布

昨夜秋风拂

最新推荐文章于 2024-10-01 20:03:47 发布

阅读量316

点赞数 1

分类专栏： HTML 文章标签： html 前端 css

本文链接：https://blog.csdn.net/L20220927Y/article/details/127658685

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、所用标签介绍

1.form表单域，写表单时必写的标签

2.input，用于搜集用户信息，根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

3.password 密码域，用来书写密码

4.radio 单选框，提供选择的

5.checkbox 复选框，可同时选择多个

6.select 下拉框，配合option使用，下拉显示信息

7.textarea 多行文本，用来撰写大量文字的

8.file 文件域，上传文件使用

9.submi 提交按钮

10.image 图片按钮

11.reset 重置按钮

二、代码实操

1.样图展示

2.代码搭建

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>注册</title>
  <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3717635_mg55utlwl2.css">
  <style>
    * {
      margin: 0px;
      padding: 0px;
      list-style: none;
      text-decoration: none;
    }
    form{
      width: 450px;
      height: 500px;
      border: 1px solid rgb(194, 193, 193);
      border-radius: 10px;
      margin: 100px auto;
    }
    header{
      width: 420px;
      margin: 20px 20px;
      position: relative;
    }
    .s1{
      font-size: 18px;
      font-weight: 600;
      color: rgb(74, 74, 74);
      margin-left: 10px;
    }
    img{
      position: relative;
      top: 5px;
    }
    .s2{
      position: absolute;
      right: 20px;
      top: 10px;
      color:rgb(129,201,248);
    }

    
    main {
      width: 400px;
      margin: 0px auto;
      position: relative;
    }
    p{
      margin-top: 20px;
    }

    input {
      outline: none;
      border-style: none;
    }

    .p1,.p2,.p3,.p4 {
      border-bottom: 1px solid rgb(185, 183, 183);
      line-height: 40px;
      color: rgb(185, 183, 183);
    }
    .p3>a{
      position: absolute;
      right: 10px;
      color: red;
    }
    footer{
      text-align: center;
      margin-top: 50px;
    }
    footer>input:nth-of-type(1){
      width: 400px;
      border:1px solid rgb(207, 207, 207) ;
      background-color: rgb(207, 207, 207);
      line-height: 40px;
      color: white;
      font-weight: 600;
      font-size: 20px;
    }
    footer>input:nth-of-type(2){
      margin-top: 30px;
    }
  </style>
</head>

<body>
  <form action="qn.java" method="post">
    <header>
      <img src="../logo.91f4645c.svg" alt=""><span class="s1">注册</span> <a class="s2"  href="#">返回登录</a>
    </header>
    <main>
      <p class="p1"><i class="iconfont">&#xe6b2;</i><input type="text" name="tel" maxlength="12" value="&nbsp; 请输入手机号"></p>
      <p class="p2"><i class="iconfont">&#xe749;</i><input type="text" name="name" maxlength="12" value="&nbsp; 请输入昵称"></p>
      <p class="p3"><i class="iconfont">&#xe80e;</i><input type="password" name="password" maxlength="12" value="请输入密码"> <a href="">获取验证码</a> </p>
      <p class="p4"><i class="iconfont">&#xe608;</i><input type="text" name="identifying code" value="&nbsp; 请输入短信验证码"></p>
    </main>
    <footer>
      <input  type="submit" name="zhuce" value="注册"><br>
      <input type="checkbox" checked>我已经认真阅读并同意Acfun的<a href="#">《使用协议》</a>
    </footer>
  </form>
</body>

</html>