表单是收集用户数据的方式，一般注册页面的内容都要写在form标签中

1. form标签上的属性

  1. <form action='' method=''>
  2.         注册内容
  3. </form>
  5. <!-- 
  6.         form标签上的属性：
  8.                     1.action='xxx.php'                                 将用户信息提交到xxx.php文件中
  10.                     2.method='get/post'                             提交方式，get显式提交/post隐式提交
  11. -->

2. 基本框

 <form action="" method="">
   <!-- 文本框 -->
   <input type="text" name="" id="">

   <!-- 密码框 -->
   <input type="password" name="" id="">

   <!-- 日期框 date week time-->
   <input type="date" name="" id="">

   <!-- 数字框 -->
   <input type="number" name="" id="">

   <!-- 上传框 -->
   <!-- multiple 支持多选的属性 多选提交方式应该是post -->
   <input type="file" name="" id="">

   <!-- 取色框 -->
   <input type="color" name="" id="">

   <!-- 邮箱框 -->
   <input type="email" name="" id="">

   <!-- 网址框 -->
   <input type="url" name="" id="">

   <!-- 搜索框 -->
   <input type="search" name="" id="">

   <!-- 拖动按钮 -->
   <input type="range" name="" id="">

   <!-- 磁盘容量条 -->
   <meter></meter>
</form>

3.通用属性

<!-- 
        框上的通用属性：

                    1.placeholder='用户的提示信息'                                    框内提示信息

          2.maxlength='整数'                                                         可输入内容的最大长度

          3.required='required'                                                 必填

          4.disabled='disabled'                                                 禁用

          5.readonly='readonly'                                                 只读

          6.name                                                                                 后台配合的接收字段

          7.value                                                                             用户输入的真实信息会存在此属性中
-->

4.文本域

<!-- 文本域(多行文本框) -->
<textarea rows='' cols='cols' placeholder='这个家伙很懒，什么都没有留下...'></textarea>

Snipaste_2021-03-24_11-59-48.png

5.下拉菜单

<!-- 下拉菜单 -->
<select name="" id="">
      <!-- 下拉菜单分组 -->
      <optgroup label="北方省份">
        <option value="">黑龙江省</option>
        <option value="">吉林省</option>
        <option value="">辽宁省</option>
    </optgroup>

    <optgroup label="南方省份">
        <option value="">湖南省</option>
        <option value="">湖北省</option>
        <option value="">广东省</option>
    </optgroup>
</select>

Snipaste_2021-03-24_11-57-53.png

6.单选、复选

(1) 单选 radio

单选框指只有一个选项的表单，如性别、婚姻状况。

<!-- 单选 -->
<form>
        性别：

      <input type='radio' name='sex' checked>男

      <input type='radio' name='sex'>女
</form>

<!-- 
        name值需要一样时，才能在选项中只选择一个。

        checked是属性的简写方式，checked='checked'默认选项。单选只能默认一个。
-->

(2) 复选 checkbox

复选框指可以选择多个的表单，如爱好。

<!-- 复选 -->
<form>
        爱好：

      <input type='checkbox' name='hobby'>选项1
      <input type='checkbox' name='hobby'>选项2
      <input type='checkbox' name='hobby'>选项3
</form>

<!-- 
        name值需要一样，因为所有选项应该是一件事。

        checked是属性的简写方式，checked='checked'默认选项
-->

7.文本框下拉菜单

<!-- 文本框下拉菜单 -->
<input type="text" name="" id="" list="DataList" autocomplete='on'>
<!-- autocomplete 浏览器基于之前键入过的值，应该显示出在字段中填写的选项。 -->
<datalist id="DataList">
    <option value="选项1"></option>
    <option value="选项2"></option>
    <option value="选项3"></option>
    <option value="选项4"></option>
</datalist>