html表单控件、html表单组件 收藏 0

前端入门——html 表单

前面已经学习相关html大部分知识，基本上可以制作出简单的页面，但是这些页面都是静态的，一个网站如果要实现用户的互动交流，这时表单就起到关键的作用，表单的用途很多，它主要用来收集用户的相关信息，是网页具有交互的功能。例如，用户注册登录，留言等。

下面会详细介绍表单的使用方法，有以下内容：

• 表单标签form的使用
• 表单控件使用

使用<form></form>标签来创建一个表单，在其之间就是各种表单控件，如，输入框，文本框，单选按钮，多选按钮，提交按钮等。

语法代码如下：

1、action —— 处理程序

这里的 action 属性值表单提交的地址，就是表单收集好数据后要传递给远程服务的地址，其地址可以是绝对路径也可以是相对路径，或者其它形式，如发送电子邮件。

使用表单发送电子邮件：

提交到后台程序地址：

2、name —— 表单名称

表单名称，这一属性不是必需的，但是为了防止表单信息提交到后台处理程序时发生混乱，一般要设置一个名称，且在同一页面中最好是唯一的，不要和其它表单重复命名。

3、method —— 传送数据方法

method 属性用来定义处理程序使用那种方法来获取数据信息，常用的有 get 和 post （http 协议定义的方法）。

何时使用 GET？

GET 最适合少量数据或不是很重要数据的提交，浏览器会设定容量限制，默认如何没有设置method 属性，表单则会使用get 方法。

当您使用 GET 时，表单数据在页面地址栏中是可见的，会在表单提交的地址后面跟一个问号“?” ，问号后面是数据，以 名称1=值1&名称2=值2 形式发送到后台程序。

地址栏会看到如下：

关于 GET 的注意事项：

以名称/值对的形式将表单数据追加到 URL

永远不要使用 GET 发送敏感数据！（提交的表单数据在 URL 中可见！）

URL 的长度受到限制（2048 个字符）

对于用户希望将结果添加为书签的表单提交很有用

GET 适用于非安全数据，例如 Google 中的查询字符串

何时使用 POST？

使用post 表单数据和url（表单提交地址）是分开发送的，在页面地址栏中被提交的数据是不可见的，这样安全性更好，用户端会通知服务端获取数据，所以这种情况没有数据长度的限制，缺点是速度会慢些。

关于 POST 的注意事项：

将表单数据附加在 HTTP 请求的正文中（不在 URL 中显示提交的表单数据）

POST 没有大小限制，可用于发送大量数据。

带有 POST 的表单提交后无法添加书签

4、enctype —— 编码方式

enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。

有以下几种值：

5、target —— 目标显示方式

target 属性规定在何处打开 action URL。表单的目标窗口通常用来显示表单返回的信息，例如是否成功提交了表单，是否出错等。

属性值有以下：

看到这里是不是想的了之前学习超链接时候，a标签也有同样的属性，这里差不多一个意思，只是用途不一样。

这里的窗口有可能是框架 frame 或 浮动窗口 iframe ，后面会讲到框架和浮动窗口，就是在一个页面中可以嵌套一个子窗口。

什么是表单控件，就是收集数据的各种形式控件，比如输入框，密码框，单选、多选按钮，下拉菜单，文本域，文件域，提交按钮等等。

如下代码：

效果如下：

这里显示了一个基本表单，包含了输入框，密码框，单选，下拉菜单，文本域等组件，下面会按其使用类型介绍表单控件。

所有表单控件都一个name属性和vaule属性，用于和其它控件区别，后台程序将会以此名称获取其表单控件对应的vaule值。

下篇会介绍各种表单控件的使用，感谢关注。

上篇：

下篇：

js下拉列表表单控件的自动填写思路

我们熟悉的标准HTML输入控件包括input,select,textarea等；比如通过改变input的value属性值，就可输入内容到文本输入框中。有些网页表单为了实现特殊的效果和功能，可以不使用这些控件，通过客户端脚本生成特殊的输入方式。手工填表不受影响，如果自动填表就需要使用特殊的方式。

非标准下拉列表框填写示例.png

方法一：手工填表后，观察源码变化，发现填写的内容出现在<span>a5</span>元素中。那么我们填表的思路就是直接修改这个元素的值。获取span元素，“填写”它的text文本内容为a3，可以看到网页也对应的发生变化。但提交表单时，如果是非input元素，可能无法提交填写的值，需进一步测试。

方案二：使用自动点击操作，完全跟人工填表步骤一样，先点击下拉箭头，等待0.1秒，然后在选项中点击对就的选项元素。几乎所有下拉列表控件都可以用这种方法填写。

html中input、label、form、textarea、select

表单input：表单是用来收集信息的，由表单控件(表单元素)、提示信息、表单域构成。

input控件的属性及值：

除以上属性外，input元素type属性还有一个number属性值，此为仅可以填数字，默认是可以选择或者填写任意数字，但是当type属性为number属性值时，可以使用max和min属性来限制数字的取值范围，input更多属性见HTML5

label标签：

label标签是为input标签服务的，用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点

表单域form：

form元素用于创建一个表单，form中的所有内容都会被提交给服务器;默认form标签中需要有一个submit按钮，如果form里面没有submit按钮，那么可以使用button中type属性为submit的button按钮，这个buttont按钮可能不在form表单中，此时可以给type属性值为submit的button添加form属性，值为form表单的id值，如：

文本域textarea：

input元素只能显示一行内容，textarea元素可以显示多行，一般做留言效果使用，常常被称为富文本域。

UEditor：在实际开发中如果需要用到比较复杂的富文本域（类似word的，可以上传视频图片等功能）推荐使用第三方插件，这里推荐大家一款使用的富文本插件：UEditor,使用它可以在网页中实现类似word等编辑，如果想要了解更多及方法请查阅官方文档：http://fex.baidu.com/ueditor/，当然类似的富文本编辑器还有很多，如：CKeditor：https://ckeditor.com/等

富文本编辑器可以自己做，其原理是利用document的execCommand()方法，这个方法实际开发中很少用，已经废弃，所以一般很少有人了解，如果想要了解更多，可阅读官方文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand

下拉列表(下拉菜单)select：

块引用标签：

有的时候会引用名人名言等，此时建议使用引用标签，引用标签分为长引用和短引用两种，长引用标签效果是插入换行和外边距，短引用标签的效果是加上虚拟的引号。

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者 删除。

笔者：苦海123

其它问题可通过以下方式联系本人咨询：

QQ：810665436

微信：ConstancyMan

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com