亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

目錄
如何配對標籤和輸入
並非所有輸入都需要標籤
標籤中有什麼
健康關係的最佳實踐
做:在正確的位置添加標籤
做:使用屏幕讀取器檢查輸入
做:使標籤可見
要避免什麼
不要:期望您的輸入在每個瀏覽器中相同
不要:用佔位符代替標籤
不要:用另一個屬性或元素代替標籤
不要:將互動元素放入標籤中
現(xiàn)實生活中的例子
組件庫:材料
網(wǎng)站:HuffPost
閉幕詞
謝謝
腳註
首頁 web前端 css教學 HTML輸入和標籤:愛情故事

HTML輸入和標籤:愛情故事

Mar 25, 2025 am 10:45 AM

HTML輸入和標籤:愛情故事

大多數(shù)輸入都有一些共同點 - 他們最快樂的是帶有同伴標籤!幸福並不止於此。具有適當輸入和標籤的表格對於人們來說更容易使用,這也使人們感到高興。

在這篇文章中,我想專注於缺乏語義標籤和輸入組合的情況,使各種各樣的人更難完成表格。由於數(shù)百萬人的生計依賴??於形式,讓我進入我所知道的最好的技巧,以在輸入和標籤之間建立充實而和諧的關係。

內(nèi)容警告:在這篇文章中,是愛與人際關係的主題。

愛情故事從這裡開始!讓我們介紹創(chuàng)建快樂標籤和輸入的基礎知識。

如何配對標籤和輸入

兩種方法可以配對標籤和輸入。一個是將輸入包裹在標籤中(隱式),另一個是將for屬性添加到標籤中,並在輸入中添加ID(explicit)。

將隱性標籤視為擁抱輸入,而明確的標籤則是站在輸入旁邊並握住手的標籤。

 <label> 
  姓名:
  
</label>

屬性值的明確標籤必須與其輸入的ID值匹配。例如,如果為具有名稱的值,則ID也應具有名稱值。

 名稱:

不幸的是,即使使用和使用ID屬性,所有輔助技術也無法正確處理隱式標籤。因此,使用顯式標籤而不是隱式標籤始終是最好的主意。

 
<label> 
  姓名:
  
</label>

連接到輸入
名稱:

每個單獨的輸入元素僅應與一個標籤配對。並且標籤僅應與一個輸入配對。是的,輸入和標籤是一夫一妻制的。 ?謝

注意:此規(guī)則有一種例外:當我們使用一輸入時,例如幾個無線電按鈕或複選框。在這些情況下,A 元素用於分組某些輸入元素,例如無線電按鈕,並用作整個組的可訪問標籤。

並非所有輸入都需要標籤

帶有類型=“ crist”或type =“ button”的輸入不需要標籤 - 值屬性代替了可訪問的標籤文本。帶有類型=“隱藏”的輸入也可以沒有標籤。但是,所有其他輸入,包括

標籤中有什麼

標籤內(nèi)部的內(nèi)容應:

  • 描述其伴侶輸入。標籤想向所有人展示其與輸入合作夥伴屬於的。
  • 可見。可以單擊或敲擊標籤以集中其輸入。與輸入相互作用的額外空間是有益的,因為它增加了點擊或單擊目標。我們將稍微介紹一下。
  • 僅包含純文本。不要添加標題或鏈接等元素。同樣,我們將進一步介紹“為什麼”。

您可以使用標籤中的內(nèi)容來做的一件有用的事情是添加格式提示。例如,的標籤將為,如我們所期望的。但是,我們可以為用戶提供一個提示,即需要以特定格式輸入日期,例如DD-MM-yyyy,以標籤和指定要求的輸入之間的A 的形式。該提示不僅指定日期格式,而且具有與輸入上的ARIA描述相對應的ID值。

 
開始日期

<span>(dd-mm-yyyy):</span>
<input type="“" date aria-descripedby="“" date-format min="“" max="“">

這樣,我們獲得了一個清晰標籤的好處,該標籤描述了輸入的目的,並且向用戶提示的獎勵提示需要以特定的格式輸入輸入。

健康關係的最佳實踐

