Web技巧(07)

時間 2019-12-09

標籤 web 技巧欄目 HTML 简体版

原文原文鏈接

在這一期中我們一塊兒來聊聊HTML5中的表單。說到HTML，可能不少同窗會說，HTML5有什麼好聊的，不就是一些HTML的標籤嗎？事實上並不是如此，就拿HTML中的表單中的input元素爲例吧，input元素及其相關屬性和類型的支持狀況都會由於瀏覽器的不一樣而存在較大的差別。甚至在支持特定功能的各個瀏覽器之間，它們的行爲也會有所不一樣。那這一期中，就來圍繞着input說點事。javascript

input的現狀

有關於HTML5（或者說HTML）中關於input相關的規範在HTML規範的第4.10.5一節中有詳細的描述。主要包括了五個部分：css

`input`的`type`屬性

input的type屬性決定了使用input元素的哪一種類型，常見的type屬性主要有：hidden、text、password、checkbox、radio、file、submit、reset、image和button（HTML4中提到的type屬性）。在HTML5中除了具備前面提到的這些type類型以外還增長了**13**種新的type類型：html

`type`類型	用途	備註
`tel`	用於輸入電話號碼	`tel`不執行特定語法，若是想確保特定格式，可使用`pattern`或`setCustomValidity()`執行額外的驗證
`search`	用於提示用戶輸入要搜索的關鍵詞	`search`和`text`主要區別在於樣式上。使用`search`輸入類型可能會致使輸入字段的樣式與平臺的搜索字段相一致
`url`	用於輸入單個網址	`url`用於輸入單個表示很大範圍值的絕對網址
`email`	用於輸入單個電子郵件地址或電子郵件址列表	若是指定了`multiple`屬性就能夠輸入多個電子郵件地址，而且以逗號分隔
`datetime`	用於輸入時區設置爲`UTC`的日期和時間
`date`	用於輸入不含時區的日期
`month`	用於輸入含年份和月份但不含時區的日期
`week`	用於輸入含牛份和週數但不含時區的日期
`time`	用於輸入含時、分、秒和秒的小數部分，但不含時區的時間值
`datetime-local`	用於輸入不含時區的日期和時間
`number`	用於輸入數字	有效值爲浮點數
`range`	用於輸入數字	和`number`的區別在於無需輸入具體數字。在大部分支持該類型的瀏覽器中，範圍控件的實施形式爲滑塊
`color`	用一塊兒經過顏色池控制選擇顏色	值必須爲有效的小寫簡單顏色，好比`#fffff`

`input`的屬性（`attributes`）

這裏所說的input屬性是指**attributes**，它有一些通用屬性：maxlenggth、minlength、size、readonly、required、multiple、pattern、min、max、step、list和placeholder。一樣的，在HTML5中引入了一些新的屬性：前端

屬性	用途	備註
`autofocus`	用於在網頁加載後對焦到相關元素上的輸入	`autofocus`的目標能夠是`input`、也能夠是`select`、`textarea`或`button`
`placeholder`	用於提示用戶應輸入的數據類型	在對焦到相關元素以及用戶輸入數據以前，系統會以淺色文字顯示佔位符值。能夠在樣式從新定義其顏色
`form`	用於指定輸入元素所屬的一個或多個表單	藉助`form`屬性，能夠將輸入元素放在頁面的任何位置處，而不僅是放在`<form>`元素中。同時，單個輸入元素可馬多個表單關聯
`required`	用於表示必填元素的布爾值屬性	`required`屬性有助於在不使用自定義JavaScript的狀況下執行基於瀏覽器的驗證
`autocomplete`	用於指定瀏覽器不該該根據用戶的歷史記錄自動填充或預先填充某個字段	`autocomplete`屬性可用於信用卡號或一次性密碼等不想自動填充的字段。`autocomplete`的默認值是`on`狀態（開啓狀態），若是你想停用該屬性，須要手動將其設置爲`off`（關閉狀態）
`pattern`	用於根據正則表達式驗證元素的值	在使用`pattern`時，你也應該指定`title`值，以便向用戶提供預期模式的說明
`dirname`	用於隨表單提交控件的方向	若是用戶從右到械的方向輸入文本數據，且`input`元素包含`dirname`屬性，那麼系統就會將指明從右到左方向的內容隨輸入值一塊兒提交
`novalidate`	在表單元素上指定該屬性便可停用表單驗證
`formaction`	用於覆蓋表單元素上的`action`屬性
`formenctype`	用於覆蓋表單元素上的`enctype`屬性
`formmethod`	用於覆蓋表單元素上的`method`屬性
`formnovalidate`	用於覆蓋表單元素上的`novalidate`屬性
`formtarget`	用於覆蓋表單元素上的`target`屬性

