表单脚本

表单的基础知识


  • HTMLFormElement有自己独特的属性和方法
  • acceptCharset,服务器能够处理的字符集,等价于HTML中的accept-charset特性
  • action,接受请求的URL,等价于HTML中的action特性
  • elements,表单中所有控件的集合
    enctype,请求的编码类型,等价于HTML中的 enctype特性
  • length,表单中控件的数量
  • method,要发送的HTTP请求类型,通常是"get"或"post",等价于HTML的method特性
  • name,表单的名称,等价于HTML的name特性
  • reset(),将所有表单域重置为默认值
  • submit(),提交表单
  • target(),用于发送请求和接收响应的窗口名称,等级与HTML的target特性

提交表单

  • 用户单击提交按钮或者图像按钮时,就会提交表单,使用“input”或“button”都可以自定义提交按钮,只要将type特性的值设置为"submit"即可

  • 提交表单时,可能出现最大的问题就是重复提交表单,在第一次提交表单之后,如果长时间没有反应,用户可能会反复单击提交按钮。解决办法两个,第一次提交之后就禁用提交按钮,或者利用onsubmit事件处理程序取消后续的表单提交操作

重置表单

  • 在用户单击重置按钮时,表单会被重置,使用type特性值为reset的“input”或“button”都可以创建重置按钮

表单字段

  • 表单字段公有的属性

  • disabled,布尔值,表示当前字段是否被禁用

  • form,指向当前字段所属表单的指针。只读

  • name,当前字段的名称

  • readOnly,布尔值,表示当前字段是否只读

  • tabIndex,表示当前字段的切换序号

  • type,当前字段类型,如CheckBox

  • value当前字段将被提交给服务器的值

  • 公有的表单字段方法

  • 每个表单都有两个方法,focus()和blur(),其中focus()方法用于将浏览器的焦点设置到表单字段,即激活字段,使其可以响应键盘事件。在调用blur方法时,并不会把焦点转移到某个特定的元素上,仅仅是将焦点从调用这个方法的元素上移走

  • 公有的表单字段事件

  • blur,当前字段失去焦点时触发

  • change,对于input和textarea元素,在失去焦点且value值改变时触发,对于select元素,在选择选项时触发

  • focus,当前字段获得焦点时触发

文本框脚本


  • 两种方式来表示文本框,input和textarea

选择文本

  • 两种文本框都支持select()方法,与select()方法对应的是一个select事件,选择文本框中的文本时,就会触发select事件
  • 添加两个属性:selectionStart和selectionEnd,保存的是基于0的数值,表示选择文本的范围
  • 所有文本框都有一个setSelectionRange()方法,接收两个参数:要选择的第一个字符的索引和要选择的最后一个字符之后的字符的索引

过滤输入

  • 剪切板事件
  • beforecopy,在发生复制操作前触发
  • copy,在发生复制操作时触发
  • beforecut,在发生剪切操作前触发
  • cut,在发生剪切操作时触发
  • beforepaste,在发生粘贴操作前触发
  • paste,在发生粘贴操作时触发

表单序列化

  • 浏览器将数据发送给服务器
  • 对表单字段的名称和值进行URL编码,使用&符分隔
  • 不发送禁用的表单字段
  • 只发送勾选的复选框和单选按钮
  • 不发送type为"reset"和"button"的按钮
  • 多选选择框中的每个选中的值单独一个条目
  • 在单击提交按钮提交表单的情况下,也会发送提交按钮,否则不发送提交按钮,也包括type为"image"的<input>元素
  • <select>元素的值,就是选中的<option>元素的value特性的值,如果<option>元素没有value特性,则是<option>元素的文本值
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 200,302评论 5 470
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,232评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 147,337评论 0 332
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,977评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,920评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,194评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,638评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,319评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,455评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,379评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,426评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,106评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,696评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,786评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,996评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,467评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,043评论 2 341

推荐阅读更多精彩内容

  • 一、表单基础知识 在 JavaScript 中,表单对应的是 HTMLFormElement 类型。 HTMLFo...
    LemonnYan阅读 934评论 0 3
  • 14.1 表单的基础知识 表单由 元素来表示,继承自HTMLElement类型,除具有HTML元素相同的默认属性外...
    Elevens_regret阅读 361评论 0 0
  • 本章内容 理解表单 文本框验证与交互 使用其他表单控制 14.1 表单的基础知识 通过document.forms...
    闷油瓶小张阅读 359评论 0 0
  • 一万字的内心戏就省略了,反正我又开始复习了,之前整理过的也不定时再更新一下,嗯,就酱。 首先,我们需要一个跨浏览器...
    范小饭_阅读 358评论 0 0
  • 表单基础知识 在HTML中,表单是使用form元素来表示的,JS中对应的是HTMLFormElement类型。它同...
    More_5897阅读 353评论 0 1