以下技巧超出了基礎知識,以解釋如何確保標籤和輸入盡可能快樂。

做:在正確的位置添加標籤

有一個WCAG成功標準,指出頁面的視覺順序應遵循DOM中元素出現(xiàn)的順序。那是因為:

當閱讀順序似乎在屏幕上跳過時,使用屏幕放大器與屏幕讀取器結合使用的較低視力的用戶可能會感到困惑。當源順序與視覺順序不符時,鍵盤用戶可能難以預測焦點下一步。

考慮一下。如果我們有一些標準的HTML,則標籤在輸入之前出現(xiàn):

 橙色

那將標籤放在DOM中的輸入之前。但是現(xiàn)在,假設我們的標籤和形式位於一個靈活的容器中,我們使用CSS命令將輸入??在標籤之前的內(nèi)容逆轉:

標籤{order:2; }
輸入{順序:1; }

在元素之間導航的屏幕讀取器用戶可能會期望輸入在標籤之前獲得焦點,因為輸入是在視覺上首次出現(xiàn)的。但是真正發(fā)生的是標籤焦點。有關使用屏幕讀取器和鍵盤導航之間的區(qū)別,請參見此處。

因此,我們應該注意這一點。通常,將標籤放在復選框和無線電按鈕的輸入的右側。這可以通過將標籤放在HTML中的輸入之後,確保DOM和視覺順序匹配。

 
  
  <span>
    
    橙色
  </span>
  
  <span>
    
    香蕉
  </span>
  
  <span>
    您喜歡它們的蘋果嗎? 
    
  </span>

做:使用屏幕讀取器檢查輸入

無論是從頭開始寫入還是用庫生成的輸入,最好使用屏幕讀取器檢查工作。這是為了確保:

  • 所有相關屬性都存在 - 尤其是for和id屬性的匹配值。
  • DOM與視覺順序匹配。
  • 標籤文字聽起來很清楚。例如,“ dd-mm-yyyy”的讀數(shù)與其大寫等效物(DD-MM-yyyy)不同。

在過去的幾年中,我使用JavaScript庫(例如Disshift)來構建複雜的形式元素,例如在本機HTML的元素(例如輸入或選擇)上構建自動完整或組合元素。大多數(shù)庫使這些複雜元素通過使用JavaScript添加ARIA屬性來訪問。

但是,如果JavaScript破裂或禁用,使用JavaScript增強的本機HTML元素的好處將完全丟失,從而使其無法訪問。因此,請檢查一下,並提供服務器渲染的無javaScript替代方案作為安全的後備。

查看這些基本表單測試,以確定如何由不同的屏幕讀取器編寫和宣布其輸入標籤或傳說。

做:使標籤可見

連接標籤和輸入很重要,但同樣重要的是保持標籤可見。單擊或敲擊可見標籤會將其輸入合作夥伴聚焦。這是一種本地的HTML行為,使大量人受益。

想像一個想自豪地與意見相關聯(lián)的標籤:

也就是說,有時候設計需要隱藏的標籤。因此,如果必須隱藏標籤,則以可訪問的方式進行操作至關重要。一個常見的錯誤是使用顯示:無或可見性:隱藏以隱藏標籤。這些CSS顯示屬性完全隱藏了一個元素 - 不僅在視覺上,而且從屏幕讀取器中。

考慮使用以下代碼視覺隱藏標籤:

 /*用於非本地元素。對於本質上可集中的元素 */
/ *使用。視覺隱藏:不(:focus):not(:active) */
。
  邊緣寬度:0!重要;
  剪輯:rect(1px,1px,1px,1px)!
  身高:1px!重要;
  溢出:隱藏!重要;
  填充:0!重要;
  位置:絕對!重要;
  白空間:Nowrap!重要;
  寬度:1px!重要;
}

Kitty Giraudel在深入解釋瞭如何負責任地隱藏內(nèi)容。

要避免什麼

為了保持和維持投入和標籤之間的健康關係,配對時有些事情不做。讓我們了解這些是什麼以及如何預防它們。

不要:期望您的輸入在每個瀏覽器中相同

