天行健, 君子以自强不息
Sunny's Blog
Title

html表单

我觉得每一个web前端工程师都要对html表单怀有一颗崇敬之心,原因很简单,html表单之于web就像恐龙之于地球,它是比人类更早的存在,类似的,html表单比js本身更早,他的运行根本就不需要js。好了,废话就说到这了,下面就html表单涉及到的几个不太注意到的点,总结一下。

1.<input type="file"> 有onchange事件,载入web服务器的文件的文件名输入域,他的value值是只读的。在这个dom上绑定change事件,获取的val就是文件的路径和名字。

2.如果用纯js来写表单验证,利用每个Form元素都有一个onsubmit事件处理程序来侦测表单提交,表单会在提交前调用onsubmit程序,它通过return false可以取消提交动作,这个机会可以用来做前端验证。需要注意的是onsubmit函数只能通过提交按钮来触发,直接调用submit方法不会触发,同理还有onreset。经过测试的结果是如果是纯js,直接调用submit方法不会触发onsubmit,如果你用jquery的submit,是可以触发onsubmit,要注意。

3.按钮的onclick事件,如果返回false,按钮的默认动作就不再执行了。比如有submit的button,就可以不提交了,记住一定是纯js的dom元素才会起作用,不过一般不用这个方法来验证表单

4.单复选框都定义了checked属性,用纯js来检测这个是实时变化的,还有一个属性是defaultChecked,这个是元素初始状态(选中或未选中),已经过测试。关于label,常用的配置是label把checkbox/radio和相关文字包起来,保证点击文字也可以改变选中的状态。(有一点注意,当用户单击其他单选按钮而导致这个单选按钮状态改变时,后者不触发onchange事件)

5.select元素定义了options属性来判定下拉列表个数或者定义下拉列表个数,eg:xxx.options.length=3或者xxx.options[1]=null。

6.form表单中如果button不写type,默认就是submit

7.form表单中如果只有一个可见的input, Enter就会submit; 如果有多个可见的input, 就不会提交表单, 所以我们做表单异步提交的时候要注意这个问题

地势坤,君子以厚德载物