form表单相关

form表单有什么作用?有哪些常用的input 标签,分别有什么作用?

概述 作用

  • HTML <form> 元素 表示了文档中的一个区域,这个区域包含有交互控制元件,用来向web服务器提交信息。

  • 可以用:valid 和 :invalid css 伪类来指定元素指定样式。

  • form 属性

accept 一个逗号分隔的列表,包括服务器能接受的内容类型。
accept-charset
一个空格分隔或逗号分隔的列表,这个列表包括了服务器支持的字符编码。浏览器以这些编码被列举的顺序使用它们。默认值是一个保留字符串“UNKNOWN”。这个字符串指的是,和包含这个form元素的文档相同的编码。
在之前版本的HTML中,不同的字符编码可以用空格或逗号分隔。在HTML5中,只有空格可以允许作为分隔符。
action
一个处理这个form信息的程序所在的URL。这个值可以被<button> or <input>元素中的formaction属性重载

autocomplete

用于指示 input 元素是否能够拥有一个默认值,这个默认值是由浏览器自动补全的。这个设定可以被属于这个form的子元素的 autocomplete
属性重载(覆盖)。 可能的值有:off

  1. off 在每一个用到的输入域里,用户必须显式的输入一个值,或者document 以它自己的方式提供自动补全;浏览器不会自动补全输入。

  2. on 浏览器能够根据用户之前在form里输入的值自动补全。

enctype

当 method 属性值为 post 时, enctype 是提交form给服务器的内容的 [MIME 类型]。可能的取值有:

  1. application/x-www-form-urlencoded: 如果属性未指定时的默认值。
  2. multipart/form-data : 这个值用于一个 type 属性设置为 "file" 的元素。
    3.text/plain (HTML5)

method

浏览器使用这种 方式来提交 form. 可能的值有:

  1. post: 指的是 HTTP,表单数据会包含在表单体内然后发送给服务器.
  2. get: 指的是 HTTP表单数据会附加在 URI action 属性中并以 '?' 作为分隔符, 然后这样得到的 URI 再发送给服务器. 当这样做(数据暴露在URI里面)没什么副作用,或者表单仅包含ASCII字符时,再使用这种方法吧。)

name

这个form的名字。在HTML4中,这个用法不被推荐(作为替代,应该使用id). HTML5中,一个文档中的多个form当中,name必须唯一而不仅仅是一个空字符串。

target
一个名字或者说关键字,用来指示在提交表单之后,在哪里显示收到的回复. 在 HTML 4 里, 这是一个用于 frame 的名字/关键字. 在 HTML5 里, 这是一个用于 browsing context 浏览器上下文 的名字/关键字 (举例来说, 标签页tab, 窗口window, or 或者行内 frame). 如下的关键字含有特别的含义:
1._self: 在当前HTML4或HTML5文档页面重新加载返回值。这个是默认值。译注:也就是说如果这个文档在一个frame中的话,self是在当前frame(document)中重新加载的,而不是整个页面(window)。
2._blank: 以新的HTML4或HTML5文档窗口加载返回值。
3._parent: 在父级的frame中以HTML4或HTML5文档形式加载返回值,如果没有父级的frame,行为和_self一致。
4._top: 如果是HTML 4文档: 清空当前文档,加载返回内容;HTML5: 在当前文档的最高级内加载返回值,如果没有父级,和_self的行为一致。
5.iframename: 返回值在指定frame中加载。

例子:


<form action="">
<label for="GET-name">Name:</label>
<input id="GET-name" type="text" name="name">
<input type="submit" value="Save">
</form>


<form action="" method="post">
<label for="POST-name">Name:</label>
<input id="POST-name" type="text" name="name">
<input type="submit" value="Save">
</form>

<form action="" method="post">
<fieldset>
<legend>Title</legend>
<input type="radio" name="radio" id="radio"> <label for="radio">Click me</label>
</fieldset>
</form>

常用的input 标签 及其作用?

在如何<input>根据其价值的作品有很大的差别type的属性,因此不同类型的覆盖在自己单独的参考页。如果未指定此属性,则采用的默认类型为text。
1.[button]
:没有默认行为的按钮。

2.[checkbox]
:复选框允许选择/取消选择单个值。

3.[color]
:用于指定颜色的控件。
颜色选择器的UI没有必要的功能,而不是接受简单的颜色作为文本

4.[date]
:用于输入日期的控件(年,月,日,没有时间)。

5.[email]
:用于编辑电子邮件地址的字段。

6.[file]
:允许用户选择文件的控件。 使用accept属性来定义控件可以选择的文件类型。

7.[image]
:图形提交按钮。您必须使用src属性来定义图像的源和alt属性来定义替代文本。
您可以使用height和width属性来定义图像的大小(以像素为单位)。

8.[month]
:用于输入一个月和一年的控件,没有时区。

9.[number]
:用于输入数字的控件。

10.[password]
:其值被遮蔽的单行文本字段。使用maxlength属性来指定可以输入的值的最大长度。

11.[number]
:用于输入数字的控件。

12.[password]
: 其值被遮蔽的单行文本字段。使用maxlength属性来指定可以输入的值的最大长度。

13.[radio]
:单选按钮,允许从多个选择中选择一个值。

14.[range]
:用于输入确切值不重要的数字的控件。

15.reset
:将表单内容重置为默认值的按钮。

16.[search]
: 用于输入搜索字符串的单行文本字段.换行符将自动从输入值中删除。

17.[submit]
:提交表单的按钮。

18.[tel]
 :用于输入电话号码的控件。换行符将自动从输入值中删除,但不会执行其他语法。

您可以使用诸如pattern和maxlength之类的属性来限制在控件中输入的值。
19.[text]
:单行文本字段。换行符将自动从输入值中删除。

20.[time]
 :用于输入没有时区的时间值的控件。

21.[url]
:用于编辑URL的字段。在提交之前,输入值被验证为包含空字符串或有效的绝对URL。
您可以使用诸如pattern和maxlength之类的属性来限制在控件中输入的值。

22 [week]
:用于输入不含时区的星期数和周号的日期的控件。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,558评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,002评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,036评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,024评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,144评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,255评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,295评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,068评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,478评论 1 305
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,789评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,965评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,649评论 4 336
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,267评论 3 318
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,982评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,223评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,800评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,847评论 2 351

推荐阅读更多精彩内容

  • form表单的作用 form表单中包含众多交互控制原件,可以向服务器提交数据,从而实现用户和服务器的交互。 常用的...
    leocz阅读 307评论 0 0
  • 1.form表单有什么作用?有哪些常用的input 标签,分别有什么作用? form表单的作用是收集用户所填写的信...
    饥人谷_邵征鹏阅读 482评论 0 0
  • form表单有什么作用?有哪些常用的input标签,分别有什么作用? 表单用于向服务器传送数据。 常见的input...
    虚玩玩TT阅读 591评论 0 0
  • form简介 是HTML中的一个元素,它表示文档中的一个区域,这个区域包含了交互控件,用于向web服务器提交信息。...
    七里之境阅读 1,323评论 0 1
  • Einstein,他说世界上最美好的体验,就是未知的神秘。也许人一生最珍贵的时刻,就是在自己熟悉的环境中,体验到自...
    Forness阅读 364评论 0 0