html语言form的作用,3. HTML form表单的用法

form表单的作用：

网站怎样与用户进行交互？答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。

语法：

注意事项：

：标签是成对出现的，以开始，以结束。

action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。

method ： 数据传送的方式(get/post)。

常见的input标签:

submit 用于数据提交

text 可输入文本

password 用于输入密码，输入内容会呈现为小圆点，进行隐藏

checkbox 多选框

radio 多选框

select 下拉选择 并和 option标签一起使用

file 上传文件

hidden 隐藏组件

bottom 按钮

reset 重置表单

get与post的差别：

本质上的区别是语义的区别，根据HTTP规范，GET的语义是请求获取指定的资源。GET方法是安全、幂等、可缓存的。POST的语义是根据请求负荷(报文主体)对指定的资源做出处理，具体的处理方式视资源类型而不同。POST不安全，不幂等，(大部分实现)不可缓存。具体差别如下：

get在后退刷新时是无害的，post会重新提交请求；

get参数通过URL传递，post放在Request body中；

get请求参数保留在浏览器历史记录中，post参数不会保留；

get产生的URL地址可以被存为书签，而post不可以；

对参数的数据类型，get只接受ASCII字符，而post没有限制；

get比post更不安全，因为发送的数据显示在URL上，在发送密码或其他敏感信息时绝不要使用get;

get请求只能进行url编码，而post支持多种编码方式。

input中name的作用：

将name属性相同的分为一组，对提交的表单数据进行标识。通过不同的name区别提交的value值是什么

在单选按钮中，name值相同的单选按钮被归为一组，在该组中只有一个按钮的checked属性为true。

总的来说，input的name属性用于提交一个form表单数据时，对数据的引用：

如用GET方式发送数据时，你能在URL地址中看到xxx.html?text=123

可以用于CSS中设置该类name值的元素的样式。

通过js的document.getElementsByTagName("atext")和jQ的$(".atext")等可以获取name属性值为atext的元素对象。

radio 如何分组?

通过name属性来分组，name值相同的单选按钮被归为一组。例如：

男

女

男

女

前两个为一组，name为sex；后两个为一组，name为sex1。

placeholder 属性的作用：

placeholder 属性提供可描述输入字段预期值的提示信息(hint)，设置之后在输入框显示灰色提示文字。该提示会在输入字段为空时显示，并会在字段获得焦点时消失。

type=hidden隐藏域的作用：

表单隐藏域在页面上对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。通过隐藏域设置验证信息，用户提交信息后，隐藏域的数据也被提交到后台，后台进行校验，提高安全性。

例如可以用来防止CSRF攻击。如果是非法用户恶意提交表单的话，value里的值对不上，服务器会拒绝该请求。

用法实例：

文本输入框、密码输入框

账户:

密码:

文本域，支持多行文本输入

联系我们

在这里输入内容...

使用单选框、复选框，让用户选择

性别:

男

女

使用下拉列表框，节省空间

爱好:

看书

旅游

运动

购物

爱好:

看书

旅游

运动

购物

使用提交按钮，提交数据

姓名：

使用重置按钮，重置表单信息

爱好:

看书

旅游

运动

购物

form表单中的label标签

label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)。

语法：

注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

男

女

输入你的邮箱地址