0330-【form表单】常用属性·新增属性·特殊属性

【form表单】
1、两个重要属性：action-表单提交的服务器地址  method-表单提交数据的方法（get/post）
2、get和post的区别：
    get：使用URL传参： http://服务器地址?name1=value1&name2=value2
                            (?表示传递参数，?后面采用name=value的形式传递，多个参数之间，用&链接)
          URL传参不安全，所有信息可在地址栏看到，并且可以通过地址栏随意传递其他数据。
          URL传递数据量有限，只能传递少量数据。
    POST：使用http请求传递数据。URL地址栏不可见，比较安全。且传递数据量没有限制。
3、【input常用属性】
    type:表示input输入框的类型。
    name:input输入框的别名。一般情况下，必填。因为，传递数据时，使用name=value的形式传递
    value:input输入框的默认值。
    placeholder：input的提示内容，当输入框用value的时候，提示内容消失。
    （了解）tabindex="1" 控制点击tab键时的跳转顺序，从最小的开始，逐个往大的数值跳转 获得焦点。
  【input特殊属性】
    checked="checked" 默认选中。
    disabled="disabled" 设置控件不能使用。用在按钮上不能点击，用在输入框上不能修改。
                        而且，如果输入框disabled，则输入框信息不能往后台传递。
    hidden="hidden" 隐藏。等同于<input type="hidden" name="username" value="1234" />
                            常用于配合disabled，或根据其他需要，使用隐藏域传递数据。
4：【input-type属性详解】
    text：文本输入框
    password：密码输入框，输入内容时显示小黑点。
    radio：单选按钮。
    checkbox:复选按钮。
                >>> name和value属性需同时存在，提交时，提交的是value中的属性值。
                      例如：<input type="radio" name="sex" value="男"/> 提交时，显示“sex=男”
                >>> radio凭借name属性区分是否为同一组。name相同，为同组，同组中只能选择一个。
                >>> checked="checked" 默认选中。（radio只能选一个，checkbox可以选多个）
    file:文件上传按钮。
    submit：提交按钮。提交表单数据。
    reset：重置按钮。将表单数据重置为初始状态。
    image：图形提交按钮。功能同submit，可以提交数据。
    button：普通按钮。没有任何功能


5、【下拉选择控件 select】
    写法：<select>
             <option></option>  //可以有N多个
         </select>
    name属性，应该写在<select>上，所有选项只有一个name
    multiple="multiple" 设置select控件为多选，可在界面使用Ctrl+鼠标，进行多选。一般不用。
    option常用属性：
            value="":当option没有value属性时，往后台传递的是<option></option>标签中的文字；
                        当option有value属性时，往后台传递的是value属性的值。
            title="":鼠标指上后显示的文字。
            selected="selected":默认选中。
    <optgroup label="山东省"></optgroup> :用于将option标签进行分组，label属性表示分组名。


6: 【文本域 textarea】
    写法：<textarea></textarea>
    设置宽高style="width: 200px; height: 150px;"  自身有cols="" rows=""两个属性，但不常用
    readonly="readonly" 设置为只读模式，不允许编辑。
    style="resize: none;" 设置为宽高不允许修改。
    style="overflow: ;" 设置当文字超出区域时，如何处理。
                    >>> 也可以通过overflow-x/overflow-y分别设置水平垂直方向的显示方式。
                    >>> 常用属性值:hidden 超出区域的文字，隐藏无法显示
                                 scroll 无论文字多少，均会显示滚动
                                 auto  自动，根据文字多少自动决定是否显示滚动条（默认样式）


7: 【表单的边框与标题】
    <fieldset>  //表单边框
       <legend>联系方式</legend>  表单标题
    </fieldset>
    >>>如果想要让标题嵌入到边框中，需将标题标签写到边框标签里面。
    >>>一个表单，可以有多组边框+标题的组合。



8: 【HTML5 智能表单】
    H5新增input的form属性，用于指向特定form表单的id，实现input无需放在form标签之中，即可通过表单进行提交。
    <FORM id=foo>
        …
    </FORM>

    <INPUT … form="foo">

    type新增属性：详见表格
      email、URL、date、time、month、week、number、range、color

    input元素的新增属性：
    Autocomplete：自动完成功能.记录用户之前输入的内容，并在下次输入时自动提示完成输入。
    >>> 属性值： on/off
    >>> 可以在form表单上使用，对整张表单的所有控件进行自动完成的开关
          也可以在input上使用，对特定输入框进行修改。
    >>> 绝大部分浏览器，默认开启。

    Autofocus：自动获得焦点. autofocus="autofocus",只能设置input元素自动获得焦点。

    Form：所属表单。通过form表单的id，确定此input输入哪张表单。

    Required：必填.required="required" 设置input必填，否则阻止提交。

    Pattern：使用正则表达式验证input的模式（后续讲解）

    Placeholder：提示内容，当有value时，取消提示。