增加表单的文字段的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属性可以应用在大多数输入元素上,在提交表单时,如果表单为空则不允许提交。

ca5f0512283ba1837280afb409785cce.png

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";

}

45f6e94be27a98cf2a1defccbb20cfc9.png

10:文本框的placeholder属性

placeholder是指当文本框处于未输入状态时显示的输入提示。当文本框处于未输入状态且未获取光标焦点时,模糊显示输入提示文字。也可以使用css来控制其中文字的样式。

input::-webkit-input-placeholder{ color:#0F0;}

368b7a9ed2877262bbad22e7698958b0.png

9260e272d0bc86682b3196281d915668.png

11:文本框的list属性

在HTML5中 为需要的input标签设置一个list属性,然后在任意位置放一对 datalist 标签,并给 datalist 标签一个 id,和 list 属性值i一致。

在 datalist 标签下放列表项,每个列表项用 option 元标签来表示,这样就可以做一个下拉框,当用户需要的值不在下拉列表中时,可以自行输入。datalist 标签的内容不显示,只有在文本框获取焦点时才会以下拉列表的形式表现出来。

练习

练习1

练习2

33fd3c2f67dd46a0e9fef2998cf9ff89.png

12:文本框的autocomplete属性

辅助输入的的属性,autocomplete有三种值"on"、"off"、"default"(不指定)。不进行指定时,使用游览器的默认值。

使用方法如下当你在文本框内输入如“某一段话”点击提交后,要是再次在文本框中输入“某”,点击就会提示“某一段话”。

065748711bd2c20375e0f39265d25833.png

13:文本框的patten属性

等于直接在html部分用正则表达式判断值输入是否符合要求。

14:文本框的selectionDirection属性

针对input元素与textarea元素,可以获取用户选取元素时是正向选取还是反向选取。正向选取值或没选为forward,反向为backward。

15:复选框的indeterminate属性

在H5中,可以在js中对该元素使用indeterminate属性,以说明复选框“尚未明确选取”状态。 在js中使用布尔类型的值对该属性赋值。在js代码中对复选框选中的状态进行判断时需要先判断indeterminate属性,在判断checked属性值。

16. image提交按钮的height属性与width属性

表单提交的图片按钮

5445229d6fd4f014f06428b651f61518.png

17. textarea元素的maxlength属性与wrap属性

maxlength :,用于限定textarea元素设置最大输入值。

wrap:其属性值为soft与hard。当属性为hard时,在没有用回车键而是文字超出一排规定范围而自动换行时,提交表单时会加换行符。soft则在提交时不会加换行符。

18:在HTML5中增加了input许多的type种类

比如URL类型,email类型,在输入时会要求一定的格式,自动判断输入是否符合格式

date类型,time类型,是专门用来输入时间的。

datetime-local类型是专门用来检查本地日期和时间的,提交时对输入日期进行有效性检查。

51d5c5659636116daa3e23d19e0e704c.png

month类型专门输入月份的文本框。

9be5b7d728e29c8c65e8c0b04772e327.png

week类型专门输入周的文本框。

444ca81f9522b1222bf68b7ad801b344.png

number类型专门输入数字。

range类型是一种只允许输入一段范围内的数值的文本框。

60106e349a0a7c81bc9c34d9f825fb4a.png

search类型是一种专门用来输入搜索的关键词的文本框。

Tel类型用于输入电话的专业文本框。

color类型用于选取颜色,会自动出来颜色选择器。

5b00f51c232cc0f89922962048a56a67.png

19:日期时间类型的新增元素的属性step属性,valueAsDate属性

step属性:  是对指定属性值的选择值得限定。  控制元素的值增加或减少的步幅。

valueAsDate属性:是用于设置或获取UTC日期和时间。

——参考自《HTML5与css3的权威指南》

3580c816430f9ff20d5c899ea4d212ae.png

希望能遇到一起进步的

show-360967.html

122552b0909e8c15b0218249818fb096.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/453217.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

给博客或站点加入百度统计

概述 记得刚接触百度统计的时候,苦于没有个人网站,不能加入统计代码查看访问量等数据。然后渐渐的忘了这件事。之前看别人博客中提及了百度统计,然后粗略的看了一下加入方法,觉得很惊喜,太简单了! 加入方法…

项目规划管理

项目规划管理 - 1 项目规划是预测未来,确定要达到的目标,估计会碰到的问题,并提出实现目标、解决问题的有效方案、方针、措施和手段的过程。( 摘自百度百科) 大家应该都看过不少美国大片,是否记得很多片子里,特别是偷…

android9叫什么名字,白猜这么多名字!谷歌Android 9.0正式发布:命名Android Pie

日前,谷歌对外公布了Android P的beta版,并向索尼Xperia XZ2、小米Mi Mix 2S、诺基亚7 Plus、Oppo R15 Pro、Vivo X21、一加6和Essential PH-1开放测试。今天,谷歌终于宣布正式发布Android 9.0的正式版本。据外媒GSMArena报道,今天…

再送一波干货,测试2000线程并发下同时查询1000万条数据库表及索引优化

原文:再送一波干货,测试2000线程并发下同时查询1000万条数据库表及索引优化继上篇文章《绝对干货,教你4分钟插入1000万条数据到mysql数据库表,快快进来》发布后在博客园首页展示得到了挺多的阅读量,我这篇文章就是对上篇文章的千万…

wps html编辑表格,WPS 2017个人版演示word使用技巧(wps2017表格使用技巧)

wps2017是一款非常深受用户喜爱的办公软件。在2017这个新的版本中,依旧继承了它之前兼容免费、体积小、多种界面切换、云办公等众多优秀的功能特点,下面小编就来教大家wps2017的使用方式使用技巧:一、wps2017个人版word使用技巧技巧一&#x…

es Update API

2019独角兽企业重金招聘Python工程师标准>>> es Update API 博客分类: 搜索引擎,爬虫 The update API allows to update a document based on a script provided. The operation gets the document (collocated with the shard) from the ind…

Linux 线程占用CPU过高定位分析

今天朋友问我一个Linux程序CPU占用涨停了&#xff0c;该如何分析&#xff0c; CPU占用过高&#xff0c;模拟CPU占用过高的情况 先上一段代码&#xff1a; 1 #include <iostream>2 #include <thread>3 #include <vector>4 5 6 int main(int argc, char **argv…

计算机二级常备知识,2020年计算机二级Office考试必备题库资料!

考试资料在手&#xff0c;考试不用愁&#xff01;领报名界面显示计算机二级Office通过率仅21.07%&#xff0c;很多人认为是既费脑子又费时间的考试&#xff0c;可能是方法不对&#xff0c;导致花了很多时间还是考不过&#xff0c;刚刚收到3月考的二级证书啦&#xff0c;马上还有…

MR作业的提交监控、输入输出控制及特性使用

2019独角兽企业重金招聘Python工程师标准>>> MR作业的提交监控、输入输出控制及特性使用 博客分类&#xff1a; hadoop 提交作业并监控 JobClient是用户作业与JobTracker交互的主要接口&#xff0c;它提供了提交作业&#xff0c;跟踪作业进度、访问任务报告及logs、…

http协议与web本质

当你在浏览器地址栏敲入“http://www.csdn.net/”&#xff0c;然后猛按回车&#xff0c;呈现在你面前的&#xff0c;将是csdn的首页了&#xff08;这真是废话&#xff0c;你会认为这是理所当然的&#xff09;。作为一个开发者&#xff0c;尤其是web开发人员&#xff0c;我想你有…

Docker storage driver 选择

2019独角兽企业重金招聘Python工程师标准>>> Docker storage driver 选择 博客分类&#xff1a; docker 本文的目的是说明&#xff0c;如何在生产环境中选择Docker 的storage driver。以及对应Linux发行版本下Docker storage driver的配置方法。主要参考&#xff0c…

手机网站制作html5,【怎么样制作手机网站】如何使用dreamweavercs6建立手机网站?织梦手机WAP浏览模块如何制作手机网站?如何制作html5手机页面?...

【怎么样制作手机网站】如何使用dreamweavercs6建立手机网站?织梦手机WAP浏览模块如何制作手机网站?如何制作html5手机页面?下面就和小编一起来看看吧!如何使用dreamweavercs6建立手机网站?制作步骤如下:1。打开DreamweaverCS6软件&#xff0c;可以在DreamweaverCS6软件的开…

如果在docker中部署tomcat,并且部署java应用程序

2019独角兽企业重金招聘Python工程师标准>>> 如果在docker中部署tomcat,并且部署java应用程序 博客分类&#xff1a; docker 1、先说如何在docker中部署tomcat 第一步&#xff1a;root用户登录在系统根目录下创建文件夹tomcat7,命令如&#xff1a;mkdir tomcat7&…

Spring Boot结合thymeleaf

之前在Eclipse里写了个Spring Boot响应jsp的小demo&#xff0c;后来发现打成jar包导出之后找不到jsp文件了。经过在网上查阅信息与资料&#xff0c;发现Spring Boot对于jsp的支持其实是不好的&#xff0c;而且在一些书中和官方都明确表示没有办法支持在jar包中打入jsp文件。虽然…

视觉测量简介

1.1 视觉测量技术 1.1.1 现代检测技术的发展趋势 检测技术是现代化工业的基础技术之一&#xff0c;是保证产品质量的关键。在现代化的大生产之中&#xff0c;涉及到各种各样的检测。随着工业制造技术和加工工艺的提高和改进&#xff0c;对检测手段、检测速度和精度提出了更…

高并发系统之降级特技

2019独角兽企业重金招聘Python工程师标准>>> 高并发系统之降级特技 博客分类&#xff1a; 架构 在开发高并发系统时有三把利器用来保护系统&#xff1a;缓存、降级和限流。之前已经有一些文章介绍过缓存和限流了。本文将详细聊聊降级。当访问量剧增、服务出现问题&a…

freeradius 3.0 时间限制_创意营销3.0新模式下,易企秀要成为中国的Adobe

近几年&#xff0c;随着大数据和人工智能技术的发展&#xff0c;智能化、程序化营销在国内获得高速发展。从以创意内容、提升效率的工具到现在驱动企业数字化转型的智能营销&#xff0c;营销云在国内的热度与成熟度不断提升。营销云起源于“Enterprise Marketing Software Suit…

抢占式和非抢占式的进程调度

非抢占式&#xff08;Nonpreemptive&#xff09; 让进程运行直到结束或阻塞的调度方式 容易实现 适合专用系统&#xff0c;不适合通用系统 抢占式&#xff08;Preemptive&#xff09; 允许将逻辑上可继续运行的在运行过程暂停的调度方式 可防止单一进程长时间独占…

图形学基础知识

本篇主要给大家介绍图形学基础知识&#xff0c;了解Unity图像渲染机制&#xff0c;以及图像渲染管线流程。 主要是因为伴随着VR/AR的飞速发展&#xff0c;为了满足VR高清高帧率的极限渲染&#xff0c;着色器编程&#xff08;Shader&#xff09;也成为了Unity程序开发人员的必备…