form表单基础知识，以及H5新属性总结

HTML中的表单用于搜集不同类型的用户输入；所有的HTML表单元素都可以划分成两类
1：输入类表单
2：非输入类表单
下边将总结每一个表单元素的使用

一：form表单基础知识

1：form标签

<form action="" method="get/post">
</form>

form标签中有两个属性，分别是action和method
1：action属性指定表单要提交的目标文件的路径，一般都为后台服务器的文件；
2：method属性指定的数据传输的方式，有get和post两种（两者之间所有的比较都是相对的）
1）get：是表单的默认传输方式，他的传输速度较快，但是缺点是传输数据的量有限，而且传输数据的保密性得不到保障。
2）post：post的特点相对于get来说他的传输速度较慢，但是优点是传输数据的量大，而且对于数据的保密性也得到了保障。

2：普通的文本输入框

用户名：<input type="text" name="uname" value="请在此输入用户名">

分析：
1：type=“text”，表示这个输入框是一个普通的文本输入框；
2：name=“uname”，注意name属性在所有的form元素中都必须设定！！！后台提取信息的时候要通过name来进行提取。
3：value：“”，这里的value值是表示的默认值，并不是传输到后台的值。输入类的form元素可以不用设置value属性，因为输入值就是value；
例如这个姓名输入框，是以键值对的形式传输到后台的name=“张三”，value属性只不过是增强用户体验。但是在非输入框中就必须要设置value值，后边会进行详细的介绍。

3：密码输入框

密码：<input type="password" name="pwd">

分析：
1：type=“password”，会将输入的内容自动转换成黑点保密图形。
2：在这里name同样是不可省略的。后台通过name来拿到具体的值，
他传到后台的值是 pwd=“密码”。

4：单选框

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

分析：
1：type=“radio”，将表单元素设定为单选框，要求只能选择一个选项。
2：name=“sex”，可以注意到，两个选项的name全部都是一样的，都为sex！！
在这里name有两个作用：1）具有分组的作用，将这两个选项都分在同一个组中，进行数据传输的时候方便后台找到数据。2）使选项具有互斥的作用，首先限定了radio其次同一个name就决定了他只能有一个选项。
在传输的时候，他的形式为： sex=“man”；
3：value属性的属性值是必须要写的，他会告诉后台这个选项所代表的意义，所以是必不可少的。
4：checked属性，在h5中较为简便，原来的写法是check=“checked”；表示默认选项。

5：复选框

爱好：
    <input type="checkbox" name="hobby" value="fb" checked>足球
    <input type="checkbox" name="hobby" value="bb">篮球
    <input type="checkbox" name="hobby" value="pb">排球
    <input type="checkbox" name="hobby" value="ib">乒乓球
    <input type="checkbox" name="hobby" value="yb">羽毛球

分析：
1：type=“checkbox”，定义为复选框，可以选择多个。
2：name=“hobby”，这里的name和单选框中的name不一样，他的作用只是为了分组方便后台拿到传输的数据，他传输数据的形式为： hobby=“yb”&hobby=“pb”，用连接符&进行连接。
3：value属性的属性值是必须要填写的，他将告诉后台用户选中的选项所代表的的意义，也就是键值对的半边部分。
4：checked，默认选项，可以默认选择多个。

6：下拉列表

籍贯：
    <select name="home">
        <option value="sd" selected>山东</option>
        <option value="sx">山西</option>
        <option value="hn">河南</option>
        <option value="bj">北极</option>
        <option value="nj">南极</option>
    </select>

1：select标签是下拉列表，其中option是选项。
2：name属性不用给每一个选择项都添加，只需要添加在select标签中即可，用于唯一标示这个form表单元素，方便后台提取数据。
3：value属性：每一个选择项的值，和单选框复选框一样，你必须要去给每一个选择项添加value值。
4：selected属性，要注意区分单选和复选框，他们的默认选项是用checked标记的，下拉列表框使用selected标记的。
5：下拉列表框中，如果设置了multiple=“multiple”就可以使用ctrl键进行点击选择多个选项。

7：文本输入域

问题描述：
    <textarea name="question" cols="15" rows="5">请在此写下问题</textarea>

分析：
1：textarea 文本输入域；可以输入多行文本；
2：cols=“15” rows=“5” 定义文本输入域为5行15列；
3：name属性，依旧必不可少。
4：在textarea标签包裹的文字是在框中的提示文字。
5：要注意原始样式，他的文字是在输入框的左下角的，后期需要使用css进行调整。

8：上传文件

上传文件：<input type="file">

9：提交按钮

<button>提交</button><!--h5新标签-->

 <input type="reset" value="清空">
 <input type="submit" value="登录">
<!--图片按钮标签-->
<input type="image" src="../../img/first.jpg">

分析：提交按钮不用写name；

10：fieldset进行表单区域划分

 <fieldset>
        <legend>
            基本个人信息
        </legend>
        姓名：<input type="text" name="uname">
        <br>
        密码：<input type="password" name="pwd">
        <br>
        性别：<input type="radio" name="sex" value="man">男
        <input type="radio" name="sex" value="wm">女
    </fieldset>

分析：
1：使用fieldset将一部分表单元素包裹起来。
2：使用legend标签设置标题。
3：同一个表单中可以有多个fieldset分区。

二：表单H5新增表单元素和新属性

一：新增表单元素

    <!--H5新功能，填写邮箱地址，。-->
    邮箱：<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">

分析：作为新的表单元素，他起到了一定的验证功能，但是他的验证功能并不严谨，需要配合js中的正则表达式进行处理

二：新增表单属性
1：autocomplete 。autocomplete设置输入框自动提示，输入框会自动保存前边所输入的数据，再一次输入时会有历史数据的提示。autocomplete="off"可以关闭。
2：autofocus=“true” 自动获取输入框的焦点；
3：required 设置必填项 （减少后台工作量，防止错误），在默认情况下，有些表单元素是可以不用填的。
4：placeholder=“请输入姓名” ，和输入框的value属性不同，这个不是默认值，他是一个提示信息，苹果机中大量使用，他会在输入框中显示属性值。简约风。
5：readonly属性，只读。常用于系统自动分配用户名，只能看，不能修改。
6：form属性，表单外的表单项，使用form和id相关联。
这是智能表单，在form标签中设置id属性，在表单外的表单元素中设置form属性，使form属性值和id属性值相等。就可以进行关联。

<form action="kk.java" id="sss" method="get">
用户名：<input type="text" name="name">
密码：<input type="password" name="pwd">
</form>

性别：
<input type="radio" name="sex" value="man" form="sss"> 男
<input type="radio" name="sex" value="wm" form="sss">女

应用场景：
举个例子，在淘宝浏览商品信息，并且下单后，同时他也会将你的用户的个人信息给输出出来，这里两个信息不是放在一个表单中的，但是使用了form属性进行了关联，可以达到这种智能表单的效果。

最后总结：

1：name属性在所有的表单元素中都需要写
2：value属性在输入元素中可以不用写，在非输入元素中必须要写；
3：在单选框和多选框中name属性的作用有什么区别
4：在单选和复选框中默认值用checked标记，在下拉列表框中用selected标记。
5：知识点很零碎，但是他的应用是很便捷的，也是易于理解的，多整理，多思考。