当前位置:Gxlcms > html代码 > 表单元素:最全的各种html表单元素获取和使用方法总结

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

时间:2021-07-01 10:21:17 帮助过:51人阅读

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

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

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

15.jpg

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表单元素介绍之选择域标记和文字域标记

9.png

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

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

10.png

输入域标记 <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表单元素获取和使用方法总结的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行