微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

表单元素 开篇

2016-02-01 20:28 前端大全

(点击上方,可快速关注)

来源:司徒正美(@司徒正美)

网址:http://www.cnblogs.com/rubylouvre/p/5121459.html


今天开始讲述表单这个重要模块


可以说,JS 最早是为表单而发明的, 因此在没有JS之前,所有操作都需要提交后端验证,发现有误再重定向回原页面,加上之前1,2KB的网速,这用户体验真是奇差无比.因此JS最初发明出来,就是做表单验证的.


围绕表单,添加了各种语义化的元素,事件,属性.


比如说label,在某个radio外围上它,既能说明它是什么东西,也能扩大点击范围


比如说fieldset,它拥有默认的框框,方便圈定某个区域,表明这里面的东西是表单(form本身默认不可见,而CSS要在稍晚的时候才发明出来)


比如说, onchange, oninput, onsubmit等事件,提交与用户交互的友好度


比如说, readOnly, disabled, checked, 为表单元素增加各种状态.


我们可以给一个定义,何谓表单元素 ?就是能向后端提供数据的元素


而这些元素通过都放在form元素中,但如果将它们单个拎出来,这个不好判定,我们还可以通过其他”外观”特征获得,就是它们的tagName都是input, button, select, textarea.其实option元素也算是表单元素,但它的数据需要提交到select 元素 进行过滤,才能提交


function isFormElement(el){

   return /input|button|select|textarea/i.test(el.tagName)

}


在HTML5中,还添加类似datalist, output等元素, 但它们只是辅助设施,没有直接给form提交数据的能力,因此不算是表单元素.


form元素作为AJAX出现前唯一的提交通道,我们在这里着重说一下


它上面拥有如下属性                          

属性 描述
accept MIME_type  规定通过文件上传来提交的文件的类型
accept-charset charset 服务器处理表单数据所接受的字符集
enctype MIME_type 规定表单数据在发送到服务器之前应该如何编码
method get/post 规定表单数据发送的方式,get方法和post方法
name name 规定表单的名称
target _blank/_parent/_self/_top 规定在何处打开action URL


其中三个重要属性说明一下:


1、action指定该表单发送时接受操作的地址


2、method指定表单数据发送的方法。可选值:get、post。get发送则表单内的数据将附加到url后发送。post则是在HTTP请求中发送。


3、enctype指定表单数据在发送的服务器之前如何编码,特别注意的是,当含有上传域时要设置编码方式为enctype=”multipart/form-data”,否则后台无法获取到浏览器发送的文件数据。是设置表单的MIME编码。默认情况,这个编码格式是application/x-www-form-urlencoded,不能用于文件上传;只有使用了multipart/form-data,form里面的input的值以2进制的方式传过去。才能完整的传递文件数据。FTP上传大文件的时候,也有个选项是以二进制方式上传。



表单里面的元素布置有一定的要求,如form里面一定放着fieldset, fielset里面包着legend, label包着说明文字与input, textearea…., label里要指定tabindex,就是tab切换的顺序。


<form>

  <fieldset>

    <legend>health information</legend>

    <label tabindex="1">height: <input type="text"></label>

    <label tabindex="2">weight: <input type="text"></label>

  </fieldset>

</form>


不同的表单拥有不同的外形,它们的用法也各有不同,序列化数据也不一样,因此我们将分开以下几种细细讨论.


输入系, 选择系, 下拉系, 搭车系, 图形系



【今日微信公号推荐↓】

 
前端大全 更多文章 5个典型的JavaScript面试题(上) Limu:JavaScript的那些书 Web开发:我希望得到的编程学习路线图 JavaScript基础工具清单 常用排序算法之JavaScript实现
猜您喜欢 Android中应用锁的实现之账号盗取 震撼:手机将在5年后消失! Objective-C语言程序结构 perl黑魔法[三]-hash的赋值 Android单元测试(七):Robolectric,在JVM上调用安卓的类