其中formaction、formenctype、formmethod、formnovalidate和formtarget幾個屬性僅input和button元素支持。html5

其實，input的屬性主要分爲四大類：java

內容屬性（Content Attributes）：accept, alt, autocomplete, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max, maxlength, min, minlength, multiple, pattern, placeholder, readonly, required, size, src, step 和 width
IDL屬性（IDL Attributes）：checked, files, value、valueAsDate, valueAsNumber, list , selectionStart，selectionEnd，selectionDirection
方法（Methods）：select()，setRanggeText()，setSelectionRange()，stepDown()和stepUP()
事件：input和change

不過上面三大類提到的屬性還不是規範中內容，但下面表格中所描述的內容總結了內容屬性、IDL屬性、方法和事件適用於input元素中的哪一種type。css3

有關於這部分更詳細的描述能夠點擊這裏進行了解。web

`input`給用戶體驗帶來的變化

或許不少同窗在使用<input>表單元素時，不論是什麼都只會使用text類型（除了複選框checkbox、單選按鈕radio和button按鈕）。這也多是在PC時代遺留下來的所謂「習慣」吧，而事實上，進入移動端時代以後，若是僅使用text這種type已經沒法知足用戶所需。因此在HTML5中追加了一些不一樣的type類型，而之些type類型在移動端上使用表單<input>來輸入內容時會帶來更好的體驗。好比：正則表達式

正如上圖所示，<input>元素設置不一樣的type屬性的值在移動端中得到焦點時會調出不一樣的鍵盤。這些不一樣的鍵盤會讓用戶會有一個更好的體驗，能夠更快速的輸入所需內容。除type的不一樣值能給用戶操做表單有更好的體驗以外，<input>還有一些**屬性（Attributes）**也能讓用戶在操做表單時有一個更好的體驗，好比readonly、required、minlength、maxlength、pattern、title、step、min、max和novalidate等屬性。api

上面說的是type和attributes相關值給用戶在使用表單（特別是<input>）時有一個較好的體驗，這兩部分都是HTML中的部分，而在CSS中也有一些僞元素選擇器能讓表單更具較好的體驗，好比:placeholder-shown、:required、:optional、:disabled、:read-only、:valid、:invalid、:in-range、:out-of-range和:checked等僞類選擇器。下面這個就是一個很好的示例：

在使用表單時，不知道你們是否有留意過，<input>元素在不一樣內核的瀏覽器下具備獨特的僞元素，而這些僞元素也能夠幫你去優化表單元素的UI風格，讓用戶具備一個更好的UI。好比，

type="checkbox"和type="radio"在Trident內核中可使用::-ms-check
type="color"在Webkit內核中可使用::-webkit-color-swatch-wrapper 和 ::-webkit-color-swatch
type="date"在Webkit內核中可使用::-webkit-datetime-edit、::-webkit-datetime-edit-fields-wrapper、::-webkit-datetime-edit-text、::-webkit-datetime-edit-month-field、::-webkit-datetime-edit-day-field、::-webkit-datetime-edit-year-field、::-webkit-inner-spin-button和::-webkit-calendar-picker-indicator
type="file"在Trident內核中使用::-ms-browse，Webkit內核中使用::-webkit-file-upload-button
type="number"在Webkit中可使用::-webkit-textfield-decoration-container, ::-webkit-inner-spin-button 和 ::-webkit-outer-spin-button
type="password"在Trident內核中使用::-ms-reveal

