地址（在其后面加上需要查找的元素）：MDN

表单标记元素

一系列元素，主要用于收集用户数据

form元素

通常，会将整个表单元素，放置在form元素内部，作用是当使用表单时，会将form元素内部的表单内容以合适的方式提交到服务器

form元素对开发静态页面没有什么意义

name —— 表单的名称，如果不写不会传入到服务器

id —— 表单ID号

method —— 设置表单的提交方式，有GET和POST两种

action ——只想处理该表单页面的URL，可以是相对位置或绝对路径

enctype —— 设置表单内容的编码方式 

target —— 设置返回信息的显示方式，可选值有_blank,_top,_self,_parent

novalidate —— 如果设置，则 novalidate 规定在提交表单时不对表单数据进行验证

autofocus —— autofocus 属性是布尔属性。如果设置，则规定当页面加载时 <input> 元素应该自动获得焦点

输入类元素——input元素

<input type="元素类型" name="元素名称" value="输入框的值">

• value属性——输入框的值，属性规定输入字段的初始值，例如：value="John"

• placeholder属性——显示提示文字，文本框没有内容时显示

• maxlength 属性规定输入字段允许的最大长度，例如：maxlength="10"

• size 属性规定输入字段的尺寸（以字符计），例如：size="40"

• disabled 属性规定输入字段是禁用的。例如：disabled="disabled"

• readonly 属性规定输入字段为只读（不能修改）例如： readonly="readonly"

• height 和 width 属性
  height 和 width 属性规定 <input> 元素的高度和宽度。

• min 和 max 属性
  min 和 max 属性规定 <input> 元素的最小值和最大值

min 和 max 属性适用于如需输入类型：number、range、date、datetime、datetime-local、month、time 以及 week。

• multiple 属性
  multiple 属性是布尔属性。

如果设置，则规定允许用户在 <input> 元素中输入一个以上的值。

multiple 属性适用于以下输入类型：email 和 file。

• pattern 属性
  pattern 属性规定用于检查 <input> 元素值的正则表达式。

pattern 属性适用于以下输入类型：text、search、url、tel、email、and password。

• required 属性
  required 属性是布尔属性。
  如果设置，则规定在提交表单之前必须填写输入字段。

required 属性适用于以下输入类型：text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file

• step 属性
  step 属性规定 <input> 元素的合法数字间隔。

• name
  控件的名称，与表单数据一起提交。

• src
  如果type属性的值是image, 这个属性指定了按钮图片的路径

• spellcheck
  将此属性的值设置为true表示元素需要检查其拼写和语法。值default 表示该元素将根据默认行为进行操作，可能基于父元素自己的spellcheck值。值false表示不应该检查元素

form —— form 属性规定 <input> 元素所属的一个或多个表单。也就是说在form之外的<input>添加属性 form = "某个form的id"，则此input属于哪个form

formaction —— formaction 属性规定当提交表单时处理该输入控件的文件的 URL。
formaction 属性覆盖 <form> 元素的 action 属性。
formaction 属性适用于 type="submit" 以及 type="image"。

formenctype —— formenctype 属性规定当把表单数据（form-data）提交至服务器时如何对其进行编码（仅针对 method="post" 的表单）。
formenctype 属性覆盖 <form> 元素的 enctype 属性。
formenctype 属性适用于 type="submit" 以及 type="image"。

formmethod —— formmethod 属性定义用以向 action URL 发送表单数据（form-data）的 HTTP 方法。
formmethod 属性覆盖 <form> 元素的 method 属性。
formmethod 属性适用于 type="submit" 以及 type="image"。

formnovalidate —— novalidate 属性是布尔属性。如果设置，则规定在提交表单时不对 <input> 元素进行验证。
formnovalidate 属性覆盖 <form> 元素的 novalidate 属性。
formnovalidate 属性可用于 type="submit"。

formtarget —— formtarget 属性规定的名称或关键词指示提交表单后在何处显示接收到的响应。
formtarget 属性会覆盖 <form> 元素的 target 属性。
formtarget 属性可与 type="submit" 和 type="image" 使用。

例如：

————————

|请输入位置文字： |

————————

当输入字体时，框内文字消失

• type值

text —— 普通文本框

password —— 密码框  输入的内容，不显示具体内容，以点代替

date——日期选择框，兼容性问题（部分浏览器不支持，不能更改内容）

month —— 允许用户选择月份和年份

week —— 允许用户选择周和年

time —— 允许用户选择时间（无时区）

datetime —— 允许用户选择日期和时间（有时区）

datetime-local —— 允许用户选择日期和时间（无时区） 

email —— 用于应该包含电子邮件地址的输入字段。

tel —— 用于应该包含电话号码的输入字段

url —— 用于应该包含 URL 地址的输入字段。
search —— 搜索框，兼容性问题

range —— 滑块，属性 min="" max=""


color——颜色选择框

number——数字输入框，属性min=""——可输入最小值
                        max=""——可输入最大值
               step=""——步径，每次增加数量
  

radio —— 单选按钮（单选框） ，出现一个空心小圆点，点击选上，变黑；写个属性介绍此框代表的意思——name="";默认值选中：checked

checkbox —— 复选框（多选框），出现一个空心小方框，可以点击，会出现一个对号，再次点击对号消失，写个属性介绍此框代表的意思——name="";

image —— 图像提交按钮 ，利用src可以通过绝对路径或相对路径获取图片，当点击之后会跳转到另一个界面

hidden —— 隐藏域，不会显示在页面山上，只是将内容传递到服务器中

file —— 文件域，可以选择一个文件

