HTML之表单

一、表单元素

        1、文本框：用于输入文本，节点对象的属性value可获取输入的值。

<input type="text" name="name1"/>

        2、口令框：用于输入密码等口令，节点对象的属性value可获取输入的值。

<input type="password" name="name2"/>

        3、单选框：用于点击选中互斥的一组元素中的某一元素，属性checked表示默认选中，在互斥的一组元素中，所有元素的name都相同，节点对象的属性checked可获取该项是否被选中。

<input type="radio" name="name3" checked/>是
<input type="radio" name="name3"/>否

        4、复选框：用于点击选中一组元素中的多个元素，html标签中的属性checked表示默认选中，所有元素的name都相同，节点对象的属性checked可获取该项是否被选中。

<input type="checkbox" name="name4" checked/>中文
<input type="checkbox" name="name4" checked/>英文
<input type="checkbox" name="name4"/>日文

        5、下拉框：用于点击后从下拉的菜单中选择一项，html标签中的属性selected表示默认选中，节点对象的属性value可获取输入的值。

<select name='name5'>
    <option value="0">--请选择--</option>
    <option value="1">Windows 98</option>
    <option value="2">Windows 2000</option>
    <option value="3">Windows XP</option>
    <option value="4" selected>Windows 7</option>
</select>

        6、隐藏域：用户不可见，但表单提交时会把隐藏文本发送到服务器，节点对象的属性value可获取输入的值。如果某些要传给后端的值不想让用户看到，可设置在隐藏域中。

<input type="hidden" name="name6"/>

        7、文件：用于上传选中的本地文件。当form表单包含<input type="file">时，表单的enctype必须指定为multipart/form-data，method必须指定为post，浏览器才能正确编码并以multipart/form-data格式发送表单的数据。H5提供了File和FileReader两个主要对象，可以获得文件信息并读取文件。

<input type="file" name="name7"/>

        8、日期控件（H5新增）：用于从日历中选择年/月/日、年月日时分秒、本地时间、月份和星期，其中datetime主流浏览器不支持，Safari中部分支持，Opera12以及更早的版本中完全支持。

<input type="date" name="name8"/>
<input type="datetime" name="name9"/>
<input type="datetime-local" name="name10"/>
<input type="month" name="name11"/>
<input type="week" name="name12"/>

        9、拾色器（H5新增）：用于点击后选择一种颜色。

<input type="color" name="name13"/>

二、表单提交：

        表单提交时会提交有name属性的值，如果没有name属性则不会被提交。

        1、使用form对象的submit方法：

var form = document.getElementById('data-form');
form.submit();

        2、使用type属性为submit的button进行提交，最好绑定form的onsubmit事件，在onsubmit中根据输入的数据正确与否，返回true或false，最终决定是否把这些数据提交给后端

<button type="submit"/>

        3、使用Ajax进行提交；

 

参考：https://www.liaoxuefeng.com/