• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • html5 表单

    版本:HTML5

    功能:表单用于向服务器传输数据,从而实现用户与Web服务器的交互。一个表单有三个基本组成部分: 1.表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。2、表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 3、表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。

    HTML5 Web Forms 2.0是对目前Web表单的全面提升,它在保持了简便易用的特性的同时,增加了许多内置的控件或者控件属性来满足用户的需求,并且同时减少了开发人员的编程。HTML5 主要在以下几个方面对目前的Web表单做了改进:

    <form>属性

    HTML <form> 元素 表示了文档中的一个区域,这个区域包含有交互控制元件,用来向web服务器提交信息。除全局属性外,<form>还有如下一些属性:

    accept-charset

    一个空格分隔或逗号分隔的列表(在HTML5中,仅能以空格作为分隔符),这个列表包括了服务器支持的字符编码。浏览器以这些编码被列举的顺序使用它们。默认值是一个保留字符串“UNKNOWN”。这个字符串指的是,和包含这个form元素的文档相同的编码。

    action

    一个处理这个form信息的程序所在的URL,即向何处提交表单数据。这个值可以被input或者button的formaction属性重载。

    autocomplete

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

    • off。在每一个用到的输入域里,用户必须显式的输入一个值,或者document以它自己的方式提供自动补全;浏览器不会自动补全输入。
    • on。浏览器能够根据用户之前在form里输入的值自动补属性重载(覆盖)。

    enctype

    当 method属性值为 post 时,enctype是提交form给服务器的内容的 MIME 类型 。

    • application/x-www-form-urlencoded: 如果属性未指定时的默认值
    • multipart/form-data这个值用于一个 type 属性设置为 "file" 的 元素。
    • text/plain将文件设置为纯文本的形式,浏览器在获取到这种文件时并不会对其进行处理。

    method

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

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

    method的值可以被<button>或者<input>元素中的 formmethod 属性覆盖。

    HTML中需要放在form之中的诸如inputbuttonelecttextarea等标签元素,在HTML5中完全可以放在页面任何位置,然后通过新增的form属性指向元素所属表单的ID值,即可关联起来。

    name

    指定form的名称。HTML5中,一个文档中的多个form当中,name必须唯一而不仅仅是一个空字符串。

    novalidate

    这个属性是一个布尔属性,指定了是否对表单提交的数据进行验证。如果这个属性没有指定 (因此这个 form 是验证通过的)。这个属性可以被inputbutton的formnovalidate属性覆盖。

    target

    指定<form>提交后,在哪里显示响应。有以下几种取值:

    • _self:默认值,在当前文档页面加载返回值;
    • _blank:在新窗口加载返回值;
    • _parent:在父级上下文中加载,如果没有父级,按_self执行;
    • _top:如果是HTML 4文档,清空当前文档,加载返回内容;如果是HTML5,在顶级上下文内加载返回值。如果没有父级,按_self执行。
    • iframename: 指定的frame中加载。


    form表单控件

    <input>

    <input>是form表单中最常用的输入对象之一,具有如下属性:

    <input>的type属性

    设置控件的类型,默认为text。根据type属性的不同,<input>有不同的作用,<input>的常见type如下:

    • button:无缺省行为按钮。
    • radio:单选按钮。必须使用 value 属性定义此控件被提交时的值,使用checked指示控件是否被默认选择。在同一个“单选按钮组”中,所有单选按钮的 name 属性使用同一个值; 一个单选按钮组中,同一时间只有一个单选按钮可以被选择。
    • checkbox:复选框。必须使用 value 属性定义此控件被提交时的值,使用 checked 属性指示控件是否被选择,也可以使用 indeterminate 指示复选框在一种不确定状态。
    • color:HTML5新增 用来指定颜色的控件。
    • date:用来输入日期的控件。
    • datetime:HTML5新增 基于UTC时区的日期时间输入控件。
    • datetime-local:用于输入日期时间的控件,不包含时区。
    • month:HTML5新增 输入年月的控件,不带时区。
    • week:HTML5新增 用于输入一个由星期-年组成的日期,日期不包括时区。
    • time:HTML5新增 用于输入不含时区的时间控件。
    • email:HTML5新增 用于编辑email的字段,当提交表单时,会自动地对 email 字段的值进行验证。合适的时候可以使用 :valid 和 :invalid CSS 伪类。
    • tel:HTML5新增 用于输入电话号码的控件。
    • url:HTML5新增 用于编辑URL的字段。
    • file:此控件可以让用户选择文件。使用 accept 属性可以定义控件可以选择的文件类型。
    • hidden:不显示在页面上的控件,但它的值会被提交到服务器。
    • image:图片提交按钮,必须使用 src 属性定义图片的来源及使用 alt 定义替代文本。
    • number:HTML5新增 用于输入浮点数的控件。
    • password:用于输入值被掩盖的单行文本字段,可以用maxlength指定输入值的最大长度。
    • range:HTML5新增 用于输入不精确值控件。
    • reset:用于将表单所内容设置为缺省值的按钮。
    • submit:用于提交表单的按钮。
    • search:HTML5新增 用于输入搜索字符串的单行文本字段,如果换行会从输入的值中自动移除。
    • text:单行字段,换行会将自动从输入的值中移除。

    <input>属性

    • accept:如果该元素的 type 属性的值是file,则该属性表明了服务器端可接受的文件类型;否则它将被忽略。
    • autocomplete:HTML5新增 设置是否自动填充,如果type属性的值是hidden、checkbox、radio、file,或为按钮类型(button、submit、reset、image),则本属性被忽略。
    • autofocus:HTML5新增 设置在页面加载时自动获得焦点,如果type属性设置为隐藏则不能应用。
    • autosave:设置保存填写数据,如果type的属性的值是search,当页面加载时,之前的搜索项目会在下拉菜单中出现。
    • checked:如果该元素的type属性的值为radio或者checkbox,则该布尔属性的存在与否表明了该控件是否是默认选择状态。
    • disabled:表示此控件被禁用,在禁用的控件中, click事件将不会被分发,且禁用的控件的值在提交表单时也不会被提交 。如果type属性为hidden,此属性将被忽略。
    • form:设置与此控件关联的<form>表单,该属性的值与所关联的<form>的id一致。
    • formaction:表示处理<input>提交信息的程序的URI,如果指定了,将重写<input>所属<form>的action属性。
    • formenctype:如果<input>的类型是submit或image,此属性值指定提交表单到服务器的内容类型,如果指定了,将重写所属<form>的enctype属性。
    • formmethod:如果<input>的类型是submit或image,此属性指定了提交表单的HTTP方法。
    • height: 如果type属性是image,此属性指定image的显示高度。
    • width:如果type属性是image,此属性指定image的显示宽度。
    • list:HTML5新增 这个属性可为用户预设一组输入选项,其值与同一文档中的<datalist>的id一致。
    • max:HTML5新增 设置日期或数字的最大值。
    • min:HTML5新增 设置日期或数字的最小值。
    • multiple:HTML5新增 当type属性为email或file时,设置用户是否可以输入多个值。
    • name:设置控件的名称。
    • pattern:HTML5新增 检查输入值的正则表达式。
    • placeholder:HTML5新增 提示用户可能的输入值。
    • readonly:设置输入值是否不可修改;如果type是hidden,range,color,checkbox,radio,file或button,则该属性可忽略。
    • required:HTML5新增 设置用户在提交表单时该控件的值必填。
    • spellcheck:设置拼写检查。
    • src:如果type为image,该属性设置了image的source。
    • value:设置控件的初始值,除了type是checkbox或radio时必须指定value的值,其他情况下该属性是可选的。

    <button>

    <button>表示一个可以点击的按钮,<button>元素比<input>元素更易样式化,<button>元素内部可以添加内联HTML内容(如<em><strong>甚至<img>),并使用:after和:before伪元素实现复杂的渲染。但是不可以放图像映射,因为它对鼠标和键盘敏感的动作会干扰按钮的行为。

    <button>有如下常见属性:

    • autofocus:一个布尔属性,规定页面加载时按钮自动获得输入焦点。
    • disabled:设置用户不能与按钮进行交互。
    • form:表示<button>元素关联的<form>元素(它的表单拥有者)。
    • formaction:表示处理<button>提交信息的程序的URI,如果指定了,将重写<button>所属<form>的action属性。
    • formenctype:如果<button>是的类型是submit,此属性值指定提交表单到服务器的内容类型。如果指定了,将重写<button>所属<form>的enctype属性。
    • formnovalidate:此属性指定<button>提交时不需要验证。如果指定了,它会重写<button>所属<form>的novalidate属性。
    • formtarget:如果<button>是submit类型,此属性指定表单数据提交后在哪里显示响应。如果指定了,它会重写<button>所属<form>的target属性。
    • name:指定<button>的名称。
    • type:指定<button>的类型。包括:submit,reset,button和menu。
    • value:指定<button>的初始值。

    <select>,<optgroup>,<option>,<datalist>

    <select>可创建选项菜单,菜单内的选项为<option>,可由<optgroup>分组。
    <select>具有如下属性:

    • autofocus:让一个对象在页面加载后自动获得焦点。
    • disabled:禁用下拉列表。
    • form:指定<select>所关联的<form>表单。
    • multiple:HTML5新增 设置select是否可以多选,默认为单选。
    • name:指定控件名称。
    • required:HTML5新增 规定用户提交表单时,select的值不能为空。
    • size:规定下拉列表可见选项的数量。
    • <optgroup>会创建包含在<select>中的一组<option>选项,有两个属性:
    • disabled 该选项组中的选项被禁用。
    • label 设置选项组的名字。
    • <option>可以在设置弹出窗口或其他项目列表中的菜单项,有如下属性:
    • disabled:设置选项不可选。
    • selected:设置初始被选中的选项。
    • value:设置选项被选中时,提交给表单的值。
      例如:
    <select>
      <optgroup label="Group 1">
        <option>Option 1.1</option>
      </optgroup> 
      <optgroup label="Group 2">
        <option disabled>Option 2.1</option>
        <option selected>Option 2.2</option>
      </optgroup>
    </select>
    


    HTML5新增控件类型

    email输入类型

    <input type="email">
    

    此类型要求输入格式正确的email地址,否则浏览器是不允许提交的,并会有一个错误信息提示。此类型在Opera中必须指定name值,否则无效果。

    url输入类型

    <input type="url" > 
    

    上面代码展示的文本域要求输入格式正确的URL地址,Opera中会自动在开始处添加

    日期时间相关输入类型

    date,time,datetime,datetime-local,month,week

    <input type="date">
    <input type="time">
    <input type="month">
    <input type="week">
    

    这一系列是很酷的一个类型,完全解决了烦琐的JS日历控件问题.但目前MS只有Opera/Chrome新版本支持,且展示效果也不一样。

    number输入类型

    <input type="number">
    

    此类型将显示一个可拖动的滑块条,并可通过设定max/min/step值限定拖动范围.拖动时会反馈给value一个值。

    search输入类型

    <input type="search"> 
    
    <input type=search results=s />
    

    此类型表示输入的将是一个搜索关键字,通过results=s 或者 x-webkit-speech 可显示一个搜索小图标. [在chrome下才能看得见]

    tel输入类型

    <input type="tel"> 
    

    此类型要求输入一个电话号码,但实际上它并没有特殊的验证,与text类型没什么区别。

    color输入类型

    <input type="color"> 
    

    此类型可让用户通过颜色选择器选择一个颜色值,并反馈到value中。


    keygen输入类型

    <keygen name="keygen">
    

    keygen 标签规定用于表单的密钥对生成器字段。当提交表单时,私钥存储在本地,公钥发送到服务器。所有主流浏览器都支持 keygen 标签,除了 Internet Explorer 和 Safari。

    新增表单属性

    placeholder属性

    <input type="text" placeholder="点击我会以清除">
    

    这是一个很实用的属性,免去了用JS去实现点击清除表单初始值.浏览器支持也还不错,MS除了Firefox,其他标准浏览器都能很好的支持。

    require属性

    <input type="text" required="">
    <input type="text" required="required">
    

    表单验证属性。为require类型时,若输入值为空,则拒绝提交,并会有一个提示。上面两种写法都对。这个很有用。并且可以用于textareahiddenimagesubmit类型。

    pattern属性

    <input type="text" pattern="^[1-9]\d{5}$">
    

    pattern类型为正则验证,可以完成各种复杂的验证。这两种类型在Opera中必须指定name值,否则无效果。

    autofocus属性

    <input type="text" autofocus="true">
    

    默认聚焦属性,可在页面加载时聚焦到一个表单控件,类似于JS的focus()。

    list属性

    <input type="text" list="ilist">
    <datalist>
    	<option label="a" value="a"></option>
    	<option label="b" value="b"></option>
    	<option label="c" value="c"></option>
    </datalist>
    

    该属性需要与datalist标签共用,datalist是对选择框的记忆,而list属性可以为选择框自定义记忆的内容。

    此类型将显示一个可拖动的滑块条,并可通过设定maxminstep值限定拖动范围。拖动时会反馈给value一个值。

    <input type="range" max="100" min="1" step="20">
    

    限制值的输入范围,以及值的输入渐进程度,比如可在number设定输入最大值最小值,或者在range中设定拖动阶梯。

    range的onchange事件:

    HTML

    <input id="howYouRateIt" name="howYouRateIt" type="range" min="1" max="10" value="5" onchange="showValue(this.value)"><span id="rangeid">5</span>
    

    JS

    function showValue(newValue)
    {
    	document.getElementById("rangeid").innerHTML=newValue;
    }
    
    5


    autocomplete属性

    <input type="text" autocomplete="on">
    

    此属性是为表单提供自动完成功能。如果该属性为打开状态,可很好地自动完成。一般来说,此属性必须启动浏览器的自动完成功能。

    data属性

    <select data="https://www.lanmper.cn"></select>
    

    要为一个select下拉别表动态的添加非常多的选项,这些选项大多数都是来自数据库,比如说国家、省市列表等等。这个事情非常繁琐。HTML5将支持data属性,为select控件外联数据源!

    contenteditable属性

    <p contenteditable="true" >可以编辑的内容</p>
    

    可以编辑的内容

    此属性可以让摸个元素里面的文本节点或值变为可编辑

    XML Submission编码格式

    我们一般常见的是Web Form的编码格式是application/x-www-form-urlencoded。开发人员都很清楚这种格式,数据送到服务端,可以方便的存取。HTML5提供一种新的数据格式:XML Submission,即application/x-www-form+xml。简单的说就是服务器端将直接接收到XML形式的表单数据。


    HTML5新增表单标签

    datalist标签

    <label for="search">搜索引擎</label>
    <input type="url" name="search" id="search" list="searchlist" autocomplete="on" pattern="https?://.+" />
    <datalist id="searchlist">
      <option value="https://www.baidu.com/">
      <option value="https://www.google.com/">
      <option value="https://www.bing.com/">
    </datalist>
    

      

    datalist标签定义选项列表。与input元素配合使用该元素,来定义 input 可能的值。datalist 及其选项不会被显示出来,它仅仅是合法的输入值列表。 用 input 元素的 list 属性来绑定 datalist。

    output标签

    output 标签定义不同类型的输出,比如脚本的输出。

    <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
    <input type="range" id="a" value="50">100
    +<input type="number" id="b" value="50">
    =<output name="x" for="a b"></output>
    </form>
    
    0 100 + =

    注释:Internet Explorer 不支持 <output> 标签。

    meter标签

    meter 标签定义度量衡。仅用于已知最大和最小值的度量。

    <p>显示度量值:</p>
    <meter value="3" min="0" max="10">3/10</meter><br>
    <meter value="0.6">60%</meter>
    

    显示度量值:

    3/10eter>
    60%eter>

    注释:Internet Explorer 不支持 meter 标签。

    progress标签

    progress标签定义运行中的进度(进程)。可以使用 progress 标签来显示 JavaScript 中耗费时间的函数的进度。

    <progress value="22" max="100">
    </progress>
    
    下载进度:

    注释:Internet Explorer 9 以及更早的版本不支持progress标签。


    四种常见的 POST 提交数据方式(application/x-www-form-urlencoded,multipart/form-data,application/json,text/xml)

    HTTP/1.1 协议规定的 HTTP 请求方法有optionsgetheadpostputeletetraceconnect这几种。其中 POST 一般用来向服务端提交数据,本文主要讨论 POST 提交数据的几种方式。

    我们知道,HTTP 协议是以 ASCII 码传输,建立在 TCP/IP 协议之上的应用层规范。规范把 HTTP 请求分为三个部分:状态行、请求头、消息主体。类似于下面这样:

    	<method> <request-URL> <version>
    	<headers>
    	<entity-body>	
    

    协议规定 POST 提交的数据必须放在消息主体(entity-body)中,但协议并没有规定数据必须使用什么编码方式。实际上,开发者完全可以自己决定消息主体的格式,只要最后发送的 HTTP 请求满足上面的格式就可以。

    但是,数据发送出去,还要服务端解析成功才有意义。一般服务端语言如 php、python 等,以及它们的 framework,都内置了自动解析常见数据格式的功能。服务端通常是根据请求头(headers)中的 Content-Type 字段来获知请求中的消息主体是用何种方式编码,再对主体进行解析。所以说到 POST 提交数据方案,包含了 Content-Type 和消息主体编码方式两部分。下面就正式开始介绍它们。

    application/x-www-form-urlencoded

    这应该是最常见的 POST 提交数据的方式了。浏览器的原生<form>表单,如果不设置enctype属性,那么最终就会以application/x-www-form-urlencoded方式提交数据。请求类似于下面这样(无关的请求头在本文中都省略掉了):

    	POST https://www.lanmper.cn HTTP/1.1
    	Content-Type: application/x-www-form-urlencoded;charset=utf-8
    	title=test&sub%5B%5D=1&sub%5B%5D=2&sub%5B%5D=3
    

    首先,Content-Type 被指定为 application/x-www-form-urlencoded;其次,提交的数据按照 key1=val1&key2=val2 的方式进行编码,key 和 val 都进行了 URL 转码。大部分服务端语言都对这种方式有很好的支持。例如 PHP 中,$_POST['title']可以获取到 title 的值,$_POST['sub'] 可以得到 sub 数组。

    很多时候,我们用 Ajax 提交数据时,也是使用这种方式。例如 JQuery 和 QWrap 的 Ajax,Content-Type 默认值都是application/x-www-form-urlencoded;charset=utf-8

    multipart/form-data

    这又是一个常见的 POST 数据提交的方式。我们使用表单上传文件时,必须让<form>enctype等于这个值。直接来看一个请求示例:

    	POST https://www.lanmper.cn HTTP/1.1
    	Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryrGKCBY7qhFd3TrwA
    	------WebKitFormBoundaryrGKCBY7qhFd3TrwA
    	Content-Disposition: form-data; name="text"
    	title
    	------WebKitFormBoundaryrGKCBY7qhFd3TrwA
    	Content-Disposition: form-data; name="file"; filename="chrome.png"
    	Content-Type: image/png
    	PNG ... content of chrome.png ...
    	------WebKitFormBoundaryrGKCBY7qhFd3TrwA--
    

    这个例子稍微复杂点。首先生成了一个 boundary 用于分割不同的字段,为了避免与正文内容重复,boundary 很长很复杂。然后 Content-Type 里指明了数据是以 mutipart/form-data 来编码,本次请求的 boundary 是什么内容。消息主体里按照字段个数又分为多个结构类似的部分,每部分都是以 –boundary 开始,紧接着内容描述信息,然后是回车,最后是字段具体内容(文本或二进制)。如果传输的是文件,还要包含文件名和文件类型信息。消息主体最后以 –boundary– 标示结束。关于 mutipart/form-data 的详细定义,请前往 rfc1867 查看。

    这种方式一般用来上传文件,各大服务端语言对它也有着良好的支持。

    上面提到的这两种 POST 数据的方式,都是浏览器原生支持的,而且现阶段原生<form>表单也只支持这两种方式。但是随着越来越多的 Web 站点,尤其是 WebApp,全部使用 Ajax 进行数据交互之后,我们完全可以定义新的数据提交方式,给开发带来更多便利。

    application/json

    application/json这个 Content-Type 作为响应头大家肯定不陌生。实际上,现在越来越多的人把它作为请求头,用来告诉服务端消息主体是序列化后的 JSON 字符串。由于 JSON 规范的流行,除了低版本 IE 之外的各大浏览器都原生支持 JSON.stringify,服务端语言也都有处理 JSON 的函数,使用 JSON 不会遇上什么麻烦。

    JSON 格式支持比键值对复杂得多的结构化数据,这一点也很有用。记得我几年前做一个项目时,需要提交的数据层次非常深,我就是把数据 JSON 序列化之后来提交的。不过当时我是把 JSON 字符串作为 val,仍然放在键值对里,以 x-www-form-urlencoded 方式提交。

    Google 的 AngularJS 中的 Ajax 功能,默认就是提交 JSON 字符串。例如下面这段代码:

    	vardata = {'title':'test', 'sub': [1,2,3]};
    	$http.post(url, data).success(function(result) {
    	    ...
    	});
    

    最终发送的请求是:

    	POST https://www.lanmper.cn HTTP/1.1
    	Content-Type: application/json;charset=utf-8
    	{"title":"test","sub":[1,2,3]}
    

    这种方案,可以方便的提交复杂的结构化数据,特别适合 RESTful 的接口。各大抓包工具如 Chrome 自带的开发者工具、Firebug、Fiddler,都会以树形结构展示 JSON 数据,非常友好。但也有些服务端语言还没有支持这种方式,例如 php 就无法通过 $_POST 对象从上面的请求中获得内容。这时候,需要自己动手处理下:在请求头中 Content-Type 为 application/json 时,从 php://input 里获得原始输入流,再 json_decode 成对象。一些 php 框架已经开始这么做了。

    当然 AngularJS 也可以配置为使用 x-www-form-urlencoded 方式提交数据。如有需要,可以参考这篇文章。

    text/xml

    我的博客之前提到过 XML-RPC(XML Remote Procedure Call)。它是一种使用 HTTP 作为传输协议,XML 作为编码方式的远程调用规范。典型的 XML-RPC 请求是这样的:

    	POST https://www.lanmper.cn HTTP/1.1
    	Content-Type: text/xml
    	<?xml version="1.0"?>
    	<methodCall>
    	    <methodName>examples.getStateName</methodName>
    	    <params>
    	        <param>
    	            <value><i4>41</i4></value>
    	        </param>
    	    </params>
    	</methodCall>
    

    XML-RPC 协议简单、功能够用,各种语言的实现都有。它的使用也很广泛,如 WordPress 的 XML-RPC Api,搜索引擎的 ping 服务等等。JavaScript 中,也有现成的库支持以这种方式进行数据交互,能很好的支持已有的 XML-RPC 服务。不过,我个人觉得 XML 结构还是过于臃肿,一般场景用 JSON 会更灵活方便。

    上篇:html5 语义化

    下篇:html5 音频