html5定制表單_動力節點Java學院整理

2024-08-26 00:19:43

字體：大中小

來源：轉載

供稿：網友

HTML5中存在多種不同的輸入框和按鈕，通過設置input元素的type屬性來實現，除此之外，HTML5中還支持選擇列表、多行輸入框等，這些元素都有自己的用途和屬性，下面一一介紹。

單行文本輸入框

type為text表示input元素為一個單行文本框，是input元素的默認表現形式。單行文本輸入框支持下面的屬性設置。

設定元素大小

maxlength屬性設定用戶能夠輸入的字符的最大數目；size屬性設定了文本框能夠顯示的字符數目。

<form method="post" action="http://titan:8080/form"> <p><label for="name">Name: <input maxlenth="10" id="name" name="name"/></label></p> <p><label for="city">City: <input size="10" id="city" name="city"/></label></p> <p><label for="fave">Fruit: <input size="10" maxlenth="10" id="fave" name="fave"/></label></p> <button type="submit">Submit Vote</button></form>

設置初始值和占位式提示

value屬性可以為輸入框指定一個默認值；placeholder屬性可以設置一段提示文字，告訴用戶應該輸入什么類型的數據。

<form method="post" action="http://titan:8080/form"> <p><label for="name">Name: <input placeholder="Your name" id="name" name="name"/></label></p> <p><label for="city">City: <input placeholder="Where you live" id="city" name="city"/></label></p> <p><label for="fave">Fruit: <input value="Apple" id="fave" name="fave"/></label></p> <button type="submit">Submit Vote</button></form>

在chrome中的效果如下：

html5定制表單,html5表單,html表單

用button元素重置表單時，瀏覽器會恢復文本框中的占位式提示和默認值。

使用數據列表

list屬性可以設置為一個datalist元素的id屬性值，這樣用戶就可以在datalist元素指定的列表中進行選擇。datalist元素是HTML5中新增的，用來提供一批值，幫助用戶輸入需要的數據。

<form method="post" action="http://titan:8080/form"> <p><label for="name">Name: <input placeholder="Your name" id="name" name="name"/></label></p> <p><label for="city">City: <input placeholder="Where you live" id="city" name="city"/></label></p> <p><label for="fave">Fruit: <input list="fruitlist" id="fave" name="fave"/></label></p> <button type="submit">Submit Vote</button></form><datalist id="fruitlist"> <option value="Apples" label="Lovely Apples"/> <option value="Oranges">Refreshing Oranges</option> <option value="Cherries"/></datalist>

datalist元素中的每一個option都代表一個用戶可選擇的值，在chrome中的效果如下：

html5定制表單,html5表單,html表單

生成只讀或被禁用的文本框

readonly屬性表示文本框只讀，disabled屬性表示不可編輯，在外觀表現上有差異。

<form method="post" action="http://titan:8080/form"> <p><label for="name">Name: <input value="Adam" disabled id="name" name="name"/></label></p> <p><label for="city">City: <input value="Boston" readonly id="city" name="city"/></label></p> <p><label for="fave">Fruit: <input value="Apple" id="fave" name="fave"/></label></p> <button type="submit">Submit Vote</button></form>

在chrome中效果如下：

html5定制表單,html5表單,html表單

設置了disabled屬性的表單被設置為灰色，用戶不能編輯其中的文字，且該表單的內容不會被提交到服務器；而設置了readonly屬性的表單會阻止用戶編輯文本框中的內容，但不影響外觀，且內容會發給服務器。

密碼輸入框

type屬性值為password的input元素用于輸入密碼。該屬性的input元素支持以下屬性：
1）maxlength：用戶可以在密碼框中輸入的字符的最大數目；
2）pattern：用于輸入驗證的正則表達式；
3）placeholder：關于所需數據類型的提示；
4）readonly：設置密碼框為只讀；
5）required：用戶必須輸入一個值，否則無法通過輸入驗證；
6）size：通過指定密碼框中可見的字符數目設置其寬度；
7）value：設置初始密碼值。

<form method="post" action="http://titan:8080/form"> <p><label for="name">Name: <input value="Adam" disabled id="name" name="name"/></label></p> <p><label for="password">Password: <input type="password" placeholder="Min 6 characters" id="password" name="password"/></label></p> <p><label for="fave">Fruit: <input value="Apples" id="fave" name="fave"/></label></p> <button type="submit">Submit Vote</button></form>

