[06]HTML基础之表单标签

1. <form>标签

表单容器，指定method属性和action属性是个良好的习惯。

<form methor="POST" action="http://www.juetan.cn/user/1">
    //其他属性：
    name：表单名称，便于在Javascript中引用该表单。
    target：表单提交的窗口怎么打开，_self(默认),_top,_blank,_parent四种值。
    enctype：内容类型，application/x-www-form-urlencoded(默认),multipart/
            form-data,text/plain三种值。
    autocomplete：自动完成，如果之前填写过表单，再次输入时可快速完成输入。
    novalidate：不验证表单数据的格式是否正确。
    accept-charset：表单提交时所使用的字符集，如UTF-9，ISO-8859-1等。
</form>

2. <fieldset>标签

表单集合，一般将多个输入归为某类；与<legend>标签搭配，后者表示该集合的标题；两者结合表现为黑色边框加标题。

<fieldset>
    <legend>包装信息</legend>
    //如外壳颜色，盒子样式，盒子长度等选项
</fieldset>

3. <select>标签

下拉列表，指定name属性是个好习惯；与<opgroup>标签、<option>标签搭配，<opgroup>标签指定label属性、<option>属性指定value属性也是个好习惯。

<select name="city">
    <optgroup label="广东省">其他属性：
        <option value="sz">深圳</option>
    </optgroup>
    <optgroup label="广西省">
        <option value="gg">贵港</option>
    </optgroup>
</select>

[1] <select>标签属性：
name(列表名称)：文本值，表单提交的时候用到；
form(所属表单)：表单id，多个表单以空格分隔；
multiple(允许多选)：布尔值，默认false；
size(显示数量)：数值，下拉列表显示多少个选项；
required(必须选择)：布尔值，默认false；
disabled(禁用列表)：布尔值，默认false；
autofocus(自动完成)：布尔值，默认false；

[2] <optgroup>标签属性：
label(分组描述)：文本值；
disabled(禁用选项)：布尔值，默认false；

[3] <option>标签属性：
value(属性值)：文本值；
selected(被选中)：布尔值，默认false；
label(标签)：文本值，在<optgroup>选项分组中使用；
disabled(禁用选项)：布尔值，默认false。

4. <output>标签

表示输出结果；<meter>标签表示数值量程，表现为水平圆柱进度效果；<progress>标签表示任务进度，表现为水平矩形进度效果。

//输出结果
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
//数值量程
<meter value="60" min="0" max="100">不支持该标签时显示</meter>
//任务进度
<progress></progress>

[1] <output>标签属性:
name(选项名称)：文本值，表单提交时用到；
for(关联元素)：与输出结果有关联的选项，多个值以空格分开；
form(所属表单)：表单id，多个值以空格分隔；

[2] <meter>标签属性：
value(当前值)：数值；
min(量程最低值)：数值，当前值不能低于该数值；
max(量程最大值)：数值，当前值不能大于该数值；
low(低值)：数值，如果当前值低于该值，量程颜色由绿色变为黄色；
hight(高值)：数值，如果当前值高于该值，量程颜色由绿色变为黄色；
optimum(最优值)：数值，当前量程的最优值；
form(所属表单)：表单id，多个值以空格分隔；

[3] <progress>标签属性：
value(当前值)：数值；
max(最大值)：数值，任务的最终值；

5. <datalist>标签

表示<input>标签的可能预选项，<datalist>标签指定id属性，<input>标签的list属性指定<datalist>标签的id属性

<input name="game" list="game-list">
<datalist id="game-list">
    <option value="lol"></option>
    <option value="cf"></option>
</datalist>

6. <label>标签

表示输入框的标签，与<input>标签搭配使用。

//可以与<input>标签并列使用(需要指定for属性)
<input type="radio" name="switch">  <label for="switch">开关</label>
//也可以包含<input>标签(无需指定for属性)
<label><input type="radio" name="switch">开关</label>

7. <textarea>标签

表示文本输入域，适合多行文本输入。

<textarea name="comment">

</textarea>

属性：
name(输入框名称)：文本值，表单提交时用到；
cols(可见列数)：数值；
rows(可见行数)：数值；
wrap(如何换行)：hard(硬分行)，soft(软分行)；
maxlength(最大字符数)：整数，文本框可输入的最大字符数；
placeholder(输入提示)：文本值，以浅灰色字体显示在文本框的简短提示；
readonly(是否只读)：布尔值，默认false；
required(是否必填)：布尔值，默认false；
disabled(是否禁用)：布尔值，默认false；
autofocus(自动聚焦)：布尔值，默认false；

8. <button>标签

表示按钮。

//作为普通按钮使用
<button type="button">退出</button>
//作为表单提交按钮使用(需在form元素内使用)
<button type="submit">提交</button>

9. <input>标签(单标签)

表示输入框，极其强大的输入类型(23种)，构成表单丰富的交互体验。

//最最常用的属性
<input name="username" type="text" value="juetan">

一般传统属性：
name(输入框名称)：输入框的名称，应当唯一，表单提交时用到；
value(输入框的值)：输入框名称对应的值；
type(输入框类型)：共23种输入框类型，7个专属属性
    text(文本)，与maxlength属性搭配
    password(密码)，与maxlength属性搭配
    radio(单选)，与checked属性搭配
    checkbox(多选)，与checked属性搭配
    file(文件),专属属性：accept属性
    hidden(隐藏)
   image(图片)，专属属性：alt属性，src属性，width属性，height属性
   button(按钮)
   reset(重置)
   submit(提交)

   week(周几)
   month(月数)
   date(日期)
   time(时间)
   datetime(日期时间)
   datetime-local(本地日期时间)
   number(数字)
   email(邮箱)
   url(链接)
   search(搜索)
   tel(电话)
   range(范围)
   color(颜色)

form(所属表单)：表单id，多个表单id以空格分隔；
size(输入大小)：对于text或password来说，表示可见字符数，对于其他类型，表示宽度

autocomplete(自动完成)
autofocus(自动聚焦)
novalidate(不验证内容)
list(可选列表): 只与<datalist>标签搭配使用；
min(最小值)
max(最大值)
step(数值间隔)

multiple(是否允许多值)：只适用于type="file"和"email"的input元素；
pattern(验证模式)：正则表达式；
placeholder(占位符)

required(是否必填)：true，false；
readonly(是否只读)：true，false；
diasbled(是否禁用)：true，false；

表单重写属性：
formmethod(表单方法)：GET,POST,PATCH,DELETE等；
formaction(提交地址): URL格式；
formenctype(加密方式)：text/x-www-form-urlencoded,multiple/form-data；
formvalidate(验证内容)：true,false；
formtarget(打开方式)：_self,_parent,_top,_blank；