有關於不一樣內核下不一樣類型的input對應的僞元素能夠查閱《僞元素控制表單樣式》一文。

在使用表單時，都須要對錶單進行驗證，而上面提到的相關屬性除了能讓咱們提升用戶操做表單的體驗以外也能夠對錶單作一些驗證的操做。有關於表單驗證的操做，更多的內容能夠閱讀下面這些文章：

另外，有關於HTML5表單用戶體驗相關的更詳細的介紹能夠閱讀：

上面僅僅是表單體驗中的一小部分而以，若是您對用戶體驗優化方面的內容感興趣的話，不仿花點時間閱讀uxmovement.com網站中有關於表單方面的內容。

`input`的`inputmode`屬性

<input>的type類型可讓用戶在移動端中得到焦點時顯示相應的鍵盤類型。自2019年03月起，<input>和<textarea>元素新增了inputmode屬性，該屬性的值有點相似於<input>元素的type屬性的值，讓用戶在移動端中能夠獲取到不一樣的鍵盤類型。

自iOS12.2版本以及Android系統的Chrome（包括Chrome、三星系統和Opear）以及全部iOS瀏覽器都支持該功能。

inputmode和<input>的type仍是有所不一樣，inputmode不會更改瀏覽器的輸入方式——它指示瀏覽器顯示哪一個鍵盤。

最先是在WHATWG Living標準中提出inputmode，但在W3C 5.2版本規範中又將其移出。既然WHATWG已經對其進行了文檔化（也就是看成HTML標準規範的一部分），並且主流瀏覽器都支持它，那咱們就能夠假設WHATWG規範就是標準。

inputmode能接受的值有：none、numeric、tel、decimal、email、url 和 search幾個值。文章開頭提到過，不少前端同窗使用input的時候，都習慣性的喜歡使用type="text"，那麼有了inputmode屬性時，能夠將使用該屬性來實現相似於type的相關值。也就是說，在使用inputmode時，type的值都將是text，對於<textarea>能夠直接設置inputmode。不過有一點須要特別提出：

當inputmode取值爲none時，在Android系統的瀏覽器中不會顯示鍵盤；而在iOS 12.2系統中將顯示其默認的字母數字鍵盤。所以在iOS系統中能夠將inputmode的值設置爲none來重置iOS系統下鍵盤。

在實際使用時，inputmode取不一樣值時，Android和iOS系統下看到的效果大體以下：

來個簡單的例子：

若是你想了解inputmode更詳細的內容能夠閱讀 @Christian Oliff的《Everything You Ever Wanted to Know About inputmode》一文。

HTML中其餘有意思的元素

在Web中經常會須要處理Progress Bar（常稱進度條）的需求，好比：

經常咱們都是使用div結合CSS和JavaScript來實現。實現進度條的方法有不少種，好比@FreeFrontend 這裏蒐集了不少種進度條的效果。除了這些，Codepen上也有不少關於進度條實現的方法和效果：

時至今日，HTML5中的部分元素也能實現相似進度條的效果，好比meter、progress。使用這兩個元素，咱們能夠很輕易的在Web中實現相似下圖這樣的效果：

`progress`實現進度條的效果

<progress>元素的使用很是的簡單：

<progress value="80" max="100" />
複製代碼

在Webkit或Blink內核的瀏覽器中能夠藉助僞元素-webkit-progress-bar和-webkit-progress-value來美化進度條的樣式：