用戶輸入的字符在密碼框中顯示為"*"，但需要注意，在提交表單時，服務器收到的是明文密碼，對于安全至關重要的網站和應用系統，應該考慮使用SSL/HTTPS對瀏覽器和服務器之間的通信內容加密。

按鈕

type屬性設置為submit、reset和button則會生成類似button元素那樣的按鈕。
1）submit：生成提交表單的按鈕，支持屬性：formaction、formenctype、formmethod、formtarget和formnovalidate，這些屬性和button元素的同名屬性用法相同，參考這里；
2）reset：生成重設表單的按鈕；
3）button：生成普通按鈕，無任何操作。
3中按鈕的說明文字都通過value屬性指定。

<form method="post" action="http://titan:8080/form"> <p><label for="name">Name: <input value="Adam" disabled id="name" name="name"/></label></p> <p><label for="password">Password: <input type="password" placeholder="Min 6 characters" id="password" name="password"/></label></p> <p><label for="fave">Fruit: <input value="Apples" id="fave" name="fave"/></label></p> <input type="submit" value="Submit Vote"/> <input type="reset" value="Reset"/> <input type="button" value="My Button"/></form>

在chrome中的效果如下：

html5定制表單,html5表單,html表單

用input元素生成按鈕與用button元素的不同之處在于后者可以用來顯示含標記的文字。但由于各個瀏覽器對input元素的處理方式比較一致，且有些較老的瀏覽器（例如IE6）不能正確處理button元素，所以很多網站都更傾向于用input元素。

帶限制的輸入框

數字輸入框

type屬性為number的input元素只接受數值。支持的屬性包括：
1）list：指定為文本框提供建議值的datalist元素，其值為datalist元素的id值；
2）min：設置最小值；
3）max：設置最大值；
4）readonly：只讀；
5）required：表明用戶必須輸入一個值；
6）step：上下調節數值的步長；
7）value：指定元素的初始值。

<form method="post" action="http://titan:8080/form"> <p><label for="name">Name: <input value="Adam" disabled id="name" name="name"/></label></p> <p><label for="password">Password: <input type="password" placeholder="Min 6 characters" id="password" name="password"/></label></p> <p><label for="fave">Fruit: <input value="Apples" id="fave" name="fave"/></label></p> <p><label for="price">$ per unit in your area: <input type="number" step="1" min="0" max="100" value="1" id="price" name="price"/></label></p> <input type="submit" value="Submit Vote"/></form>

在chrome中的效果如下：

html5定制表單,html5表單,html表單

范圍選擇器

使用type屬性為range的input元素，用戶只能用它從事先規定的范圍內選擇一個數值，該類型的input元素支持的屬性與number相同。

<form method="post" action="http://titan:8080/form"> <p><label for="name">Name: <input value="Adam" disabled id="name" name="name"/></label></p> <p><label for="password">Password: <input type="password" placeholder="Min 6 characters" id="password" name="password"/></label></p> <p><label for="fave">Fruit: <input value="Apples" id="fave" name="fave"/></label></p> <p><label for="price">$ per unit in your area: 1<input type="range" step="1" min="0" max="100" value="1" id="price" name="price"/>100</label></p> <input type="submit" value="Submit Vote"/></form>

在chrome中的效果如下：

html5定制表單,html5表單,html表單

復選框

type屬性為checkbox表示復選框，支持的屬性如下：
1）checked：默認是否選擇；
2）required：表示用戶必須勾選該復選框；
3）value：設定提交給服務端的數據值，默認為on。

<form method="post" action="http://titan:8080/form"> <p><label for="name">Name: <input value="Adam" disabled id="name" name="name"/></label></p> <p><label for="password">Password: <input type="password" placeholder="Min 6 characters" id="password" name="password"/></label></p> <p><label for="fave">Fruit: <input value="Apples" id="fave" name="fave"/></label></p> <p><label for="veggie">Are you vegetarian: <input type="checkbox" id="veggie" name="veggie"/>vegetarian</label></p> <input type="submit" value="Submit Vote"/></form>

在chrome中的效果如下：

html5定制表單,html5表單,html表單

注意使用checkbox時，只有勾選了的復選框在提交表單時才會發送給服務器。

單選按鈕組

type屬性為radio的input元素可以用來生成一組單選按鈕，支持的屬性同checkbox。每一個radio都代表一個選項，同一組的radio使用相同的name。單選按鈕組適用于選項較少的場景。