在某些較舊的桌面瀏覽器中,某些類型的輸入不支持。例如,Internet Explorer(IE)11甚至Safari 14 1 (2020年9月發(fā)布)中不支持類型=“日期”的輸入。這樣的輸入落後於type =“ text”。如果日期輸入沒有明確的標籤,並且它會自動落到較舊瀏覽器中的文本輸入中,那麼人們可能會感到困惑。

不要:用佔位符代替標籤

這就是為什麼不應使用標籤上使用佔位符屬性的原因:

  • 並非所有屏幕讀者都宣布佔位符。
  • 佔位符的價值有可能在較小的設備上切斷,或者在瀏覽器中翻譯頁面時。相比之下,標籤的文本內(nèi)容可以輕鬆地包裹在新系列上。
  • 僅僅因為開發(fā)人員可以在小視網(wǎng)膜屏幕上看到淡灰色的佔位符文字,在光線充足的房間中,在無注意的環(huán)境中,並不意味著其他所有人都可以。一個佔位符也可以使那些視力良好的人抬起眼睛,並最終放棄形式。

  • 一旦將字符輸入輸入,其占位符將變得不可見 - 無論是視覺上還是篩選讀者。如果某人必須迴路以審查他們以表格輸入的信息,則必須刪除輸入的內(nèi)容,以再次查看佔位符。
  • IE 9及以下不支持佔位符的屬性,並且在IE 11中集中輸入時消失。要注意的另一件事:佔位符顏色無法使用IE 11中的CSS自定義。

佔位符就像當一切都完美時出現(xiàn)的朋友一樣,但是當您最需要時會消失。將輸入與漂亮的高對比度標籤配對。標籤不是片狀,並且忠於100%的時間。

尼爾森·諾曼集團(Nielsen Norman Group)有一篇深入的文章,解釋了為什麼形式領域中的佔位符為何有害。

不要:用另一個屬性或元素代替標籤

當不存在標籤時,一些屏幕閱讀器會尋找相鄰的文本並宣布這一點。這是一種打擊的方法,因為屏幕閱讀器可能找不到任何文字要宣布。

以下代碼示例來自真實的網(wǎng)站。該標籤已被非語義連接到輸入的元素取代。

 <div>
  <span>卡號??</span>
  <div>
    <input type="“" text value="“”" name="“" cardnumber maxlength="“">
  </div>
</div>

上面的代碼應重新編寫,以確??稍L問性通過用=“ cardNumber”的標籤替換跨度來確??稍L問性。這是迄今為止最簡單,最強大的解決方案,使大多數(shù)人受益。

儘管標籤可以用具有與輸入的aria-labelled屬性相匹配的ID的跨度替換,但人們將無法單擊跨度以按照標籤允許的方式來聚焦輸入。最好利用本地HTML元素的力量而不是重新發(fā)明它們。本地輸入和標籤元素之間的愛情故事無需重寫!真是太好了。

不要:將互動元素放入標籤中

標籤中只能包含純文本。避免插入諸如標題或互動元素之類的內(nèi)容,例如鍊接。並非所有的屏幕讀取器都會正確宣布標籤,如果包含純文本以外的其他標籤。另外,如果有人想通過單擊其標籤來集中輸入,但是該標籤包含鏈接,則他們可能會錯誤地單擊鏈接。

 
  <div>
    
    
    我接受<a href="%E2%80%9C" https:>條款和條件</a> 
  </div>
  <div>
    
    
    我接受條款和條件。 
    <span>閱讀<a href="%E2%80%9C" https:>條款和條件</a> </span>
  </div>

現(xiàn)實生活中的例子

我總是發(fā)現(xiàn)現(xiàn)實生活中的例子可以幫助我正確理解一些東西。我搜索了網(wǎng)絡,並從流行的組件庫和網(wǎng)站找到了標籤和輸入的示例。在下面,我解釋了元素不足的位置以及如何改進它們以確保配對更好。

組件庫:材料

物料圖是基於Google設計系統(tǒng)的React組件庫。它包括帶有浮動標籤模式的文本輸入組件,該模式已成為許多設計師和開發(fā)人員的流行:

