在日常工作中，表单会经常被使用，例如制作会员注册页面、会员登录页面、留言板等等，下面我来用一个实例来演示如何使用表单实现用户登录和用户注册的。

1、表单的属性和元素

我在学习表单的时候，有这么个疑问：现在我们见到的表单多种多样，有提交信息的，有填写留言的，那我们再制作表单的过程中用到的属性是否是多种的呢？答案是否定的，表单的元素仅有一个，他就是<form>，下面来介绍一下<form>的常用属性：

2、常见的表单控件以及常用属性和类型

在表单的制作中，我们最常用到的表单空间元素是<input>,而且为了满足表单在不同的使用场景下的应用，表单的常用属性有以下这些属性：

使用以上控件属性可以满足我们大部分表单的使用场景。

3、案例

下面我用以上的元素及控件做个简单的小表单，供大家参考：
效果如下：

下面奉上代码，可供参考：

 <div class="from">
      <h1>注册表单练习</h1>
      <form action="" action="check.php" method="post">
        <label for="name"> 用户名：</label
        ><input type="text" name="name" id="name" required /><br />
        <label for="mima"> 密码：</label
        ><input type="password" id="mima" required /><br />
        <label for="queren"> 确认密码：</label
        ><input type="password" id="queren" required /><br />
        <label for="email">邮箱: </label
        ><input
          type="email"
          id="email"
          required
          title="example@domain.com"
          pattern="\w+@[a-z0-9]+\.[a-z]+"
          required
          title="example@domain.com"
        /><br />
        <div class="aihao">
          <label for="">爱好：</label
          ><input type="radio" name="aihao" id="ktv" /><label for="ktv"
            >唱歌</label
          ><input type="radio" name="aihao" id="swimming" /><label
            for="swimming"
            >游泳</label
          ><input type="radio" name="aihao" id="game" /><label for="game"
            >打游戏</label
          ><input type="radio" name="aihao" id="play" /><label for="play"
            >旅游</label
          >
        </div>
        <div class="qita">
          <label for="eud">学历：</label>
          <select name="edu" id="edu">
            <option value="1">初中</option>
            <option value="2">高中</option>
            <option value="3">专科</option>
            <option value="4">本科</option>
            <option value="5">硕士</option>
          </select>
          <div>
            <label for="user-pic">头像:</label>
            <input type="hidden" name="MAX_FILE_SIZE" value="80000" />
            <input type="file" name="user_pic" id="user-pic" />
          </div>
          <label for="user-resume">简历:</label>
          <div>
            <textarea name="user-resume" id="1" cols="30" rows="10"></textarea>
          </div>
        </div>
        <button>提交</button>
      </form>
    </div>

以上是表单的代码，想达到这个效果，还需要一些css的效果（由于css刚开始学没几天写的很差，大家看看就行），下面奉上css的代码：

<style>
      body {
        background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603708949815&di=a8b4936fd1e4f921b37e0e6b7c726a2c&imgtype=0&src=http%3A%2F%2Fa.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F10dfa9ec8a136327faed6472918fa0ec08fac76b.jpg);
        background-size: 100%;
        overflow: auto;
      }
      .from {
        background-color: rgba(0, 132, 255, 0.6);
        width: 500px;
        margin: auto;
        height: 30em;
        margin-top: 10%;
      }
      h1 {
        color: #fff;
        text-align: center;
      }
      form {
        text-align: right;
        color: #fff;
        width: 358px;
        font-size: 1.2em;
      }
      input {
        border-radius: 0.4em;
        /* width: 205px; */
      }
      button {
        background-color: hotpink;
        color: #fff;
        cursor: pointer;
        border: none;
        font-size: 0.8em;
        float: right;
        margin: 1.5em -8em;
      }
      .aihao {
        width: 444px;
        margin: auto;
      }
      .qita {
        text-align: left;
        width: 302px;
        padding-left: 7em;
      }
    </style>

4、总结

表单在前端开发里还是比较重要的，还是得多看多写多练，我在写表单的时候，说实话没有踩什么坑，主要还是对一些属性和控件记得不是很牢靠，有些想不起来的地方还是得看资料，还是需要下来多练习练习，争取不看资料自己能熟练的默出来。

Correcting teacher：天蓬老师

Correction status：qualified

Teacher's comments：看来你是有一定的基础, 恭喜你, 一定能成功