<form method="post" action="http://titan:8080/form"> <p><label for="name">Name: <input value="Adam" disabled id="name" name="name"/></label></p> <p><label for="password">Password: <input type="password" placeholder="Min 6 characters" id="password" name="password"/></label></p> <p><fieldset>  <legend>Vote for your favorite fruit</legend>  <label for="apples">   <input type="radio" checked value="Apples" id="apples" name="fave"/>   Apples  </label>  <label for="oranges">   <input type="radio" value="Oranges" id="oranges" name="fave"/>   Oranges  </label>  <label for="cherries">   <input type="radio" value="Cherries" id="cherries" name="fave"/>   Cherries  </label> </fieldset></p> <input type="submit" value="Submit Vote"/></form>

在chrome中的效果如下：

html5定制表單,html5表單,html表單

限定格式輸入框

type屬性值email、tel和url分別對應電子郵箱地址、電話號碼和URL，支持的屬性包括：
1）list：指定為文本框提供建議值的datalist元素，其值為datalist元素的id值；
2）maxlength：輸入字符的最大數目；
3）pattern：指定用于驗證輸入的正則表達式；
4）placeholder：指定關于所需數據類型的提示；
5）readonly：表示文本框只讀；
6）required：表明用戶必須輸入一個值；
7）size：可見的字符數目；
8）value：指定元素的初始值。
email還支持multiple屬性，表示可以接受多個電子郵箱地址。

<form method="post" action="http://titan:8080/form"> <p><label for="name">Name: <input value="Adam" disabled id="name" name="name"/></label></p> <p><label for="password">Password: <input type="password" placeholder="Min 6 characters" id="password" name="password"/></label></p> <p><label for="email">Email: <input type="email" placeholder="user@domain.com" id="email" name="email"/></label></p> <p><label for="tel">Tel: <input type="tel" placeholder="(xxx)-xxx-xxxx" id="tel" name="tel"/></label></p> <p><label for="url">Your homepage: <input type="url" id="url" name="url"/></label></p> <input type="submit" value="Submit Vote"/></form>

在chrome中的效果如下：

html5定制表單,html5表單,html表單

時間和日期輸入框

HTML5中新增了一些輸入日期和時間的類型，包括：
1）datetime：獲取世界時日期和時間，包括時區信息；
2）datetime-local：獲取本地日期和時間，不包含時區信息；
3）date：獲取本地日期，不含時間和時區信息；
4）month：獲取年月信息，不含日、時間和時區信息；
5）time：獲取時間；
6）week：獲取當前星期。

日期和時間的input元素支持的額外屬性包括：

1）list：指定為文本框提供建議值的datalist元素，其值為datalist元素的id值；
2）min：設置最小值；
3）max：設置最大值；
4）readonly：只讀；
5）required：用戶必須輸入一個值，否則無法通過輸入驗證；
6）step：上下調節數值的步長；
7）value：指定元素的初始值。

<form method="post" action="http://titan:8080/form"> <p><label for="name">Name: <input value="Adam" disabled id="name" name="name"/></label></p> <p><label for="password">Password: <input type="password" placeholder="Min 6 characters" id="password" name="password"/></label></p> <p><label for="fave">Fruit: <input value="Apples" id="fave" name="fave"/></label></p> <p><label for="lastbuy">When did you last buy: <input type="date" id="lastbuy" name="lastbuy"/></label></p> <input type="submit" value="Submit Vote"/></form>

在chrome中的效果如下：

html5定制表單,html5表單,html表單

目前日期和時間輸入框在大部分瀏覽器中支持都不好，因此，最好還是使用主流JavaScript庫提供的日歷選擇工具。

顏色輸入框

type屬性為color表示顏色選擇器，顏色值以7個字符的格式表示：以#開頭，接下來是三個兩位十六進制數，分別代表紅、綠、藍三種原色的值，如#FF1234。

<form method="post" action="http://titan:8080/form"> <p><label for="name">Name: <input value="Adam" disabled id="name" name="name"/></label></p> <p><label for="password">Password: <input type="password" placeholder="Min 6 characters" id="password" name="password"/></label></p> <p><label for="fave">Fruit: <input value="Apples" id="fave" name="fave"/></label></p> <p><label for="color">Color: <input type="color" id="color" name="color"/></label></p> <input type="submit" value="Submit Vote"/></form>

