form表单的基本用法

form表单的基本用法

通常情况下,我们所说的html表单就是form表单。

form表单的作用

表单在网页中主要负责数据采集功能,也就是和里面包含的数据将被提交到服务器或者电子邮件里。
一个表单有三个基本组成部分:
表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。
表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
表单按钮:包括提交按钮、复位按钮和一般按钮。

元素介绍

元素是最重要的表单元素,它的常用属性有type,name,id,value,还有很多其它的属性,但这几个我们较为常用的,其中重点介绍type元素,因为type属性决定了的类型。

一、关于name属性

1、name 属性规定 input 元素的名称。
2、name 属性用于对提交到服务器后的表单数据进行标识,或者在客户端通过 JavaScript 引用表单数据。
3、只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。

二、关于type属性

1、文本框




这里写图片描述
运行这段代码,我们能看见一个简单的文本框,可以在里面输入数据,如果你想使这个文本框里显示固定的数值,就添加value属性,比如这样:



这里写图片描述

2、密码字段




这里写图片描述

3、单选按钮
我们在填写表单的时候常常会面临单选的情况,比如当你选择性别的时候,只能二选一。





这里写图片描述
无论有几个选项,你都只能选择一个,所以它的名称叫做单选。
那么怎么实现radio分组呢,关键在于name属性。





是学生

不是学生


form表单的基本用法_第1张图片

4、复选按钮
上面提到了单选的情况,现在我们来看多选,比如选择爱好的时候,你可能会喜欢阅读,也喜欢游泳。


阅读
游泳
听歌

这里写图片描述

5、提交按钮
当用户点击提交时,表单的内容会被传送到action属性值指定的位置。




这里写图片描述

6、hidden
定义隐藏字段,
隐藏字段对于用户是不可见的。隐藏字段通常会存储一个默认值,用户不能在页面上看见。
一般用于识别该用户是否拥有合法的操作权限,提高了数据的安全性。
三、placeholder 属性的作用
用来在文本框中显示提示,当用户开始输入内容,提示文字会消失,如下所示:

这里写图片描述

post 和 get 方法的区别?

两种最常用的 HTTP 方法是:GET 和 POST。
GET : 从指定的资源请求数据。
POST : 向指定的资源提交要被处理的数据。
- 通俗的理解是:GET在浏览器回退时是无害的,而POST会再次提交请求。
- GET产生的URL地址可以被收藏为书签,而POST不可以,因为你提交时的URL和原来的一模一样,不会有改变,而GET是将你提交的信息重新组装成一个新的URL,这个一个只属于你的,独一无二的URL。
- GET请求在URL中传输的参数是有长度限制的,但是POST没有。
- GET比POST更不安全,因为你的参数直接暴露在了URL上(参见第二条解释),所以不能用来传输需要保密的信息,比如密码之类的。
- GET参数通过URL传递,而POST参数放在HTTP请求的body中。
- GET产生一个TCP数据包,而POST会有两个数据包,因为GET方式会把HTTP头文件和数据一起打包发过去,而POST则是先发头文件。然后接收到浏览器返回的100后才接着发数据。
- 网络环境差的时候,POST方法更占优势,因为它能最大限度地保证数据的完整性。

参考地址:
https://www.oschina.net/news/77354/http-get-post-different
http://w3school.com.cn/tags/html_ref_httpmethods.asp
http://www.runoob.com/html/html-forms.html

你可能感兴趣的:(form表单的基本用法)