HTML5之表单

在网站中,表单是指收集用户的信息。

一,表单控件

1.文本框:单行文本框(Text input),密码框(PassWord input),文本域(Text area)。

2.选择:单选按钮(Radio buttons),复选按钮(Checkboxes),下拉列表(Drop-downboxes)。

3.提交表单:提交按钮(Submit button),图像按钮(Image buttons)。

4.上传文件:允许用户把文件上传到网站。

二,表单结构

1.<form>:表单控件位于<form>元素中。

2.action:用于指向服务器上一个页面的URL。

3.method:表单的提交方法之一:get或post。

三,单行文本框、

1.<input>:用来创建不同的表单控件。

2.type="text":创建一个单行文本框。

3.name:这个特性的值对应表单控件。

4.maxlength:限制用户在文本框输入的最大字符量。

四,密码框

1.<input>:上面我们提到了这是用来创建不同的表单控件。

2.type="password",,这里也会创建一个文本框,不同的是,输入的字符将会被隐藏。

3.name:与上同理。

4.maxlength:同样是限制用户输入的最大字符量。

五,多行文本框

1.<textarea>:用来创建多行文本框。

六,单选按钮

1.<input>:自行脑补上面的内容哈。

2.name:一个系列的单选按钮应该用同样的name。

3.value:每一个的单选按钮的value都应该不同。

4.checked:就是网页在加载后显示那个按钮被选中,用户不能更改。

七,复选框

1.type="checbox":允许用户选中多个或取消。

2.name:同上原理。

3.value:同理哈,要认真看。

4.checked:同理哈。

八,下拉列表框

1.<select>:用来创建下拉列表框。

2.name:指明表单控件的名称。

3.<option>:用来指定用户可以选择的选项,注意:每个选项都应该有<option>。

4.value:指定选项的值。

5.selected:指定页面在加载时被选中的选项,注意:只能选一个选项。

九,多选框

1.<select>:用来创建多选框。

2.size:size的值是一次显示的选项的数量。

3.multiple:允许用户选多项。

十,文件上传域

1.<input>

2.type="file":会创建一个带有browse按钮的控件。

十 一,提交按钮

1.<input>

2.type="submit":创建一个提交按钮。

3.value:用来控制按钮上的文字。

十二,图像按钮

1.<input>

2.type="image":用来创建一个图像按钮。

3.要用到图像,必少不了src。

4.width  height:控制图像的宽度和高度。

十三,按钮和隐藏控件

1.<button>创建按钮。

2.<input type="hidden">:隐藏表单控件,不会显示在用户的页面上。

十四,标签表单控件

1.<label>:在表单控件旁边使用它,可以说明白表单控件的作用。

2.for:它用来表明标签控件是对应哪个表单控件的。

十五,组合表单元素

1.<fieldset>:可将相关表单控件置于一组。

2.<legend>:包含一个标题。

十六,日期控件

1.<input type="data">:将创建一个日期控件,要求用户输入日期。

十七,电子邮件控件

1.<input type="email">:将创建一个电子邮件控件,用户必须输入正确的邮箱地址。

十八,URL输入控件

1.<input type="url">:将创建一个URL控件,用户必须输入正确的URL地址。

十九,搜索输入控件

1.<input type="search">:将创建一个搜索输入控件。

2.placeholder:文本框显示的内容,占位。


OK,表单的知识点很多,要认真学,记得不懂就提问或者搜索。

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

推荐阅读更多精彩内容

  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,327评论 0 17
  • 《裕语言》速成开发手册3.0 官方用户交流:iApp开发交流(1) 239547050iApp开发交流(2) 10...
    叶染柒丶阅读 25,267评论 5 18
  • 表单基础知识 在HTML中,表单是由 元素来表示的,而在JS中,表单对应的则是HTMLFormElement类型。...
    oWSQo阅读 900评论 0 1
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,048评论 25 707
  • 不知不觉就到了夜里三点半,这个时候万籁俱寂,除了窗外的路灯,也许只有我家客厅灯还亮着。我坐在电脑旁,烤着火,打着字...
    佳子想睡觉阅读 1,339评论 8 41