在chrome中的效果如下：

html5定制表單,html5表單,html表單

注意大多數瀏覽器都還沒有為這種input元素提供特別的支持。

被隱藏的輸入框

hidden型的input元素可以用來隱藏一個數據項，并在提交表單時將其發送給服務器（通常是為了利用到這個功能）。

<form method="post" action="http://titan:8080/form"> <input type="hidden" name="recordID" value="1234"/> <p><label for="name">Name: <input value="Adam" disabled id="name" name="name"/></label></p> <p><label for="password">Password: <input type="password" placeholder="Min 6 characters" id="password" name="password"/></label></p> <p><label for="fave">Fruit: <input value="Apples" id="fave" name="fave"/></label></p> <input type="submit" value="Submit Vote"/></form>

圖像按鈕

image型的input元素生成的按鈕顯示為一個圖標，點擊后提交表單。支持的屬性包括：
1）alt：提供元素的說明文字，對需要借助殘障輔助技術的用戶很有用；
2）formaction：同button元素；
3）formenctype：同button元素；
4）formmethod：同button元素；
5）formtarget：同button元素；
6）formnovalidate：同button元素；
7）height：以像素為單位設置圖像的高度；
8）src：指定要顯示的圖像的URL；
9）width：以像素為單位設置圖像的寬度；

<form method="post" action="http://titan:8080/form"> <input type="hidden" name="recordID" value="1234"/> <p><label for="name">Name: <input value="Adam" disabled id="name" name="name"/></label></p> <p><label for="password">Password: <input type="password" placeholder="Min 6 characters" id="password" name="password"/></label></p> <p><label for="fave">Fruit: <input value="Apples" id="fave" name="fave"/></label></p> <input type="image" src="accept.png" name="submit"/></form>

點擊圖像按鈕將提交表單，在提交的數據中會包含點擊位置的坐標信息，因此可以讓圖像中的不同區域代表不同的操作，然后根據用戶在圖像上的點擊位置做出相應的反應。

上傳文件按鈕

file型的input元素用于上傳文件，可以在提交表單時將文件上傳到服務器。支持的屬性包括：
1）accept：指定接受的MIME類型。MIME類型的定義，參考RFC 2046（http://tools.ietf.org/html/rfc2046）；
2）multiple：設置該屬性可以一次上傳多個文件；
3）required：用戶必須輸入一個值。

<form method="post" action="http://titan:8080/form" enctype="multipart/form-data"> <p><label for="name">Name: <input value="Adam" disabled id="name" name="name"/></label></p> <p><label for="password">Password: <input type="password" placeholder="Min 6 characters" id="password" name="password"/></label></p> <p><label for="fave">Fruit: <input value="Apples" id="fave" name="fave"/></label></p> <p><input type="file" name="filedata"/></p> <input type="submit" value="Submit Vote"/></form>

注意表單編碼類型為multipart/form-data的時候才能上傳文件。在chrome中的效果如下：

html5定制表單,html5表單,html表單

選項列表

selet元素用來生成一個選項列表，比radiiobutton型的input元素更緊湊，更適合選項較多的情形。該元素支持的屬性包括：
1）name：列表的名稱；
2）disabled：禁用該下拉列表；
3）form：文本區域所屬的一個或多個表單；
4）autofocus：在頁面加載后文本區域自動獲得焦點；
5）required：必填；
6）size：下拉列表中可見選項的數目；
7）multiple：可選擇多個選項。

單選下拉列表

select元素默認即為一個單選下拉列表

<form method="post" action="http://titan:8080/form" enctype="multipart/form-data"> <p><label for="name">Name: <input value="Adam" disabled id="name" name="name"/></label></p> <p><label for="password">Password: <input type="password" placeholder="Min 6 characters" id="password" name="password"/></label></p> <p><label for="fave"> Favorite Fruit:   <select id="fave" name="fave">   <option valu="apples" selected label="Apples">Apples</option>   <option valu="oranges" label="Oranges">Oranges</option>   <option valu="cherries" label="Cherries">Cherries</option>   <option valu="pears" label="Pears">Pears</option>  </select> </label></p> <input type="submit" value="Submit Vote"/></form>

在chrome中的效果如下：

html5定制表單,html5表單,html表單

復選框

為列表設置size屬性和multiple屬性后，就成為一個復選框。

