表单

action：指定表单数据提交的地址

method：表单数据提交的方法

 

为了往服务端提交数据时，提交的数据清晰易懂，方便处理：

1.普通输入框：需要添加name属性，来保证键值对的完整

2.非输入框：需要添加name（用来分组）,value（用来生成键值对的）属性，

          来保证键值对的完整，name还有分组的作用，

         单选框：相同name的是一组，

         单选框中同一组内的选项有互斥的效果

         复选框：也需要name属性来表明当前的多项式一组。

 

get请求：通过get请求往服务端提交数据的时候，提交的数据会追加在url地址的后面以？进行分隔，多个数据之间使用&分隔。

get请求的缺点：暴露敏感信息，传输数据有限

get请求的优点：传输速度快

 

post请求：传输的数据放在请求体重，而不是暴露在url地址的后面

优点：可以隐藏敏感信息，传输的数据多少没有限制

缺点：传输速度慢（相对的）

 

四个按钮：

type:reset         重置按钮

type:submit        提交按钮

type:image         具有提交的功能

<button></button>  具有提交的功能

 

tabindex：1为开始索引

当input中，type的值为：

<!--text···············单行文本输入>

姓名：<input type="text" name="name">

<!--radio··············单选-->

性别：<input type="radio" name="sex"  value="man">男
      <input type="radio" name="sex" value="woman">女
      <input type="radio" name="sex">保密

<!--checkbox···········多选-->

 爱好：<input type="checkbox" name="hobby" value="basketball">篮球
      <input type="checkbox" name="hobby" value="football">足球
      <input type="checkbox" name="hobby" value="tennis">网球

下拉框

 籍贯：<select name="home" >
    <option value="sd">山东</option>
    <option value="sx">山西</option>
    <option value="gd">广东</option>
    <option value="hn">河南</option>
    <option value="gx">广西</option>
    <option value="sh">上海</option>
    <option value="zj">浙江</option>
</select>

文本框

意见：<textarea name="suggest" cols="21" rows="10"></textarea>

表格边框（一个表格可以分多个区域）

   <fieldset>

        <!--表格标题-->

        <legend>

            个人信息

        </legend>

        <input type="image" src="../../img/f3_Android1.png">
  </fieldset>

form和table的结合

<form action="">

    <table>

        <tr>

            <td>

                登录名：

            </td>

            <td>

                <input type="text">（可包含）

            </td>

            <td>

                <b>阅读贵美服务协议</b>

            </td>

        </tr>

</table>

</form>

在html5中，表单元素可以放在form表单外，并通过form属性和表单进行关联，

通过关联，form表单之外的表单元素也可以把数据提交。

H5提供的表单类型，具备数据验证的功能，但是功能不严谨后期会用js中的正则表达式处理

<form action="">   

    邮箱：<input type="email">

    网址：<input type="url">

    日期：<input type="date">

    时间：<input type="time">

    月份：<input type="month">

    周：<input type="week">

    数字：<input type="number">

    滑动条:<input type="range">

    选择颜色:<input type="color">

    <input type="submit">

</form>

HTML5表单新属性

autocomplete:输入框内容自动补全

autofocus:自动获取焦点

required：必填

placeholder：提示信息

readonly:只读

multiple:下拉框的多选项

selected：下拉框的默认选项  单选框和复选框通过check属性实现默认选中