常用html元素（下）

在发送网络请求的时候分为get和post请求，get请求直接返回资源相对来讲如果涉及到密码比较隐私的数据等是非常不安全的，这里我们推荐post，提到post我们就不得不提到表单数据这里介绍下一些常用的表单元素

<from>表单元素

action：处理表单提交url，可以被提交按钮的的formaction属性覆盖
method 提交类型:
get:默认值,表单数据以请求参数形式通过url提交，数据量最大2k；
post：表单数据放在请求体重发送，数据量更大更安全
可以被formaction属性覆盖
enctype编码方式：
当method=‘post’取值才有意义
可以被formaction属性覆盖
实际上就是表单内容提交到服务器的MIME类型
enctypeq取值：
application/x-www-from-urlencoded:默认值，适合发送value值，使用URL编码， get/post均适合
multipart/form-data:适用于文件上传，采用二进制流，将文件域中的内容封装到请求参数重发送
text/plain:适用于调试或者发送邮件如<from: action="mailto:url" enctype="text/plain">
name:表单唯一的名称
与id 一样用来唯一标识元素，同于表单控件元素的from属性，用来绑定所属表单，可以快捷访问内部控件元素
autocomplete:自动填充完成

<label>控件标签

for属性：与指定控件的id属性绑定，实现点击标签时，被绑定的控件自动获取焦点
显示绑定：
<lable for="email">Email:</lable><input type ="email " id="email">
隐示绑定:
<lable>Email:</lable><input type="email"></lable>不需要for id属性

<input>输入框

type类型（前9个比较常用）

text:单行文本框
password:密码框输入显示*
email:邮箱文本框 h5现在可以自动验证
number:整数值文本框，智能输入数字
radio:单选按钮仅允许用户多选一
checkbox:复选框允许用户选择一个或者多个
file ：文件上传域专用于上传文件到服务器
hidden：隐藏域不显示，但可以被提交
search：搜索框，可能会有清空按钮
submit：提交按钮（用button代替）
reset：重置按钮（尽量少用）
button：普通按钮：（仅有视觉效果无默认行为）
date：日期选择器
time：输入时间
color：拾色器控件
image：图片式提交按钮，src指定图片
range：拉杆范围拖拖动条
tel：输入电话号码
url：输入url地址

name：名称

请求参数的名称，对应脚本处理名字的变量名
单选按钮中，所有按钮的name属性值应该相同
复选框中，name值推荐使用数组语法"colors[],以实现多选效果"
文件上传中，作为后台脚本的文件引用标识，如PHP中的"$_FILES"

value：值

请求参数的值，对应脚本处理的变量值，使用预定义值控件无效

placeholder:提示信息

仅限输入框text和password，输入提示框的提示信息，可以被value内容覆盖

required：必填项

实战：

比如我们用以上控件做一个用户登录的提交表单案例，代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表单提交</title>
  </head>
  <body>
    <form action="" method="POST">
      <fieldset>
        <legend>必填项</legend>
        <div>
          <label for="username">账号：</label>
          <input
            type="text"
            id="username"
            autofocus
            required
            placeholder="必须是6-8位"
          />
        </div>
        <div>
          <label for="password">密码：</label>
          <input
            type="text"
            name="password"
            id="password"
            required
            placeholder="必须是字母+数字，6-8位"
          />
        </div>
        <div>
          <label for="email">邮箱：</label>
          <input
            type="email"
            name="email"
            id="email"
            placeholder="必须是xxx@xxx.com"
          />
        </div>
      </fieldset>
      <!-- 输入文本框 -->
      <!-- 单选框 多选一 -->
      <div>
        <label for="secret">性别</label>
        <input type="radio" name="gender" id="gender" value="male" />
        <label for="male">男</label>
        <input type="radio" name="gender" id="gender" value="female" />
        <label for="female">女</label>
        <input type="radio" name="gender" id="gender" value="secret" checked />
        <label for="secret">保密</label>
      </div>
      <!-- 复选框 -->
      <div>
        <label for="">爱好</label>
        <!-- 因为允许同时要提交都服务器要写成数组格式  -->
        <input type="checkbox" name="array[]" id="photo" /><label for="photo"
          >摄影</label
        >
        <input type="checkbox" name="array[]" id="swim " /><label for="swim"
          >游泳</label
        >
        <input type="checkbox" name="array[]" id="eat" /><label for="eat"
          >美食</label
        >
        <input type="checkbox" name="array[]" id="tv" /><label for="tv"
          >电影</label
        >
      </div>
      <!-- 下拉列表  select -->
      <div>
        <select name="level" id="">
          <option value="1">青铜</option>
          <option value="1">白银</option>
          <option value="1">黄金</option>
          <option value="1">铂金</option>
          <option value="1">钻石</option>
          <option value="1">王者</option>
        </select>
      </div>
      <!-- datalist 输入框+下拉列表    -->
      <div>
        <label for="search">关键字：</label>
        <input type="search" name="search" id="search" list="my-key" />
        <datalist id="my-key">
          <option value="HTML"></option>
          <option value="JAVA"></option>
          <option value="PYTHON"></option>
          <option value="C++"></option>
        </datalist>
      </div>
      <div>
        <button type="submit">提交</button>
      </div>
    </form>
  </body>
</html>