HTML表单的用法

html-css012

HTML表单的用法,第1张

form 将表单元素包裹起来,受form包裹的表单元素才会提交给服务器。

<form action=”地址” method=””>

表单元素

</form>

form标签是表单的外壳,主要有四个属性:

action:表单提交的地址(后台服务器地址)

method:提交表单的方法,两种请求方式,post、get

target:在何处打开action

enctype:(编码方式)

applocation/x-www-form-erlencoded 在发送前编码所有字符(默认)

text/plain:空格转换为”+”号,但不对特殊字符编码

multipart/form-data:使用包含文件上传控件的表单时,必须使用该值。例如:上传音频、视频。

1、区别:(体现在方式、安全、数据量三个方面)

- 方式,点击提交(发请求时),get将请求数据变成”k=value”的形式,然后组装到URL上。post方式提交请求时,数据通过浏览器传输给后台,但是URL没发生变化。

- 安全,get将信息组装到URL上,信息泄露,不安全;post方式的URL没发生变化更加安全。

- 数据量,浏览器地址栏能存放的字符有限的(容量有限),get方式的URL过于冗长,当超出限制时,浏览器自动截断URL,则传给后台的数据不完整,所以对数据大小有限制。而post方式的URL更干净、轻便,能完整地将数据传递给后台,无数据大小限制。

2、什么时候用get,什么时候用post(使用场景)

get:向后台查询东西,如查询论文;即向后台索要数据,用关键词来获取大量数据。安全性要求低,简单。

post:向后台传数据,例论文查重(数据很大,提交给后台)。安全性要求高。

是表单收集信息的元素,主要有以下属性:

<label for="input_username">姓名:</label><input type="text" name="username" id="input_username" placeholder="用户名"/>

效果:

<label for="input_password">密码:</label><input type="password" name="password" id="input_password" placeholder="密码"/>

效果:

效果:

效果:

<label>我的car:</label><select name="transportation"><option value="bus">公交</option><option value="subway" selected>地铁</option><option value="taxi">出租车</option></select>

效果:

<label >评论:</label><textarea name="recomment" placeholder="ddd" cols="60" rows="10"></textarea>

效果:

<label for="zjz">证件照:</label><input type="file" name="photo" id="zjz" accept="image/jpg"/>

其中accept规定了文件格式。

效果:

<input type=”hidden” name=”abc” value=”123”>

点击提交时,hidden里隐藏的数据也提交给了后台;abc=’123’

作用:(1)暂存信息,(用户看不到),便于设计者随时调用程序。

(2)用于安全性校验,例如通过设置hidden隐藏域,服务器可以验证用户权限,避免伪造的假网站提交数据。

<input type="button" value="按钮"/>

效果:

<input type="submit" value="提交"/>

效果:

<input type="reset" value="复位"/>

效果:

区别:

1、在对安全性有要求的情况下,应该使用post。

2、get只能向服务器发送ASCII字符,而post则可以发送整个ISO10646中的字符(如果同时指定enctype="multipart/form-data"的话)。

3、get和post对应的enctype属性有区别。enctype有两个值,默认值为application/x-www-form-urlencoded,而另一个值multipart/form-data只能用于post。

4、IE将请求的URL长度限制为2083个字符,从而限制了get提交的数据长度。测试表明如果URL超出这个限制,提交form时IE不会有任何响应。其它浏览器则没有URL的长度限制,因此其它浏览器能通过get提交的数据长度仅受限于服务器的设置。对于post,因为提交的数据不在url中,所以通常可以简单地认为数据长度限制仅受限于服务器的设置。

5、由于一个get得到的结果直接对应到一个URI,所以get的结果页面有可能被浏览器缓存。而post一般则不能。

两种提交的方法分别为get和post。

1、get:提交的数据量要小于1024字节,表单提交时表单域数值(表单请求的信息:账号、密码…)将在地址栏显示。

2、post:传递的数据量不受限制,表单提交时表单的域值(表单请求的信息:账号、密码…)不会在地址栏显示,安全性能较高,对信息进行了隐藏,一般在开发中采用post。

扩展资料

<form>标签用于为用户输入创建 HTML 表单。

表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。

表单用于向服务器传输数据。

注释:form 元素是块级元素,其前后会产生折行。

<form>标签在html5的新属性

1、accept,值:MIME_type,HTML 5 中不支持。  

2、accept-charset,值:charset_list,规定服务器可处理的表单数据字符集。  

3、action,值:URL,规定当提交表单时向何处发送表单数据。  

4、autocomplete,值on/off,规定是否启用表单的自动完成功能。 

5、enctype,规定在发送表单数据之前如何对其进行编码。  

6、method,值:get/post,规定用于发送 form-data 的 HTTP 方法。 

7、name,值:form_name,规定表单的名称。  

8、novalidate,值:novalidate,如果使用该属性,则提交表单时不进行验证。  

9、target,值:_blank/_self/_parent/_top/framename,规定在何处打开 action URL。 

enctype 属性可能的值:

1、application/x-www-form-urlencoded

2、multipart/form-data

3、text/plain

<form>标签支持 HTML 中的全局属性。

<form>标签支持 HTML 中的事件属性。

用post,要把“enctype="multipart/form-data" ”删了

multipart/form-data适用于文件上传,对于你这种只想传value的做法,显然使用application/json或者text/plain会好很多

enctype="multipart/form-data"是上传二进制数据

form里面的input的值以2进制的方式传过去,所以request就得不到值了。