單擊輸入感覺很光滑,看起來很棒。但這就是問題。它的素質大多是皮膚深處。

在撰寫本文時,我發(fā)現(xiàn)的一些問題包括:

  • 為了提供更多的交互式區(qū)域,可以將標籤放在輸入之外。
  • 可以選擇添加一個提示,就像我們之前看到的那樣。不幸的是,提示僅通過接近度與輸入相關聯(lián),而不是通過匹配的ID和ARIA描述的。這意味著並非所有屏幕讀取器都可以將助手消息與輸入相關聯(lián)。
  • 標籤位於DOM的輸入後面,使視覺順序不正確。
  • 至少只要不活躍,空的輸入看起來似乎已經(jīng)填充了,至少它已經(jīng)填寫。
  • 單擊輸入時,標籤向上滑動,這使得它不適合那些喜歡減少運動的人。

亞當·西爾弗(Adam Silver)還解釋了為什麼浮子標籤有問題,並詳細批評了材料的文本輸入設計。

網(wǎng)站:HuffPost

HuffPost網(wǎng)站上有包含新聞通訊表格的文章:

在撰寫此博客文章時,HuffPost使用的電子郵件輸入可以從許多改進中受益:

  • 缺乏標籤意味著較小的點擊或點擊目標。代替標籤,輸入上有一個ARIA-LABEL屬性。
  • 佔位符和輸入值的字體大小是一個小的11px,很難讀取。
  • 沒有JavaScript的整個輸入消失,這意味著如果JavaScript被禁用或損壞,人們就無法註冊新聞通訊。

閉幕詞

令人驚訝的人數(shù)很難將信息輸入構建不良的投入。該清單包括具有認知,運動和身體殘疾的人,自閉癥譜系障礙,腦損傷和視力差。其他掙扎的人包括急著,連接差,在小型設備,舊設備上,不熟悉數(shù)字形式的人。

此外,有很多原因是JavaScript可能會在瀏覽器中斷開或關閉,這意味著輸入變得功能失調或完全無法訪問。也有一些人完全有能力查看網(wǎng)頁,但可以選擇與屏幕閱讀器一起使用鍵盤。

我想傳達的消息是,快樂的標籤和輸入對至關重要。如果您的表格不可用,那麼您的表格是否不可用。我敢打賭,幾乎每個人都寧願填寫一種醜陋但易於使用的形式,而不是引起問題的漂亮表格。

謝謝

我要熱烈地感謝以下人員為我提供這篇文章的幫助:Eric Eggert,Adam Silver,Dion Dajka和Kitty Giraudel。他們合併的可訪問性知識是不可忽視的力量!

腳註

  • 1 datepicker實際上在iOS 14中得到了很好的支持,而且非常好。可以想像MacOS版本必須在地平線上。 ?

以上是HTML輸入和標籤:愛情故事的詳細內(nèi)容。更多資訊請關注PHP中文網(wǎng)其他相關文章!

本網(wǎng)站聲明
本文內(nèi)容由網(wǎng)友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發(fā)現(xiàn)涉嫌抄襲或侵權的內(nèi)容,請聯(lián)絡admin@php.cn

熱AI工具

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創(chuàng)建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發(fā)環(huán)境

Dreamweaver CS6

Dreamweaver CS6

視覺化網(wǎng)頁開發(fā)工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

CSS教程,用於創(chuàng)建加載旋轉器和動畫 CSS教程,用於創(chuàng)建加載旋轉器和動畫 Jul 07, 2025 am 12:07 AM

創(chuàng)建CSS加載旋轉器的方法有三種:1.使用邊框的基本旋轉器,通過HTML和CSS實現(xiàn)簡單動畫;2.使用多個點的自定義旋轉器,通過不同延遲時間實現(xiàn)跳動效果;3.在按鈕中添加旋轉器,通過JavaScript切換類來顯示加載狀態(tài)。每種方法都強調了設計細節(jié)如顏色、大小、可訪問性和性能優(yōu)化的重要性,以提升用戶體驗。

解決CSS瀏覽器兼容性問題和前綴 解決CSS瀏覽器兼容性問題和前綴 Jul 07, 2025 am 01:44 AM

