摘要:當你構建表單時,可以試著聽一下屏幕閱讀器如何讀取它,若聽起來很奇怪,那就有必要改進你的表單結構了。該規則必須在表單頭部以保證在用戶找到必填元素之前,屏幕閱讀器等無障礙設備能將其展示或讀給用戶。
系列文章說明
原文
在建立HTML表單時,最重要的一件事就是如何用正確的方式構建它。而之所以重要,原因有二:一是保證表單能被正確使用、二是這能保證你的表單是無障礙的(可以被能力不同的人使用)。而正因HTML表單的無障礙性很重要,故在本文中我們將了解如何使一個表單無障礙,這并不很難、只是有幾個技巧需要你了解下。
表單的靈活性決定了它們是HTML中最復雜的結構。通過使用專門的表單元素和屬性,我們可以建立任何形式的表單。也確實有過一些更豐富多彩的腳本技術如XForms(現已過時),但很不幸這些表單技術并未被各大瀏覽器廣泛應用。因此,我們往往得依賴Javascript來處理表單;但在本文中,我們只會詳細討論如何使用表單元素,若你想知道如何構建自定義表單組件,可參閱[怎樣創建定制表單組件]()。
整體結構 from元素元素是用來正式定義表單的元素,其屬性決定了表單會有什么行為。當你想要建立一個HTML表單時,就必須以該元素開頭。很多無障礙技術或瀏覽器插件能夠檢測到元素,同時他們也實現了特殊的方式來讓表單更易于使用。
注:嚴禁把一個form元素嵌套在另一個里邊。那樣會導致不可預知的行為,具體取決于用戶使用了何種瀏覽器。
元素支持下列屬性,它們全是可選的:
元素的屬性
屬性名 | 默認值 | 描述 |
---|---|---|
accept-charset | UNKNOWN | 一個空格分隔或逗號分隔的列表(HTML5中,只有空格可作為分隔符。),這個列表包括了服務器支持的字符編碼。瀏覽器以這些編碼被列舉的順序使用它們。默認值是一個保留字符串“UNKNOWN”。這個字符串指的是和包含這個form元素的文檔使用相同的編碼。 |
action | 處理這個表單所提交信息的程序所在的URL。 | |
autocomplete | on | 指示表單組件是否能夠擁有被瀏覽器自動補全的默認值。該屬性共有兩個可選值:on或off。 |
enctype | application/x-www-form-urlencoded | 當 method 屬性值為 post 時, enctype 是提交form給服務器的內容的 MIME 類型 。可能的取值有:application/x-www-form-urlencoded (默認值)、multipart/form-data (用于一個 type 屬性設置為 "file" 的元素)、text/plain (HTML5)。 |
method | get | 瀏覽器使用這種 HTTP 方式來提交 form。可能的值有:post、get。 |
name | 這個form的名字。一個文檔中的多個form當中,name必須唯一而不僅僅是一個空字符串。作為替代,最好使用id。 | |
novalidate | (false) | 這個布爾類型的屬性指示了,當提交時form是否沒有被驗證。 |
target | _self | 用一個關鍵字指示在何處展示提交表單后收到的響應,展示的地方可以是、標簽頁、瀏覽器窗口等;下面是該屬性幾個可能的值:_self (把響應加載到同一瀏覽器環境(、標簽頁、瀏覽器窗口等))、_blank (把響應加載到一個新的瀏覽器環境)、_parent (把響應加載到父級瀏覽器環境,若無父級環境則和_self一致)、_top (把響應加載到最頂層的瀏覽器環境(即已無父環境的瀏覽器環境),若無父級環境則和_self一致) |
要注意的是,可能你會經常在元素外使用表單組件,而這樣做的話這些組件就和任何表單都沒有關系了。雖然這些表單組件確實可以用在表單之外,但如此一來你就得給它們設定好用途了,畢竟它們多帶帶使用時是沒有特殊效果的,你必須用Javascript來自定義。
從技術上講,HTML5已經引進了一個form屬性給各個表單元素,該屬性能讓你明確綁定一個元素和一個表單,即使元素不再的內部。然而很遺憾,該特性的跨瀏覽器實現暫時還沒能讓人覺得它是可靠的。
fieldset和legend元素元素可以很方便地用于創建一組具有相同目的的組件。一個元素可以被一個元素所標記,元素用于明確地描述元素的目的。許多無障礙技術會使用元素作為元素內各組件label的一部分。例如,某些屏幕閱讀器如jaws或NVDA會在讀出各組件的label前先讀出legend里的內容。
舉個小例子:
本例中,屏幕閱讀器會將為第一個組件讀出"Fruit juice size small",為第二個組件讀出"Fruit juice size medium",為第三個組件讀出"Fruit juice size large"。
上面這個例子是最重要的用法之一,當你有一堆單選按鈕時,你得保證它們嵌套于元素中。而一般來說,
由于該元素對無障礙技術的影響,元素已經成為構建無障礙表單的關鍵元素;但這也不是說你可以濫用它。當你構建表單時,可以試著聽一下屏幕閱讀器如何讀取它,若聽起來很奇怪,那就有必要改進你的表單結構了。
元素支持以下的特有屬性:
元素的屬性
屬性名 | 默認值 | 描述 |
---|---|---|
disable | (false) | 若設置了該布爾值,表單中的后代元素(除了其第一個元素的后代)將被禁用和禁止編輯。這些元素將不再接收任何瀏覽器事件,譬如鼠標點擊或和輸入焦點有關的事件。通常瀏覽器會將這些元素顯示為灰色。 |
元素用于給某個表單組件定義一個標簽。若你想構建一個無障礙表單,這個元素可就是最重要的元素了。
元素支持以下的屬性:
元素的屬性
屬性名 | 默認值 | 描述 |
---|---|---|
for | 值取在同一文檔中可標記的組件的ID。 文檔中第一個ID值匹配該屬性值的元素就是被這個label元素標記的元素。 |
元素用for屬性綁定其對應的組件,for屬性可引用關聯組件的id值。此外組件也可以嵌套于其元素,但即使是這樣,設置for屬性仍被認為是最佳做法,因為一些無障礙設備無法理解label和組件間的隱性關系(譯注:其實嵌套就相當于自動設置了for屬性,不存在什么隱性關系,綜合下文來看也這應該屬于“最佳做法”的范疇吧)。
而即使不考慮無障礙技術,若有一個指派給特定組件的label,會讓用戶在點擊label時,就能在所有瀏覽器下激活相應的組件。這就非常有便于使用單選按鈕和復選框啦。
某些無障礙設備在處理指派多個label的單個組件時會出現問題。因此,你得把組件嵌套進相關聯的元素,才能構建一個無障礙的表單(譯注:不是很能理解這句話,上面不是說這種做法一些無障礙設備不能理解嗎?而且解決方法不應該是不準多對一嗎,和嵌套有半毛錢關系?)。
來看下面這個例子:
在這個例子中,第一部分代碼寫的是必填元素的規則。該規則必須在表單頭部以保證在用戶找到必填元素之前,屏幕閱讀器等無障礙設備能將其展示或讀給用戶。這樣用戶才能知道他到底該干嘛。
第一個文本域是必填的,所以在其label元素內指明了該文本域的名字以及該文本域是必填的。如此一來,屏幕閱讀器會把label讀作"Name star"或"Name required"(這取決于屏幕閱讀器的設定,通常與第一段寫的那些規則相一致)。而若你使用了兩個label,那就不能確保用戶會被提示該元素是必填的。
第二個表單元素(譯注:id為birth那個)也采用了同樣的手段,使用上面例子的代碼后,你就能保證用戶在進入該字段時會被告知如何格式化日期數據了。
output元素該元素用于存放計算的輸出結果,它定義了用于獲取運算數據的輸入框和用于展示結果的元素間的聯系。對于一些無障礙技術來講,該元素也可以認為是一個保持活動的區域(也就是說當元素的內容發生變化時,無障礙設備就能感知該變化并能對其做出響應)。
"
元素的屬性
屬性名 | 默認值 | 描述 |
---|---|---|
for | 一個用空格分隔的其他元素的ID列表,指示那些提供輸入值(或其他效應)參與運算的元素 |
除了一些表單的具體結構,我們還應知道表單其實就是HTML代碼。這就意味著你可以用所有的HTML技術來構建一個表單。
就如你已經看到的例子中那樣,通常我們會把一個label及其對應的組件包裹在一個
或 而除了元素,我們通常也會使用HTML的標題和section來構建復雜的表單。 HTML的列表則常用在使用復選框和單選框時。 來看一個簡單的支付表單例子: 看一看執行效果吧(這里加了點CSS) 演示 構建表單時,我們需要一些組件來從用戶那兒收集數據。所以在本文中,我們還將看到如何呈現這些組件;若你想了解這些組件是如何工作的,可參見[原生表單組件]()。 這個元素相當特殊,因為它可以變成不少東西。只要簡單設置下其type屬性,它就能發生大變化。為簡單起見,type的值可歸為四種類型:單行文本框、無文本輸入的控件、日期控件和按鈕。而正因這種多樣性,元素支持眾多屬性,但我們很難知道其中那個是相關的、哪個是必須的,這取決于type屬性的值。 下面的表格就是一個匯總(要獲得完整的屬性列表,請訪問元素的頁面): 如果我們給type屬性設置的值不被瀏覽器支持,那它就會把元素渲染為和使用text值一樣的效果。這樣能確保表單可以使用,即使它看起來不那么吸引人。 雖然元素是個強大的工具,但它也并非萬能,所以還得一些其他元素來處理這些力不能及的情況。 該元素用于聲明多行文本框。其行為與單行文本框基本一致,除了能讓用戶在輸入文本時換行。此外該元素也接受幾個額外的屬性,以控制其在渲染時能占多大地方: 元素的屬性 注意元素的用法與元素稍有不同。元素是個自閉合元素,這意味著它不能包含任何子元素。而另一方面,元素則是個可以直接包含文本內容的普通元素。 這就造成兩個影響: 若你想給元素定義默認值,你得使用valur屬性;而對于元素,你只需把默認文本置于其起始標簽之間即可。 默認地,元素只接受文本內容;也就是說任何輸入到元素內的HTML內容都會以純文本的形式顯示出來。 下面這個例子中,元素會以相同形式渲染出來: 元素能讓你構建選擇框(也叫組合框)。選擇框是一種讓用戶選擇一或多個預定義的值的組件。單值和多值選擇框的不同將在[原生表單組件]()一文中進行討論。 選擇框中的每個值都會用一個元素進行定義,而這些元素也可以置于元素中進行分組。 來看個例子: 若元素設置了value屬性,那么在表單提交時該值就會被提交。若value屬性未設置,則使用元素的內容作為整個選擇框的值。 至于元素,其label屬性將會先于其內容進行展示。而且它雖然看起來像一個選項,但實質上它是不可選的。 元素的屬性 元素的屬性 該元素通過為給定的組件預設值,實現了對已有組件的拓展,最廣為人知的例子就是文本框的自動補全列表了。這些用于填充的值實際上是通過元素里的元素進行設置的。 要把元素和某個組件綁定起來,你得先設置目標組件的list屬性;該屬性需指定為相應的元素的id屬性。 元素是最近才被加入到HTML表單中的,故仍有些瀏覽器不支持它。這里有一個巧妙的兼容技巧,用于應對這些瀏覽器: 支持的瀏覽器將會忽略其中那些非元素,且最終效果和預期的一樣。而支持的瀏覽器將會顯示label和選擇框。當然,也有別的方法來處理缺乏支持的問題,但那得用到javascript,而這通常不是個好的選擇。 這兩個元素常用于圖形化展示給定的數字值,兩者的區別主要是語義上的: progress元素代表一個在最大值和最小值間隨時間變化的值。值得注意的是,改變該元素的值(也就是顯示進度)必須交給Javascript來完成,該元素自身沒有任何機制來做到這一點。 默認的,這倆元素支持下列特有屬性: 譯注:溢出low、high間的范圍時,瀏覽器會以特殊樣式顯示 元素的屬性 元素是最便于創建表單按鈕的方式。一個按鈕可以是三種類型質疑,由以下type屬性值決定: submmit按鈕會把表單數據發送給由元素的action屬性定義的頁面。 reset按鈕會立即把所有表單組件重置為默認值。從用戶體驗的角度看,現在認為使用這種按鈕是一種糟糕的、應該避免的做法,因為它很容易讓用戶不小心就丟掉他們已填寫的內容。 匿名(button)按鈕就沒有固有屬性了,你得使用Javascript來給其實現功能。 元素的屬性 從技術上講,用或元素定義的按鈕間基本是沒有區別的。只在按鈕的標記上有一個值得注意的區別:在元素內標記只能是字符數據;而在元素內,標記的內容可以是HTML,所以此處按鈕的樣式可以被按需定制。 注意:因為一些歷史原因,元素一直不被大量使用,且許多表單開發者更傾向于使用由構建的按鈕。而罪魁禍首就是舊版本IE的一個bug,在IE6和IE7中,若你給元素加了name和value屬性,表單就不會發送該value屬性而是直接發送按鈕的內容。但這個bug已經在IE8之后給修復了,所以現在不再有什么理由來回避使用元素了。 許多用來定義表單組件的元素擁有一些自己的屬性,而這里還有一個所有表單元素的公共屬性匯總,它們能給你跨組件的控制能力。下面就是這些公共屬性的列表: ARIA是一項W3C候選推薦標準,用于添加到HTML以增強富Internet應用的可訪問性。我們將在[怎樣創建定制表單組件]()一文中更具體地討論它的使用,但這里有一些基礎知識需要先知道。 在開始之前,要注意瀏覽器上對ARIA和無障礙技術的支持雖然還遠稱不上完美,但也已在持續改進之中了。出現這種問題就是因為,瀏覽器在遇到ARIA屬性時,必須給操作系統的無障礙訪問層發送消息,而并不是所有瀏覽器都能跨平臺地做好這點。同時無障礙設備自身只能鏈接到操作系統的無障礙訪問層去處理瀏覽器傳來的消息。讓人吃驚的是,有些無障礙設備連這點都做不好。 所以使用無障礙技術并不意味著你的web應用就是無障礙的,而是意味著你已經盡力來做到這點了。暫時來講,ARIA只是盡最大努力的技術,但還是聊勝于無吧。 若你還想深入了解ARIA和HTML表單的結合使用,請自行閱讀ARIA文檔的相關章節。 該屬性便于在不適用元素時定義一個label。可將其放在組件元素上并引用要作為label的元素的id屬性。 從概念上,這個屬性與元素的for屬性正好相反。使用for屬性時引用的是組件的id,而使用aria-labelledby時則引用label的id。 該屬性和aria-labelledby作用類似,主要就是語義上有不同。label用于定義對象的本質內容,而描述則提供更多用戶可能要用到的信息。這個屬性不建議直接用在表單元素上;最好還是使用aria-labelledby屬性,除非你想為當前元素提供額外信息。畢竟該屬性就是用來提供大段描述的。 該屬性用于給定的組件在DOM中沒有明確的label時,它能讓你提供一個能通過無障礙設備使用的組件,而無需專門為其創建一個節點來做到這點。 這是最重要的一個ARIA屬性了,它能讓你為給定的HTML元素提供無障礙設備可理解的、特定的語義信息。現在已經有不少可用的role了,且其中一些是表單專用的。 ARIA致力于給那些在HTML中尚不可用的組件、或已經存在的元素提供語法,我們將會在[怎樣創建定制表單組件]()一文中看到如何使用這些role。 用于表單組件的role有: Button Checkbox Progressbar Radio Slider Spinbutton textbox 值得注意的還有幾個復合的role: Listbox Radiogroup 若你覺得這些role很好用,可在這里了解更多;ARIA是個很龐大的規范,深入探索它能幫你為遠超HTML表單之外的領域增強無障礙性。 現在你已經擁有了所有可用于構建你的HTML表單的知識;下篇文章將會深入其實現細節和功能需求:[原生表單組件]()。 A List Apart: Sensible Forms: A Form Usability Checklist 文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。 轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/54366.html
type屬性的值
描述
必要屬性
可選屬性
單行文本框
text
這是最基本的文本框,該值也是type屬性的默認值,這時不會執行自動校驗
autocomplete, list, maxlength, pattern, placeholder, readonly, required, size, spellcheck
email
用于編輯一或多個電子郵箱地址的文本框
autocomplete, list, maxlength, multiple, pattern, placeholder, readonly, required, size
password
文本框的值會被隱藏起來
autocomplete, list, maxlength, readonly, required, size
search
用于輸入查詢字符串的文本框
autocomplete, autosave, list, maxlength, pattern, placeholder, readonly, required, size, spellcheck
tel
用于編輯電話號碼的文本框
autocomplete, list, maxlength, pattern, placeholder, readonly, required, size
url
用于編輯絕對URL的文本框
autocomplete, list, maxlength, pattern, placeholder, readonly, required, size
無文本輸入的控件
checkbox
復選框
checked, required
color
用于指定顏色的控件
autocomplete, list, required
file
用于讓用戶選擇文件的控件
accept, multiple, required
hidden
不顯示的控件,但它的值會被提交給服務器
number
用于獲得浮點數的控件
autocomplete, list, max, min, readonly, required, step
radio
單選框
checked, required
range
用于獲得非精確值的控件
autocomplete, list, max, min, required, step
時間和日期控件(尚未支持,譯注:最新的瀏覽器已實現了部分控件)
date
用于獲得日期(年月日,沒有鐘點)的控件
autocomplete, list, max, min, readonly, required
datetime
用于獲得日期和時間(時分秒,及二分之一秒)的控件,基于UTC時區
autocomplete, list, max, min, readonly, required
datetime-local
用于獲得日期和時間的控件,不含時區
autocomplete, list, max, min, readonly, required
month
用于獲得年份和月份的控件,不含時區
autocomplete, list, max, min, readonly, required
time
用于獲得時間的控件,不含時區
autocomplete, list, max, min, readonly, required
month
用于獲得年份和周數的控件,不含時區
autocomplete, list, max, min, readonly, required
按鈕
button
無默認行為的按鈕
formaction, formenctype, formmethod, formnovalidate, formtarget
image
圖片按鈕
src, alt
width, height, formaction, formenctype, formmethod, formnovalidate, formtarget
reset
用于將表單內容重置為默認值的按鈕
formaction, formenctype, formmethod, formnovalidate, formtarget
submmit
用于提交表單的按鈕
formaction, formenctype, formmethod, formnovalidate, formtarget
屬性名
默認值
描述
cols
20
文本控件的可視寬度,單位是字符的平均寬度
rows
文本控件的可視文本行數
wrap
soft
表明控件如何包含文本,可取值為hard或soft
屬性名
默認值
描述
label
該屬性是用于描述選項的文本,若label屬性未被定義,那它的值就默認取元素的文本內容
selected
(false)
目前來講,該布爾值表明選項是否在一開始就被選中
datalist元素
屬性名
默認值
描述
label
一組選項的名字。該屬性是強制要有的
屬性名
默認值
描述
min
0
度量范圍的數值下界
max
1
度量范圍的數值上界
low
min值
比度量范圍的下界要高的數值界限
high
max值
比度量范圍的上界要低的數值界限
optimum
最佳數字值
button元素
屬性名
默認值
描述
max
該屬性用于描述對應的任務完成前需要做多少工作量
屬性名
默認值
描述
type
submit
按鈕的類型。可能的值有:button, reset, submit
formaction
如果按鈕是個提交按鈕,該屬性的值會重寫元素的action屬性
formentype
如果按鈕是個提交按鈕,該屬性的值會重寫元素的enctype屬性
formmethod
如果按鈕是個提交按鈕,該屬性的值會重寫元素的method屬性
formnovalidate
如果按鈕是個提交按鈕,該屬性的值會重寫元素的novalidate屬性
formtarget
如果按鈕是個提交按鈕,該屬性的值會重寫元素的target屬性
公共屬性
使用ARIA來構建HTML表單
屬性名
默認值
描述
autofocus
(false)
這個布爾屬性讓你能夠指定在頁面加載時需要自動獲得輸入焦點的元素,除非用戶重寫了它,比如在另一控件上輸入。在一個文檔中,只能有唯一一個表單元素能指定該值。
disabled
(false)
這個布爾屬性表明用戶不能與某個元素交互。如該屬性未指定,則會繼承自容器元素如的設置;若無容器元素設置了disabled屬性,則該元素就是可用的
form
和組件關聯的form元素。這個屬性的值必須是同一文檔下某元素的id值。理論上,這能讓你在元素外設置表單組件。但在實際應用中,并沒有瀏覽器支持該特性。
name
元素的名字,該屬性會隨表單數據提交
value
指定元素初始值
摘要:一個表單由一或多個部件組成,這些部件可以是文本框單行或多行選擇框按鈕復選框或單選按鈕。在我們的示例里,一個文本框中用了該屬性的默認值,該值表示一個基本的單行文本框,用于接收無控制或驗證的任何文本。 前言 這個系列譯自mdn上的一份表單指南,原文詳盡闡述了表單相關的基礎知識。而表單作為一個經典的頁面交互方式,是每個前端工程師繞不開的話題,通過翻譯這個系列的文章既是有助于掃清自己的知識盲區...
摘要:并非所有組件受的影響都是平等的如今在表單使用時依然有一些困難這些問題可歸為三類還好的若存在跨平臺問題,一些元素可以只添加少許的樣式,有如下幾個結構元素此外,還有所有的文本框組件單行或多行,以及按鈕。 系列文章說明 原文 本文中,我們將學習如何使用CSS來讓HTML表單看起來更漂亮,這可能需要竅門才能做到。由于歷史及技術上的原因,表單組件并不太適合使用CSS;而也正因為有這些困難,許...
摘要:并非所有組件受的影響都是平等的如今在表單使用時依然有一些困難這些問題可歸為三類還好的若存在跨平臺問題,一些元素可以只添加少許的樣式,有如下幾個結構元素此外,還有所有的文本框組件單行或多行,以及按鈕。 系列文章說明 原文 本文中,我們將學習如何使用CSS來讓HTML表單看起來更漂亮,這可能需要竅門才能做到。由于歷史及技術上的原因,表單組件并不太適合使用CSS;而也正因為有這些困難,許...
摘要:提到老舊瀏覽器,我們腦海中往往復現的就是舊版的。但幸運的是,有一些技巧可以協助解決由老舊瀏覽器引起的的問題。放棄表單和老舊瀏覽器的最大問題是對的支持。結論如你所見,處理老舊瀏覽器所涉及的內容不止有表單。 系列文章說明 原文 所有的web開發者都會很快(或者很痛苦地)意識到Web是一個粗糙的環境,其中最糟糕的一點就是老舊的瀏覽器。提到老舊瀏覽器,我們腦海中往往復現的就是舊版的IE。但...
摘要:提到老舊瀏覽器,我們腦海中往往復現的就是舊版的。但幸運的是,有一些技巧可以協助解決由老舊瀏覽器引起的的問題。放棄表單和老舊瀏覽器的最大問題是對的支持。結論如你所見,處理老舊瀏覽器所涉及的內容不止有表單。 系列文章說明 原文 所有的web開發者都會很快(或者很痛苦地)意識到Web是一個粗糙的環境,其中最糟糕的一點就是老舊的瀏覽器。提到老舊瀏覽器,我們腦海中往往復現的就是舊版的IE。但...
閱讀 3061·2021-10-27 14:16
閱讀 2878·2021-09-24 10:33
閱讀 2284·2021-09-23 11:21
閱讀 3228·2021-09-22 15:14
閱讀 811·2019-08-30 15:55
閱讀 1675·2019-08-30 15:53
閱讀 1741·2019-08-29 11:14
閱讀 2190·2019-08-28 18:11