按钮 ——  button —— 设置按钮 + value —— 给按钮添加文字

          submit —— 提交按钮，点击之后或跳转到另一个界面+value —— 给按钮添加文字

          reset —— 重置按钮，可以重置输入框的内容+value —— 给按钮添加文字

例子

    <!-- 框 -->
    <input type="text" value="普通文本框：">
    <input type="password" placeholder="密码框">
    <div>
        年月日；<input type="date">
        年月：<input type="month">
        年份，周数：<input type="week">
        具体时间：<input type="time">
    </div>
    <input type="range" min="0" max="5">
    <input type="color">
    <input type="number" min="0" max="9" step="3" placeholder="数字">

    <div>
        性别：
        <input type="radio" name="gander">男
        <input type="radio" name="gander">女
        <input type="radio" checked name="gander">机器人
    </div>
    <div>
        爱好：
        <input type="checkbox" checked name="loves">说
        <input type="checkbox" name="loves">唱
        <input type="checkbox" name="loves">rap
        <input type="checkbox" name="loves">篮球
    </div>
    <input type="image" src="../4. HTML进阶/3. 表单元素/hashiqi.jpg" value="哈士奇" id="hash" style="width:100px ; height:50px">
    <input type="hidden">
    <input type="file">
    <div class="button">
        <input type="button" value="普通按钮">
        <input type="submit" value="提交按钮">
        <input type="reset" value="重置按钮">
    </div>

textarea标签

可替换元素

文本区域框——主要是在输入较长的文本时，可以换行等效果

Common —— 一般属性
name —— 元素的名称
cols —— 文本域可视宽度，必须为正数，默认值为20
rows —— 多行输入与的行数，显示高度，默认值2 
accesskey —— 表单的快捷键访问方式 ，设置快捷键

表单状态

readonly（布尔属性）——是否只读，不会改变表单显示样式，输入域可以选择，但无法修改

disabled（布尔属性）——是否禁用，会改变表单显示样式，禁用文本域，默认false，输入域无法获得焦点，无法选择，以灰色显示，在表单中不起任何作用

select属性——下拉列表

select 与 option标记 配合使用
optgroup元素下拉列表分组

size —— 高度，也就是显示选项的数目

multiple —— 属性设置为true，会向页面显示一个 列表项，按Crtl可以多选，每选一个其背景会变灰，默认为一单选下拉列表

option属性：selected —— 默认选择项，下拉列表，最先显示的次标记值；
<option value="value2" selected>Value 2</option>

配合表单元素使用的元素

label元素

label元素不允许存在div

普通元素，通常使用单选和多选框的使用

• 显示关联

可通过for属性，让label元素关联某一个元素，for属性书写表单元素ID的值

• 隐式关联

直接嵌套使用

datalist元素

数据元素

该元素本身不会显示到页面，通常用于和普通文本框配合使用
会有一种搜索引擎的效果

通过id关联。

list 属性引用的 <datalist> 元素中包含了 <input> 元素的预定义选项。

<!DOCTYPE HTML>
<html>
<body>

<input list="cars" />
<datalist id="cars">
    <option value="BMW">
    <option value="Ford">
    <option value="Volvo">
</datalist>

</body>
</html>

fieldset元素

表单分组

子元素：
legend元素——分组标题

        <fieldset>
            <legend>信息</legend>
            <form action="">
                姓名：<input type="text" name="">
                年龄：<input type="number" name="">
            </form>
        </fieldset>
        <fieldset>
            <legend>地址</legend>
            <form action="">
                省份：<input type="text" name="">
                市区：<input type="text" name="">
                直辖县：<input type="text" name="">
            </form>
        </fieldset>

meter元素

用来显示已知范围的标量值或者分数值，进度条

• value 当前的数值
• min 值域的最小边界值
• max 值域的上限边界值
• low 定义了低值区间的上限值，设置了，它必须比最小值属性大，并且不能超过high值和最大值。未设置或者比最小值还要小时，其值即为最小值。
• high 定义了高值区间的下限值，如果设置了，它必须小于最大值，同时必须大于low值和最小值。
• optimum 这个属性用来指示最优/最佳取值。当使用了low和high属性时，它指明哪一个取值范围是更好的
• form 该属性将本元素与对应的form元素关联。

<meter value="10" max="20"></meter>

progress元素

用来显示一项任务的完成进度
显示为一个进度条形式.

• value 已完成的工作量
• max 需要完成多少工作

<progress  max = "20" value="10"></progress>

output元素

<output>标签表示计算或用户操作的结果。

• for 其它影响计算结果的标签的ID，可以多个。
• form 与当前标签有关联的form（从属的表单）
• name
  name属性。

        <form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
            <input type="range" name="b" value="50" /> +
            <input type="number" name="a" value="10" /> =
            <output name="result"></output>
        </form>

optgroup元素

在一个web表单中, HTML元素 <optgroup> 会创建包含在一个 <select> 元素中的一组选项

• disabled 这个选项组中将没有选项是可以被选择的
• label
  选项组的名字
  使用
  label= "";

        <select selected="selected" style="width:150px">
            <optgroup label="品牌">
                <option value="香奈儿">香奈儿</option>
                <option value="兰蔻">兰蔻</option>
                <option value="兰黛"selected="selected">兰黛</option>
            </optgroup>
            <optgroup label="其他">
                <option value="其他">其他</option>
                <option value="其他">其他</option>
            </optgroup>
        </select>

legend元素

HTML的<legend>元素（也称为HTML的域说明元素）代表一个用于表示它的父元素<fieldset>的内容的标题。

<option>

在web表单中, HTML元素 <option> 用于定义在<select>, <optgroup> 或<datalist> 元素中包含的项。<option> 可以在弹出窗口和 html 文档中的其他项目列表中表示菜单项。