處理CSS瀏覽器兼容性和前綴問題需理解瀏覽器支持差異並合理使用廠商前綴。 1.了解常見問題如Flexbox、Grid支持不一,position:sticky失效,動畫表現(xiàn)不同;2.查閱CanIuse確認特性支持情況;3.正確使用-webkit-、-moz-、-ms-、-o-等廠商前綴;4.推薦使用Autoprefixer自動添加前綴;5.安裝PostCSS並配置browserslist指定目標瀏覽器;6.構建時自動處理兼容性;7.老項目可用Modernizr檢測特性;8.不必追求所有瀏覽器一致,確

造型與CSS不同訪問的鏈接 造型與CSS不同訪問的鏈接 Jul 11, 2025 am 03:26 AM

設置訪問過鏈接的樣式能提升用戶體驗,尤其在內(nèi)容密集型網(wǎng)站中幫助用戶更好導航。 1.使用CSS的:visited偽類可定義已訪問鏈接樣式,如顏色變化;2.注意瀏覽器出於隱私限制僅允許修改部分屬性;3.顏色選擇應與整體風格協(xié)調,避免突兀;4.移動端可能不顯示該效果,建議結合其他視覺提示如icon輔助標識。

使用CSS剪輯路徑創(chuàng)建自定義形狀 使用CSS剪輯路徑創(chuàng)建自定義形狀 Jul 09, 2025 am 01:29 AM

使用CSS的clip-path屬性可以裁剪元素為自定義形狀,如三角形、圓形缺口、多邊形等,無需依賴圖片或SVG。其優(yōu)勢包括:1.支持circle、ellipse、polygon等多種基本形狀;2.可響應式調整,適配移動端;3.易於動畫化,可結合hover或JavaScript實現(xiàn)動態(tài)效果;4.不影響佈局流,僅裁剪顯示區(qū)域。常見用法如圓形裁剪clip-path:circle(50pxatcenter)和三角形裁剪clip-path:polygon(50%0%,1000%,00%)。注意

顯示:內(nèi)聯(lián),顯示:塊和顯示:內(nèi)聯(lián)塊之間有什麼區(qū)別? 顯示:內(nèi)聯(lián),顯示:塊和顯示:內(nèi)聯(lián)塊之間有什麼區(qū)別? Jul 11, 2025 am 03:25 AM

Themaindifferencesbetweendisplay:inline,block,andinline-blockinHTML/CSSarelayoutbehavior,spaceusage,andstylingcontrol.1.Inlineelementsflowwithtext,don’tstartonnewlines,ignorewidth/height,andonlyapplyhorizo????ntalpadding/margins—idealforinlinetextstyling

CSS繪畫API是什麼? CSS繪畫API是什麼? Jul 04, 2025 am 02:16 AM

thecsspaintingapienablesdemimageGenerationinCsssingJavascript.1.developersCreateApaintWorkletClassWithaPaint()method.2.theyregisteritviaregisterpaint()。 3.thecustompAntFunctionSthenusitySthenusedisthenusedisthenusedIncerspropertieslikeBacknockforg-image-image.thisallows.thisallowsforderforderynamecvis

如何使用CSS創(chuàng)建響應式圖像? 如何使用CSS創(chuàng)建響應式圖像? Jul 15, 2025 am 01:10 AM

要使用CSS創(chuàng)建響應式圖片,主要可通過以下方法實現(xiàn):1.使用max-width:100%和height:auto讓圖片在保持比例的同時自適應容器寬度;2.結合HTML的srcset和sizes屬性智能加載適配不同屏幕的圖片源;3.利用object-fit和object-position控製圖片裁剪與焦點展示。這些方法共同確保圖片在不同設備上清晰、美觀地呈現(xiàn)。

什麼是CSS,它代表什麼? 什麼是CSS,它代表什麼? Jul 03, 2025 am 01:48 AM

CSS,orcascadingstylesheets,isthepartofwevelvermentThatControlsawebpage’svisualAppearance,包括colors,fonts,fonts,spacing,and spacing and layout

See all articles