form表单的基本用法form表单的基本用法

83 阅读 0 评论 55 点赞

我是靠谱客的博主淡然微笑，最近开发中收集的这篇文章主要介绍form表单的基本用法form表单的基本用法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

form表单的基本用法

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

form表单的作用

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

`<input >`元素介绍

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

一、关于name属性

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

二、关于type属性

1、文本框
<form>
<input type="text" name="a">
</form>
这里写图片描述
运行这段代码，我们能看见一个简单的文本框，可以在里面输入数据，如果你想使这个文本框里显示固定的数值，就添加value属性，比如这样：
<form>
<input type="text" name="a" value="请输入手机号码">
</form>
这里写图片描述

2、密码字段
<form>
<input type="password" name="a">
</form>
这里写图片描述

3、单选按钮
我们在填写表单的时候常常会面临单选的情况，比如当你选择性别的时候，只能二选一。
<form>
<input type="radio" name="sex" value="man">男
<input type="radio" name="sex" value="woman">女
</form>
这里写图片描述
无论有几个选项，你都只能选择一个，所以它的名称叫做单选。
那么怎么实现radio分组呢，关键在于name属性。
<form>
<input type="radio" name="sex" value="male"> 男 <br>
<input type="radio" name="sex" value="female"> 女<br>
<input type="radio" name="student" value="yes"> 是学生<br>
<input type="radio" name="student" value="no"> 不是学生<br>
</form>
这里写图片描述

4、复选按钮
上面提到了单选的情况，现在我们来看多选，比如选择爱好的时候，你可能会喜欢阅读，也喜欢游泳。
<form>
<input type="checkbox" name="hobby" value="reading">阅读
<input type="checkbox" name="hobby" value="swimming">游泳
<input type="checkbox" name="hobby" value="listening">听歌
</form>
这里写图片描述

5、提交按钮
当用户点击提交时，表单的内容会被传送到action属性值指定的位置。
<form action="html.php method="get">
<input type="submit" name="a" value="提交">
</form>
这里写图片描述

6、hidden
<input type="hidden value="这是条隐藏的信息，用户看不见，服务器看得见" />定义隐藏字段，
隐藏字段对于用户是不可见的。隐藏字段通常会存储一个默认值，用户不能在页面上看见。
一般用于识别该用户是否拥有合法的操作权限，提高了数据的安全性。
三、placeholder 属性的作用
用来在文本框中显示提示,当用户开始输入内容，提示文字会消失，如下所示：
<textarea placeholder="请介绍自己...">
</textarea>
这里写图片描述

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