3.form表单
1.Form标签:用来将表单外的内容与表单进行关联。其主要元素有input,button,select。
action属性:指定表单的发送地址。
Novalidate属性:数据提交时不校验。
Target属性:指定在何处打开指定的url。
method属性:表单数据发送至服务器的方法,默认属性就是get。常用的有:get和post。
Get:数据会附在网址之后主动提交给服务器。
Post:数据不会附在网址后,会将数据打包发送给服务器,等候服务器来读取数据。

2.Input标签:
Type属性:指定输入内容的类型,默认是text单行文本框。其他类型:
①Text,Password,checkbox(checked设置默认值),radio(checked设置默认值,且必须将同一组单选项设置一个相同的name)。
②submit,reset,button。
③image(图片式提交按钮),hidden(隐藏字段)。
④email(邮箱- -会校验),tel(电话- - 不会校验),url(一个网址- -会校验)。
⑤number(配合max/min/step/value规定最大值/最小值/步长/默认值);
range(同number。也是表示一定范围的数值输入,但是是以活动条的状态显示)。
⑥color(建立一个颜色的选择输入框);
时间类(datetime-local,date,month,week,time)。
⑦Search(建立一个搜索框,供用户输入搜索的关键词);
File(创建一个文件选取的输入框,可通过accept属性规定选取文件的类型。Multipe可以设定一次允许选择多个文件。)
Name属性:输入内容的识别名称,传递参数时的参数名称。
Value属性:默认值。
Size属性:可以使文本框变长。
Maxlength属性:输入的最大字数。
Readonly属性:只读属性,设置的内容不可变更。
Disabled属性:设置为不可用(不可操作)。
Required属性:设置该内容为必须填写项,否则无法提交。
Placeholder属性:当文本框活得焦点时被清空。
Autocomplet属性:属性值为on/off,定义是否开启浏览器自动记忆功能。
autofocus属性:自动获得焦点。
Accesskey属性:指定快捷键(指定快捷键后,按alt+快捷键便可以自动或得焦点。)
Tabindex属性:指定按tab键时,项目间的移动顺序。
3.button标签:与input标签建立的按钮相同(在form中尽量用input,其他地方可以用button)
Type属性:值有submit、reset、button
Name/value/disable属性:同input
Autofocus属性:按钮自动获得焦点
Form属性:设定按钮属于哪个表单
Formmethod属性:谁当表单提交方式,将覆盖之前的提交方式
Formnovalidate属性:
Formaction属性:指定表单发送的对象url
Formenctype属性:指定表单数据发送类型
Formtarget属性:

4.Select标签和datalist标签:


5.Label标签:作用是点标签上的字也能选中复选框。

6.optgroup标签:作用是分组。


7.textarea标签:多行文本框。


8. output标签:for元素定义输出域相关的元素。
oninput表单事件:当用户对元素数据输入的时候触发。
parseInt()函数:解析字符串,返回一个整数。


9. progress标签:进度条。属性有:max,value进度条当前值,form。
meter标签:度量条。属性有:max,min,value,form,low低标准,high高标准(高低标准区域与中间区域颜色不一样)。


10. fieldset标签:将表单内相关元素分组,通常会有一个边框。
legend标签:为fieldset定义一个标题。


11. keygen标签:建立一个密钥生成器,当提交表单时,私钥存储在本地,公钥发送到服务器,主要作用是提供一种用户验证身份的方法。
①属性有:name,form,autofocus,disabled.
②challenge属性:将keygen的值设置在提交时间。
③keytype属性:定义密钥类型,如RSA密钥。

12. pattern属性:设定输入类型的正则表达式。

13.details标签:用于描述文档的细节。open属性规定页面上的details是可见的。
summary标签:为details定义标题,用户点击标题时,会显示出details中的内容。