<form method="post" action="http://titan:8080/form" enctype="multipart/form-data"> <p><label for="name">Name: <input value="Adam" disabled id="name" name="name"/></label></p> <p><label for="password">Password: <input type="password" placeholder="Min 6 characters" id="password" name="password"/></label></p> <p><label for="fave"> Favorite Fruit:   <select id="fave" name="fave" size="5" multiple>   <option valu="apples" selected label="Apples">Apples</option>   <option valu="oranges" label="Oranges">Oranges</option>   <option valu="cherries" label="Cherries">Cherries</option>   <option valu="pears" label="Pears">Pears</option>  </select> </label></p> <input type="submit" value="Submit Vote"/></form>

在點擊選項時按住Ctrl鍵，就可以選擇多個選項。在chrome中效果如下：

html5定制表單,html5表單,html表單

帶結構的列表

optgroup元素可以用來在select元素的內容中建立一定的結構，該元素支持的屬性包括：
1）label：用來為整組選項提供一個小標題；
2）disabled：灰化選擇組內的任何選項。

<form method="post" action="http://titan:8080/form" enctype="multipart/form-data"> <p><label for="name">Name: <input value="Adam" disabled id="name" name="name"/></label></p> <p><label for="password">Password: <input type="password" placeholder="Min 6 characters" id="password" name="password"/></label></p> <p><label for="fave"> Favorite Fruit:   <select id="fave" name="fave">   <optgroup label="Top Choices">    <option valu="apples" selected label="Apples">Apples</option>    <option valu="oranges" label="Oranges">Oranges</option>   </optgroup>   <optgroup label="Others">    <option valu="cherries" label="Cherries">Cherries</option>    <option valu="pears" label="Pears">Pears</option>   </optgroup>  </select> </label></p> <input type="submit" value="Submit Vote"/></form>

在Chrome中的效果如下：

html5定制表單,html5表單,html表單

optgroup元素只起組織作用，用戶無法將其作為選項選中。

多行輸入框

textarea元素生成的是多行文本框，用戶可以在里面輸入多行文字。包含的屬性包括：
1）autofocus：在頁面加載后文本區域自動獲得焦點；
2）cols：文本區內的可見寬度，整型；
3）disabled：禁用該文本區；
4）form：文本區所屬的一個或多個表單；
5）maxlength：文本區的最大字符數；
6）name：文本區的名稱；
7）placeholder：文本區域預期值的簡短提示；
8）readonly：文本區為只讀；
9）required：文本區是必填的；
10）rows：文本區的可見行數，整型；
11）wrap：文本區的文本如何換行，包括：soft（默認），在表單提交時，文本區中的文本不換行；hard，在表單提交時，文本區中的文本換行（包含換行符），當使用該值時，必須規定cols屬性。

<form method="post" action="http://titan:8080/form" enctype="multipart/form-data"> <p><label for="name">Name: <input value="Adam" disabled id="name" name="name"/></label></p> <p><label for="password">Password: <input type="password" placeholder="Min 6 characters" id="password" name="password"/></label></p> <p><label for="fave"> Favorite Fruit:   <select id="fave" name="fave">   <optgroup label="Top Choices">    <option valu="apples" selected label="Apples">Apples</option>    <option valu="oranges" label="Oranges">Oranges</option>   </optgroup>   <optgroup label="Others">    <option valu="cherries" label="Cherries">Cherries</option>    <option valu="pears" label="Pears">Pears</option>   </optgroup>  </select> </label></p> <p><textarea cols="20" rows="5" wrap="hard" id="story" name="story">Tell us why this is your favorite fruit</textarea></p> <input type="submit" value="Submit Vote"/></form>

在Chrome中的效果如下：

html5定制表單,html5表單,html表單

結果展示區域

output元素表示計算的結果。支持的屬性包括：
1）for：輸出域相關的一個或多個元素，中間用空格分隔；
2）form：輸入字段所屬的一個或多個表單；
3）name：對象的唯一名稱（表單提交時使用）。

<form onsubmit="return false" oninput="res.value = quant.valueAsNumber * price.valueAsNumber"> <fieldset>  <legend>Price Calculator</legend>  <input type="number" placeholder="Quantity" id="quant" name="quant"/>  <input type="number" placeholder="Price" id="price" name="price"/> =   <output for="quant name" name="res"/> </fieldset></form>

上面使用了JavaScript的時間系統生成了一個簡單的計算器，在Chrome中的效果如下：

html5定制表單,html5表單,html表單