表单元素：最全的各种html表单元素获取和使用方法总结

程序员文章站 2022-03-20 23:24:06

...

表单是网页与用户的交互工具，由一个<form>元素作为容器构成，封装其他任何数量的表单控件，还有其他任何<body>元素里可用的标签，表单能够包含<input>、<menus>、<textarea>、<fieldset>、<legend>、<label>等表单控件元素。表单元素有哪些呢？它包含了如下的这些元素<form>，<input>输入文本框，<button>按钮，<option>定义下拉菜单，<select>，<textarea>文本区等等，当然在html5中又新增了一些元素。通过下面的内容总结了各种html表单元素获取和用法实例！

一、HTML5中新增表单元素及使用实例

1. 总结HTML5中新表单元素的使用方法及实例教程

表单元素：最全的各种html表单元素获取和使用方法总结

HTML5 新表单元素

<datalist> ： <input>标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。

<keygen> ： <keygen> 标签规定用于表单的密钥对生成器字段。

<output> ： <output> 标签定义不同类型的输出，比如脚本的输出。

2.HTML Form表单元素全面了解

datalist元素规定输入域的选项列表。列表是通过datalist内的option元素创建的。如需把datalist绑定到输入域，请用输入域的list 属性引用datalist的id。

keygen元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。

output元素用于不同类型的输出，比如计算或脚本输出。

二、PHP中表单元素的详解

1. PHP表单元素介绍之选择域标记和文字域标记

表单元素：最全的各种html表单元素获取和使用方法总结

通过选择域标记<select>和<option>可以建立一个列表或者菜单。菜单的使用是为了节省空间，正常状态下只能看到菜单的一个选项，单击右侧的下三角按钮打开菜单后才能看到全部的选项。列表可以显示一定数量的选项。如果超出了这个数量，会自动出现滚动条，浏览者可以通过拖动滚动条来查看各个选项。

2. PHP表单元素介绍之输入域标记 <input>

表单元素：最全的各种html表单元素获取和使用方法总结

输入域标记 <input> 是表单中最常用的标记之一。常用的输入域标记 <input> 有文本框、按钮、单选按钮、复选框等等。

3.PHP处理Checkbox多选框表单元素的例子

Checkbox的值获得与普通的input获得方法是不一样，需要给checkbox一个统一的数组形式的Name，例如mycheckbox[]，对的就是PHP中定义数组的一种方式。然后在后台获取这个数据，例如POST表单的$_POST[‘mycheckbox’]，此时这个数据已经是一个数组了。

三、javascript和jquery获取和使用表单元素

1. javascript 获取表单元素的几种方法

第一种方法,通过元素的name获取

第二种方法：通过元素的index获取

第三种方法：通过元素的id获取

2. jQuery 处理表单元素的代码

1）.获取input类的值： $("input").val();

2）.获取textarea类的值: $("textarea").val();

3）.获取select类的值：$("select").val();

当表单上含有多个input类（或者textarea类和select类），使用上述方法得到的将是一个数组。当然，你可以给这些控件加上ID，从而对某个特定的控件取值，例如：$("input#myID").val()。

表单元素的相关问答：

1. 前端 - 移动端点击表单元素页面相对移动的问题？

2. javascript - react中使用React-bootstrap表单元素控件，如何获取其内部的值

3. javascript如何获取表单元素select

【相关推荐】

1. php.cn原创html5视频教程

2. 《php.cn独孤九贱（4）－php视频教程》

3. php.cn独孤九贱（3）－JavaScript视频教程

以上就是表单元素：最全的各种html表单元素获取和使用方法总结的详细内容，更多请关注其它相关文章！

相关标签：表单元素，获取，使用方法