3.form表单的更多相关文章
- form表单验证-Javascript
Form表单验证: js基础考试内容,form表单验证,正则表达式,blur事件,自动获取数组,以及css布局样式,动态清除等.完整代码如下: <!DOCTYPE html PUBLIC &qu ...
- Form 表单提交参数
今天因为要额外提交参数数组性的参数给form传到后台而苦恼了半天,结果发现,只需要在form表单对应的字段html空间中定义name = 后台参数名 的属性就ok了. 后台本来是只有模型参数的,但是后 ...
- form表单 ----在路上(15)
form 表单就是将用户的信息提交到服务器,服务器会将信息存储活着根据信息查询数据进行增删改查,再将其返回给用户. 基本格式: <form action="" method ...
- form表单的字符串进行utf-8编码
<form>表单有assept-charset属性.该属性规定字符的编码方式,默认是"unknown",与文档的字符集相同. 该属性除了Internet explore ...
- 细说 Form (表单)
细说 Form (表单) Form(表单)对于每个WEB开发人员来说,应该是再熟悉不过的东西了,可它却是页面与WEB服务器交互过程中最重要的信息来源. 虽然Asp.net WebForms框架为了帮助 ...
- 通过form表单的形式下载文件。
在项目中遇到问题,要求动态拼接uri下载文件.但是由于项目的安全拦截导致window.location.href 和 window.open等新建窗口的方法都不行. 无意间百度到了通过form表单来下 ...
- form 表单跨域提交
<!DOCTYPE html><html> <head> <title>form 表单上传文件</title> <script src ...
- form表单的属性标签
form表单的常用标签 表单: <form id="" name="" method="post/get" action=" ...
- form表单的属性标签和练习
form表单的标签 做一个如下图的form表单: 我们的代码如下: <body leftmargin="400px" topmargin="200px"& ...
- Django基础,Day5 - form表单投票详解
投票URL polls/urls.py: # ex: /polls/5/vote/ url(r'^(?P<question_id>[0-9]+)/vote/$', views.vote, ...
随机推荐
- RabbitMQ新建交换机、队列、交换机和队列绑定
新建交换机: 1.登录你要配置的交换机地址: 2.选择exchange,下拉选择add a new exchange 3.点击add exchange.完成 新建队列: 1.选择queues: 2.下 ...
- 04_枚举类型iota
iota是枚举类型的关键字,使用iota可以方便快捷的给常量赋值,主要体现在以下几个方面:1.iota常量自动生成器,每个一行加12.iota给常量赋值使用3.iota遇到const重置为04.可以写 ...
- 从零开始搭建Java开发环境第一篇:Java工程师必备软件大合集
1.JDK https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 目前主流的JDK版 ...
- vue 自动化路由实现
1.需求描述 在写vue的项目中,一般情况下我们每添加一个新页面都得添加一个新路由.为此我们在项目中会专门的一个文件夹来管理路由,如下图所示 那么有没有一种方案,能够实现我们在文件夹中新建了一个vue ...
- JUC包实现的同步机制,原理以及简单用法总结
除了用Synchronized关键字修饰同步块,让线程获取某对象的锁实现多线程操作共享变量的同步外,还可以使用java.util.concurrent包.并且,juc包机制下的同步更灵活.juc包的所 ...
- [python]python中的if, while, for
python中的代码块,通过缩进对齐,来表达代码逻辑. 1. if语句 if expression1: if_suite elif expression2: elif_suite else: else ...
- 牛客练习赛22C Bitset
牛客练习赛22C 一共有 n个数,第 i 个数是 xi xi 可以取 [li , ri] 中任意的一个值. 设 ,求 S 种类数. 感觉二进制真是一个神奇的东西. #include <iost ...
- Python入门基础:七段数码管绘制
1.在学习Python的过程中,运用所学的一些基础知识,进行一些简单的编程,可以收获很多乐趣.在生活中,LED灯无处不在,荧幕显示的广告词,给我们呈现出动态的视觉效果.下面,则以最简单的显示日期为例, ...
- kafka对消费者分配分区规则(Java源码)
在上一篇 kafka topic消息分配partition规则(Java源码) 我们对生产者产生的消息分配partition规则进行了分析,那么本章我们来看看消费者是怎么样分配partition的. ...
- VG有空间,创建逻辑卷
1.查看VG空间 [root@CNSZ22PL2787 ~]# vgs VG #PV #LV #SN Attr VSize VFree VolGroup00 1 7 0 wz--n- 1.63t 1. ...