增加表单的文字段的html的代码是,表单及表单新增元素(示例代码)
要想更好运用表单就要了解表单的的更多元素与属性,首先看看对表单基本了解。
表单的基本了解
元素用于用户输入数据的收集
元素是最重要的表单元素,有许多type其中是用于向表单处理程序提交表单的按钮。
元素 元素定义待选择的下拉列表选项,
元素定义文本区域。
元素定义可点击的按钮。
表单属性
1:Action 属性
action 属性的作用是当提交表单时,声明要向何处发送表单数据。将表单数据发往何处。如果省去该属性则表单数据会发往当前网页。
2:Method 属性
method 属性规定在提交表单时所用的 HTTP 方法(GET 或 POST):
要想表单数据提交时更加安全使用post。因为get是将表单数据放在URL后提交的。所以不要使用get传敏感信息比如密码。我认为提交数据使用post,获得数据使用get。
3:Name 属性
如果要正确地被提交,每个输入字段必须设置一个 name 属性。因为只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。
4:target 属性
target 属性规定在何处打开 action URL。
表单新增元素属性能让我们更加高效便捷的书写代码。
表单的新增元素与属性
1:表单内元素的form属性
在HTML5中可以把表单内的从属元素写在页面的任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以把该元素指定到相应的表单中。
这样便于书写样式。
2:表单内元素的formaction属性
在HTML5中formaction 属性覆盖 form 元素的 action 属性。为不同的提交按钮增加formaction属性,使得在单击时可以将表单可以提交给不同的页面。该属性适用于 type="submit" 以及 type="image"。
3:表单内元素的formmethod属性
在HTML5中可以使用formmethod属性为每个不同的表单元素分别指定不同的提交方法。
4:表单内元素的formenctype属性
在HTML5中可以使用formenctype属性为每个不同的表单元素分别指定不同的编码方式。
5:表单内元素的formtarget属性
在HTML5中可以使用formtarget属性用于指定在何处打开表单提交后所需要的加载的页面。
6:表单内元素的autofocus属性
画面打开时自动获得光标焦点,一个页面上只能有一个控件具有该属性。
7:表单元素的required属性
HTML5中新增的required属性可以应用在大多数输入元素上,在提交表单时,如果表单为空则不允许提交。
8:表单内元素的labels属性
在HTML5中,为所以可使用标签的表单元素定义一个labels属性,属性值为NodeList对象,代表该元素所绑定的标签元素所构成的集合。
functionfun(){vartxt=document.getElementById("txt_name");varbutton=document.getElementById("btn");varform=document.getElementById("id1");if(txt.value.trim()=="")
{if(txt.labels.length==1)
{varlabel=document.createElement("label");
label.setAttribute("for","txt_name");
form.insertBefore(label,button);
txt.labels[1].innerHTML="请输入姓名";
txtName,labels[1].setAttribute("style","font-size:9px;color:#fff");
}else if(txt.labels.length>1)
form.removeChild(txt.labels[1]);
}
}
姓名:
9:标签的control属性
在HTML5中,可以在标签(label元素)内部放置一个表单元素,并且通过该标签的control属性访问该表单元素。
functionset(){varlbl=document.getElementById("lbl");vartxt=lbl.control;
txt.value="0556";
}
10:文本框的placeholder属性
placeholder是指当文本框处于未输入状态时显示的输入提示。当文本框处于未输入状态且未获取光标焦点时,模糊显示输入提示文字。也可以使用css来控制其中文字的样式。
input::-webkit-input-placeholder{ color:#0F0;}
11:文本框的list属性
在HTML5中 为需要的input标签设置一个list属性,然后在任意位置放一对 datalist 标签,并给 datalist 标签一个 id,和 list 属性值i一致。
在 datalist 标签下放列表项,每个列表项用 option 元标签来表示,这样就可以做一个下拉框,当用户需要的值不在下拉列表中时,可以自行输入。datalist 标签的内容不显示,只有在文本框获取焦点时才会以下拉列表的形式表现出来。
练习
练习1
练习2
12:文本框的autocomplete属性
辅助输入的的属性,autocomplete有三种值"on"、"off"、"default"(不指定)。不进行指定时,使用游览器的默认值。
使用方法如下当你在文本框内输入如“某一段话”点击提交后,要是再次在文本框中输入“某”,点击就会提示“某一段话”。
13:文本框的patten属性
等于直接在html部分用正则表达式判断值输入是否符合要求。
14:文本框的selectionDirection属性
针对input元素与textarea元素,可以获取用户选取元素时是正向选取还是反向选取。正向选取值或没选为forward,反向为backward。
15:复选框的indeterminate属性
在H5中,可以在js中对该元素使用indeterminate属性,以说明复选框“尚未明确选取”状态。 在js中使用布尔类型的值对该属性赋值。在js代码中对复选框选中的状态进行判断时需要先判断indeterminate属性,在判断checked属性值。
16. image提交按钮的height属性与width属性
表单提交的图片按钮
17. textarea元素的maxlength属性与wrap属性
maxlength :,用于限定textarea元素设置最大输入值。
wrap:其属性值为soft与hard。当属性为hard时,在没有用回车键而是文字超出一排规定范围而自动换行时,提交表单时会加换行符。soft则在提交时不会加换行符。
18:在HTML5中增加了input许多的type种类
比如URL类型,email类型,在输入时会要求一定的格式,自动判断输入是否符合格式
date类型,time类型,是专门用来输入时间的。
datetime-local类型是专门用来检查本地日期和时间的,提交时对输入日期进行有效性检查。
month类型专门输入月份的文本框。
week类型专门输入周的文本框。
number类型专门输入数字。
range类型是一种只允许输入一段范围内的数值的文本框。
search类型是一种专门用来输入搜索的关键词的文本框。
Tel类型用于输入电话的专业文本框。
color类型用于选取颜色,会自动出来颜色选择器。
19:日期时间类型的新增元素的属性step属性,valueAsDate属性
step属性: 是对指定属性值的选择值得限定。 控制元素的值增加或减少的步幅。
valueAsDate属性:是用于设置或获取UTC日期和时间。
——参考自《HTML5与css3的权威指南》
希望能遇到一起进步的
。
增加表单的文字段的html的代码是,表单及表单新增元素(示例代码)相关推荐
- sql数据库表添加、删除字段
向sql数据库表中添加字段 增加字段: alter table [表名] add 字段名 smallint default 0 增加数字字段,整型,缺省值为0 alter table [表名] ad ...
- Abp框架默认表中如何添加字段
目录 介绍 说明 具体实现 1.扩展抽象实体 2.扩展非抽象实体 总结 介绍 Abp现在是比较流行的一个.net的基于ddd思想的框架,所有很多公司也开始想要使用,并在招聘中会要求应聘者会abp框架. ...
- Udesk工单SDK(五):【管理】-【我的工单】详解
作者:张振琦 [我的工单]里面包含三个设置项:工单列表显示字段.工单详情主要字段.工单详情辅助字段. 先看一下这些字段都是控制的哪块内容,如下图: 继续上一篇的中家电报修的例子,现在需要工单列表中显示 ...
- 关于驰骋表单引擎中字段扩展设置对文本框Pop窗体返回值的升级说明 2012/11/13...
为什么80%的码农都做不了架构师?>>> 关于驰骋表单引擎中字段扩展设置对文本框Pop窗体返回值的升级说明 2012/11/13 现有功能: 以前版本仅支持自己定义url,返回 ...
- 如何提高增加包含大量记录的表的主键字段的效率
如何提高增加包含大量记录的表的主键字段的效率 LazyBee 1 问题的提出: 在给客户升级数据库系统时,由于报表的需要,系统中每一个表都需要有主键字段.系统审计表自然也有这个要求-需要增加一个ide ...
- 很多字段的数据要插入另一张表_一文看懂数据库设计之逻辑设计,值得收藏
概述 数据库逻辑设计是从事数据库应用设计.开发.运行维护等各方面工作的一个重要的基础性工作.根据不同业务和应用需求,确定并遵循数据库逻辑设计原则,例如按照第三范式开展逻辑设计,不仅能满足减少数据冗余. ...
- finereport字段显示设置_QA | 表单如何设置字段显示逻辑?
Hi,大家好!表姐又来给大家答疑解惑啦!这一期的Q&A我们来聊聊表单如何设置字段显示逻辑. 字段显示逻辑是什么? 字段显示逻辑是指根据设定字段条件,显示或隐藏特定的字段,可以实现选择不同内容, ...
- 数据表字段不存在 php,laravel 使用原生表达式增加原数据表不存在的字段
比如我现在需要将两个表合在一起,这就需要一个两个表各增加一个标志字段来区分合成后的数据来自哪个表,比如两个表各加一个"1 as type" 和 "2 as type&qu ...
- Oracle11g新特性:在线操作功能增强-表增加包含默认值的字段(转载)
在11g以前,表中新增一个NOT NULL的字段是十分痛苦的事情,尤其是表很大的情况.不光是执行速度慢,而且由于现有数据长度的变化,很容易造成表中大量的行链接情况. 在11g中,这种情况得到了彻底的改 ...
最新文章
- 2019.1.7 区块链论文翻译
- c#编写的MD5加密类
- 电路上的ESR是什么意思?
- Linux信号之signal函数
- 抽象方法vs虚方法 c# 1613719040
- go语言和java比_闲话Python, Go, Java
- 余承东:Mate40系列5000万像素远好于友商1亿像素
- Codeforces 510 E. Fox And Dinner
- 用c语言枚举计算坐标,来个c++枚举有效范围计算器
- NYOJ题目915-+-字符串
- 【Python游戏】实现一个恶搞游戏,粉丝大战xxx小游戏(狗头保命) | 附带源码
- 监控摄像机安装的正确位置是哪里
- mysql 随机分组_mysql分组
- linux pv命令,linux运维系列pv指令
- 小甲鱼31课泡菜课后作业反思
- windows下kafka启动时系统找不到指定的路径(受害者亲测)
- RTMP摄像机无法成功推流到EasyDSS是什么原因?如何解决?
- 平面漩涡Shader
- 电信CALL 通话记录hbase kafka flume 学习
- JAVA怎么批量更新mysql_java 批量添加、批量更新 操作数据库
热门文章
- MAC版 的最新Docker 2.2版本配置国内代理的解决办法
- codeforces 158B-C语言解题报告
- 英语口语小组PPT--袁隆平
- 爸爸的素质决定孩子飞多高,爸爸们请反复看!!!
- Linux 内核调试器 调试指南
- 如何和何时使用 CSS 的权重设置 !important (建议:永不使用!)
- 操纵浏览器历史记录 : popstate() 、 history.pushState() 、 window.history.pushState()
- springboot 缓存ehcache的简单使用
- [WPF]xml序列化以及反序列化数据
- navicat for mysql 数据库备份与还原