progress {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    height: 40px;
    width: 300px;
    margin: 50px;
}
progress::-webkit-progress-bar {
    background: #ccc;
    box-shadow: inset 0px 0px 10px 5px #aaa;
    border-radius: 20px;
}
progress::-webkit-progress-value {
    background-image: repeating-linear-gradient(45deg, #FF94AA, #FF94AA 8px, #FF7799 8px, #FF7799 16px);
    border-radius: 20px;
}
複製代碼

有關於<progress>更進一步的介紹，能夠閱讀下面幾篇文章：

`meter`實現進度條的效果

使用<meter>獲得的效果和<progress>有點相似，均可以實現相似進度條的效果。並且其使用方式也很是的簡單：

<meter min="0" low="10" optimum="50" high="90" max="100"></meter>
複製代碼

對於設置<meter>元素的樣式也能夠經過一些僞元素來完成，好比：

有關於<meter>更詳細的介紹能夠閱讀：

另外還有一種滑塊的效果：

實現這樣的效果，在HTML中也有相關的元素能夠幫助咱們來實現的。input type="range"和output結合，好比下面這個示例：

一個是滑塊，一個是輸出值：

有關於output和type="range"更多的介紹能夠閱讀：

`details` 和 `summary` 實現無JavaScript的交互效果

在Web中不少交互效果都會依賴於JavaScript來實現，好比手風琴（Accordion）、下拉菜單（Dropdown Menu）、提示框（Tooltips）、Tabs等。有了<details>和<summary>元素以後，這些效果咱們均可以經過他們來實現，好比下面這個效果：

有關於<details>和<summary>詳細的介紹能夠閱讀《藉助HTML5 details,summary無JS實現各類交互效果》一文。在Codepen上有不少相關的示例。

`datalist`實現下拉選擇框

對於<select>效果對於Web前端開發同窗而言並不陌生，不少時候爲了個性化的效果，會經過div配合JavaScript來模擬一個下拉選擇框的效果。在HTML5中，有一個新的元素<datalist>，配合帶有list的<input>元素，也能夠實現一個相似下拉選擇框的效果：

<label>Select your preferred code editor:</label>
<input type="text" id="txt_ide" list="ide" />
<datalist id="ide">
    <option value="Brackets" />
    <option value="Coda" />
    <option value="Dreamweaver" />
    <option value="Espresso" />
    <option value="jEdit" />
    <option value="Komodo Edit" />
    <option value="Notepad++" />
    <option value="Sublime Text 2" />
    <option value="Taco HTML Edit" />
    <option value="Textmate" />
    <option value="Text Pad" />
    <option value="TextWrangler" />
    <option value="Visual Studio" />
    <option value="VIM" />
    <option value="XCode" />
</datalist>
複製代碼

<datalist>中包含多個<option>元素（相似於<select>），它使用list屬性添加或附加到<input type="text">元素上。其實除了，type="text"以外，datalist還能夠運用於type="url"、type="tel"和type="color"等input上。來看一個<datalist>的案例：

有關於<datalist>更詳細的介紹能夠閱讀@Muhammad Ahmad Zafar 在2012年寫的一篇教程《Introducing the HTML5 datalist Element》。

小結

這一期主要圍繞着HTML中<input>的元素來展開，HTML5中給該元素提供了一些新屬性，特別是type的類型，在設計表單時，能夠藉助type的值給表單提供較好的用戶體驗，另外新增長的inputmode能夠相似於type值，一樣給用戶提供不一樣的鍵盤類型。除此以外，還有一些屬性能夠提升用戶體驗和表單驗證，並且一些僞元素還能夠幫助咱們更好的美化表單的UI風格。最後簡單的向你們介紹了幾個HTML5新元素，好比progress和metre實現進度條效果，type="range"和output實現滑塊效果，details 和 summary實現手風琴（Accordion）、下拉菜單（Dropdown Menu）、提示框（Tooltips）、Tabs等效果，datalist實現相似下拉選擇框效果。