Html form表单大全（一）

在前后端交互的过程中，除了ajax请求之外，最常见的就是表单请求了。

由于form表单属性多，表单标签内容多且复杂，不深究的话很难全面的弄明白。

接下来就来详细的说一说整个form表单都有些什么，并且如何去使用。

（一）form表单标签内的属性

　　1.最重要的两个属性：action  method

　　action:指定一个URL地址用于向该地址发送表单数据；

　　method:规定是按照何种方式发送数据；

　　method可以填的值如下：

　　get：以get方式请求，表单数据会以？连接数据放在URL内一并发送，每组数据直接用&连接。这种方式不安全，容易被截取。

　　post：以post发送请求，表单数据会以一个对象的方式放在请求体中进行发送。

　　//在前端中最常见的两个请求方式就是get 和 post 。get和post其实两个方法都差不多的。对于前端发送数据给服务器而言多半用post请求

处于安全性考虑，post请求的安全性要高一些。

　　除了post和get还可以填：options head delete trace connect 

　　这些请求方法需要服务器端的配合才可以，不同的类型对应这服务器不同的操作，对于前端而言很少用也不会让你这样乱用。在编程上与

post和get请求差不多。

<form action="https://www.w3school.com.cn/example/html5/demo_form.asp" method="PUT">
        姓名: <input type="text" name="name" /><br />
        年龄: <input type="text" name="arguments" /><br />
        <input type="submit" value="Submit" />
    </form>

　　用一下w3c的测试接口，服务器端没有限制请求类型 

　　2.accept-charset 规定服务器处理表单数据所接受的字符集

　　accept-charset: 字符集名称

　　accept-charset:unknown （默认值） 表示表单的字符集与包含表单的文档的字符集相同。

　　应避免使用该属性，应该在服务器端验证文件上传。

 　　3.autocomplete 提示功能，根据填写历史显示提示下拉列表

 　　autocomplete:on/off (开启/关闭)

　　需要拥有autocomplete属性的表单标签才可以使用：input 

 

　　4.enctype 规定表单数据在发送到服务器之前如何进行编码　　

　　可以填3个属性值:

　　application/x-www-form-urlencoded:在发送前编码所有字符（默认），会将数据以name = value这种形式的键值对进行编码，

空格转换为 "+" 加号，特殊符号转换为 ASCII HEX 值

　　multipart/form-data:不对字符进行编码，在使用表单上传的文件时必须使用。

　　text/plain:空格转换为“+”加号，但不对特殊字符进行编码

　　5.target 规定在哪打开 action URL

　　可以填5个属性：

　　_blank:在新窗口中打开

　　_self:在当前窗口中打开　　　　　　　　

　　_parent:在上一级窗口中打开

　　_top:在顶层窗口中打开

　　framename:指定窗口

　　6.name 规定表单的名称

　　7.novalidate 可以阻止浏览器对表单的默认验证（填上这个属性）

 

示例：

<form   action="https://www.w3school.com.cn/example/html5/demo_form.asp" method="POST" 
            accept-charset="UTF-8" autocomplete="on" enctype="application/x-www-form-urlencoded"
            name="myForm" novalidate target="_blank">
        姓名: <input type="text" name="name" /><br/>
        年龄: <input type="text" name="arguments" /><br/>
        <select name="" id="">
            <option value="">123</option>
            <option value="">1231</option>
            <option value="">123211</option>
            <option value="">12312312</option>
        </select>
        <input type="submit" value="Submit" />
    </form>

 

以上就是form标签的属性内容介绍，如果对内容有疑问欢迎来评论区进行交流讨论