html中表单元素中的单选框,Html表单元素及表单元素详解
大纲
1、认识表单
2、认识表单元素
3、表单元素的分类
4、表单元素——文本框
5、表单元素button
6、表单元素——单选、多选
7、表单元素——select
8、表单元素——textarea
9、推荐
1、认识表单
1、在一个页面上可以有多个form表单,但是向web服务器提交表单的时候,一次只可以提交一个表单。
2、要声明一个表单,只需要使用form标记来标明表单的开始和结束,若需要向服务器提交数据,
则在form标签中需要设置action属性(用来设置提交表单的位置)、method属性(用来定义浏览
器将表单中的信息提交给服务器端程序的处理方式)、target属性(用来指定服务器返回结果
所显示的目标窗口或目标框架);但是,对于客户端脚本编程来说,并不需要这些属性来帮助
提交表单信息,form标签存在的意义是在于方便在脚本中编程的时候进行引用。
3、表单的引用可以利用form标签的name属性或者也可以利用document的forms[]数组中调用到
对应的数组。
4、可以利用form表单的elements[]数组来遍历除了元素之外的所有元素。
5、form表单的submit()方法用于将表单提交给服务,但我们点击submit按钮的时候,
submit按钮会相应的调用onsubmit事件处理器从而调用Form对象的submit事件。
6、如何在浏览器中使用页面中的信息,我们称之为“客户端脚本编程”,而如何把信息提交给
Web服务,并将数据库保存在数据库中,我们通常称为“服务器端脚本编程”。
7、在早期,所有可交互的HTML元素都应该放在HTML表单中,但是现在的定义是,需要提交到
web服务器的数据,才必须要放在表单内,可是前一种理解的方式也不是完全错误的,因为一般
可以交互的HTML元素,都是表单元素(在前期),即:浏览器需要处理的数据都是表单元素,
因此需要将其放在HTML表单中。
2、认识表单元素
1、大部分的表单控件元素都是由标记创建的,标记具有一个type属性,该属性
决定了标记所创建的表单控件的类型。
2、所有的单控件对象都具有一个name属性,JavaScript脚本通过name属性的值来引用特定的
表单控件元素,同时这也是表单提交到服务器时,每个表单控件元素的值value所对应的key值。
3、绝大部分对象都具有value属性,该属性返回当前表单控件的值。
4、所有的表单控件对象都具有一个form属性,该属性返回包含当前控件的Form对象。对于
一个通用的表单数据检查程序来说,用这个属性来标明哪些控件属于哪个表单。
5、所有的表单元素对象都具有focus()和blur()方法,同时所有的表单元素对象还具有onfocus
和onblur事件处理器。
3、表单元素的分类
常见的表单控件有:
1、Text Input Elements:
、、
2、Tick Box Elements:
、
3、Select Elements:
、
(下拉大框、多选)
4、Button:
、、
4、表单元素——文本框
1、通过对input表单元素的type设置text来让浏览器创建Text表单元素
对象。
2、Text对象的value属性表示的就是文本框中的值。
3、文本框的input标记还具有size属性(用于决定文本框具有多少个字符的宽度)、
maxlength属性(用于决定用户可以在文本框中输入多少个字符)。
4、Text对象还具有select()方法,用以选择或加亮文本框中的文本,当用户在文本框中输入了
无效值的时候,我们可以通过focus()方法将输入焦点设置回该文本框,并且使用select()方法
选中文本框中的文本,并且光标落在文本框的右边。
5、Text对象的value获取到的都是字符串类型的值,哪怕输入的是纯数字也会转换成字符串,
但是如果对该value的操作足够明显的说明其是数值类型数据,那么后台会将其自动转换(如
减法),但是若无法足够明显的说明,那么仍旧是作为字符串数据类型使用(如加法,字符串也
有加法的方法),所以若是要将其作为数值数据类型使用,最好都将其首先显示的转换数据类型
而不是依靠JavaScript隐式的转换。
6、Text对象具有多个事件处理器:
onfocus事件处理器(获得焦点)、
onblur事件处理器(失去焦点)、
onselect事件处理器(选中)、
onchange事件处理器(当且仅当文本框失去焦点时的值与获得焦点的值不同是)、
onkeydown事件处理器(键盘按下)、
onkeypress事件处理器(按了一个键)、
onkeyup事件处理器(键盘抬起)
7、不同浏览器对blur事件的解析不同。
8、密码框,使用密码框的唯一目的是当用户在
页面上输入密码的时候,隐藏用户输入的密码字符串以防止偷窥,但是密码框仅仅是使用星号或
其他符号代替显示,并没有对密码进行加密,当表单提交的时候,仍是以明文发送的,因此,使
用密码框来传递重要信息并不是一个安全的方法
9、隐藏域,隐藏域可以像文本框一样用来输入
字符串或数字,不同之处在于隐藏域对于用户来说是不可见的。隐藏域对于用户来说是为了避免
过于冗余的表单元素出现在页面,因此将一些需要提交的但已经填写验证过的表单元素输入此中
并隐藏,等到最后提交的时候统一提交。
5、表单元素button
1、button元素的创建是,通过声明type来定义input元素,从而浏览
器将为button元素创建一个对应的Button对象。
2、Button对象包含value属性,通过value属性来显示按钮上的文本。
3、Button对象包含onclick事件处理器、onmouseup事件、nomousedown事件。
4、submit按钮具有特定的用途,并且不需要依靠脚本来实现,当submit按钮被单击时,按钮所
在表单中的数据将自动提交到服务器,并不需要编写任何脚本。
5、reset按钮被单击时,按钮所在的表单中的所有元素都将被清空,或者被设置为元素的默认值
(即页面第一次加载时元素所具有的值)
6、表单元素——单选、多选
1、单选按钮type="radio"、复选框type="checkbox"通过设置type属性来创建对应的表单元
素对象。
2、通过在input标签中添加关键字checked来设置默认选项,注意,radio单选按钮只有一个能
被选中,若设置多个checked,只会实现最后一个。
3、Checkbox对象和Radio对象的value属性是在HTML中预定义的或者是用JavaScript定义的,
该value属性不表示用户与复选框或单选按钮交互的任何信息,无论复选框或单选按钮是否被选
中,该value属性的值是不变的,另外,当向服务器提交表单时,仅仅是被选中的复选框或者单
选框的按钮被提交到服务器,未选中的是不会被提交的。
7、表单元素——select
1、创建:通过这样的方式来创建select下拉列表框对象。
...
2、Select对象具有size(想要展示的选择条数),multiple(是否多选)。
3、Select对象具有数组属性options[],该数组的元素是Option对象。
4、Option对象具有index属性(Option在当前options[]数组中的索引)、text属性(返回当
前项在列表框中显示的文本标题)、value属性(返回当前项所定义的值)。
5、要在列表框中添加新的列表项,那么需要new一个新的Option对象,然后再把该对象插入到
options[]数组中一个空的options[]数组元素,当在某个已经存在了选项的索引位置插入一个
新的选项事,注意该索引位置上原来的选项将会被覆盖掉。要在列表框中移除某个列表项,那就
是把options[]数组中该选项所对应的数组元素设置为null,当移除一个Option对象时,
options[]数组将重新排序,每一个排在被移除选项之后的Option对象的索引将自动减1.
6、在IE浏览器中添加新的列表项有自己的add()、remove()方法来添加和引出下拉选项。
7、下拉列表框具有onblur事件处理器、onfocus事件处理器、onchange事件处理器。
8、表单元素——textarea
1、textarea元素允许用户输入多行文本。
2、textarea对象拥有cols属性(定义文本区域宽度,单位是单个字符的宽度)、rows属性
(定义文本区域高度,单位是单个字符的行高)。
3、textarea对象还具有一个wrap属性,默认值是soft(自动软回车换行),hard属性(自动
硬回车换行,该行为会将其换行地方同数据一起上传),off(关闭换行)。
4、textarea标签不包含value属性,但是Textarea对象具有value属性,其的值是包含在
textarea标签中的内容。
9、推荐
在这里我仅仅是阐述了我自己对表单知识的一些认知和理解,也许还不够全面和具体,但是还是希望能够帮助到读者,并且这里我推荐两篇我写的同样的关于表单的知识,一篇是我遇到的表单的问题Html表单中遇到的问题,还有一篇是我使用表单的实例应用Html表单使用实例,同样希望能对读者有所帮助。
html中表单元素中的单选框,Html表单元素及表单元素详解相关推荐
- 在html语言中指定单选框时,htmlcss
其实就是用于开发网页的一门语言 关于HTML: 1)HTML开发的网页文档,通常是以 .htm..html 为后缀 2)HTML开发的网页文档,可以通过浏览器打开并显示(浏览器就是一个HTML解析器) ...
- html表格输入框怎么左移动,当我向CSS中的文本框添加边框时,HTML表单输入会移动...
我想在登录表单上的输入字段中添加边框,但是当我添加边框时:1px纯黑色;到#登录表单输入,然后所有的文本框移出位置.当我向CSS中的文本框添加边框时,HTML表单输入会移动 当用户输入不正确的凭据到表 ...
- 作为SLAM中最常用的闭环检测方法,视觉词袋模型技术详解来了
摘自:https://mp.weixin.qq.com/s/OZnnuA31tEaVt0vnDOy5hQ 作为SLAM中最常用的闭环检测方法,视觉词袋模型技术详解来了 原创 小翼 飞思实验室 今天 基 ...
- python中search和match的区别_Python中正则表达式match()、search()函数及match()和search()的区别详解...
match()和search()都是python中的正则匹配函数,那这两个函数有何区别呢? match()函数只检测RE是不是在string的开始位置匹配, search()会扫描整个string查找 ...
- linux上传文件命令ftp put,Linux ftp 命令行中下载文件get与上传文件put的命令应用详解...
介绍:从本地以用户anok登录的机器192.168.0.16上通过ftp远程登录到192.168.0.6的ftp服务器上,登录用户名是peo.以下为使用该连接做的实验. 查看远程ftp服务器上用户pe ...
- 中科大-计算机类考研真题(初试笔试真题详解+复试笔试机试真题详解+面试问题汇总分析)
中科大-计算机类考研真题(初试笔试真题详解+复试笔试机试真题详解+面试问题汇总分析) 初试笔试真题2003年~2019年:答案+详解 复试面试问题总结:问题汇总+详解分析 复试面试经验总结:个人小结 ...
- linux get与put,科技常识:Linux ftp 命令行中下载文件get与上传文件put的命令应用详解...
今天小编跟大家讲解下有关Linux ftp 命令行中下载文件get与上传文件put的命令应用详解 ,相信小伙伴们对这个话题应该也很关注吧,小编也收集到了有关Linux ftp 命令行中下载文件get与 ...
- 气缸标识上vr什么意思_发动机结构代号中L、V、W都是啥意思?图文详解让你不再迷糊...
发动机结构代号中L.V.W都是啥意思?图文详解让你不再迷糊大家经常能看到L4.V6.W8这样的发动机结构代号,小编今天就用超高清的结构图告诉你这些代号都是什么鬼? 01 直列式(L)发动机直列式发动机 ...
- java前端长连接框架_Java中Spring Boot+Socket实现与html页面的长连接实例详解
Spring Boot+Socket实现与html页面的长连接,客户端给服务器端发消息,服务器给客户端轮询发送消息,附案例源码 功能介绍 客户端给所有在线用户发送消息客户端给指定在线用户发送消息服务器 ...
最新文章
- R语言画Cox回归森林图
- 在Windows Server 2012中如何快速开关桌面上经典的“计算机、我的文档”等通用图标...
- [GKCTF 2021]XOR
- Spring Boot——不同环境调用不同的配置文件解决方案
- ITK:使用Viola Wells互信息执行多模式注册
- 你真的以为你了解Java的序列化了吗
- 【英语学习】【Level 07】U03 Amazing wonders L5 Modern structures in China
- Swift中字典解析后的问题,!?两种拆包的差别
- Keil与ADS软件冲突问题解决办法
- Linux网络命令之 `brctl`
- 进销存设计之——进销存和财务软件的对接
- 我用python做期货_使用Python计算股票期货,量化程序化交易
- 打开word后发现页面在左侧且只有72%。点击单页虽居中但大小也没法变动,调节右下角的大小变化但页面依然在左侧。
- boost/mpl/assert.hpp:189:21: error: unnecessary parentheses in declaration of ‘assert_arg‘ [-Werror=
- WebService的简单案例记录(Java)
- php属于哪种语言,php是哪种类型的语言
- 高匿代理,混淆代理,匿名代理,透明代理略解
- 有哪些 必装软件或者app
- docker之网络配置
- 模板的具体实现 ―― 模板的实例化(instantiation)或具体化(specialization)
热门文章
- Excel 2016崩溃恢复后数字变成时间格式
- 使用PyTorch训练与评估自己的Twins网络
- 【function.apply】apply的使用
- easyui中datagrid冻结列,行错位解决办法
- c 语言求字符数组长度,C/C++中获取数组长度的方法示例
- C++和C语言中的动态内存分配的区别
- 生成毛笔字体图片http://i-gccs.fst.umac.mo/gccs/big5_dict.php
- 关于如何从国内各大音乐平台歌单导入Apple Music的解决方法
- 媒体文件格式分析之FMP4
- mac组播地址和单播地址的判断