2.2 HTML5中新增的input元素

在HTML5出現(xiàn)之前，HTML表單中的表單控件包括文本框、按鈕、單選按鈕、復(fù)選框等，如表2-1所示。

例如，form1.html，包含了以上各個(gè)控件的使用，為了更好地演示表單的作用，此處用到了動(dòng)態(tài)處理程序JSP，有關(guān)JSP的知識，讀者可以參照相關(guān)資料，此處暫不作介紹。form1.html中的表單提交給form1_ok.jsp處理，form1_ok.jsp顯示用戶在表單中填寫的信息。

form1.html：

form1_ok.jsp：

要驗(yàn)證form1.html及form1_ok.jsp的顯示結(jié)果，需要將其部署到Java Web服務(wù)器上，在瀏覽器的地址欄里輸入http://localhost:8080/ch02/form1.html，填寫完相應(yīng)的信息后的顯示結(jié)果如圖2-1所示，單擊“提交”按鈕之后的顯示結(jié)果如圖2-2所示。

2.2.1 email類型

email類型的input元素是專門用于輸入E-mail地址的文本輸入框，在提交表單時(shí)，會(huì)自動(dòng)驗(yàn)證email輸入框的值。如果值無效，則不允許提交表單。例如，email.html，當(dāng)輸入的地址不符合email的格式要求時(shí)，會(huì)給出相應(yīng)提示，如圖2-3所示。

email.html：

2.2.2 url類型

url類型的input元素專門用于輸入url地址，當(dāng)提交表單時(shí)，如果輸入的內(nèi)容符合url地址格式，則允許提交表單；如果不符合地址格式，則不允許提交表單，并且會(huì)給出相應(yīng)的提示。例如，url.html，當(dāng)輸入的內(nèi)容是www.sina.com.cn時(shí)，漏掉了協(xié)議類型，如http://，顯示結(jié)果如圖2-4所示。

url.html：

2.2.3 number類型

number類型的input元素提供用于輸入數(shù)值的文本框，只能輸入數(shù)值類型的值。可以設(shè)定對輸入數(shù)字的限制，例如允許的最大值、最小值、合法的數(shù)字間隔或者默認(rèn)值等。max屬性指定允許的最大值，min屬性指定允許的最小值，step指定默認(rèn)的數(shù)字間隔，value指定默認(rèn)值。如果輸入的數(shù)值不符合以上限定，則不允許提交表單，并給出相應(yīng)提示。例如，number.html。

number.html：

數(shù)值輸入框的默認(rèn)值為50，如圖2-5所示。

當(dāng)輸入的數(shù)值小于允許的最小值20時(shí)，顯示結(jié)果如圖2-6所示。

當(dāng)輸入的數(shù)值大于允許的最大值時(shí)，顯示結(jié)果如圖2-7所示。

2.2.4 range類型

range類型的input元素用于輸入一定范圍內(nèi)的數(shù)字值的文本框，在網(wǎng)頁中顯示為滑動(dòng)條。可以對可接受的數(shù)字進(jìn)行限制，例如，可以使用max設(shè)置允許使用的最大值，使用min設(shè)置允許使用的最小值，使用step設(shè)置合法的數(shù)字間隔以及使用value設(shè)置默認(rèn)值，range類型與number類型非常類似，只是外觀不同。range類型的input元素在不同的瀏覽器中的外觀不同，例如，range.html，其在Chrome瀏覽器中的顯示效果如圖2-8所示。

range.html：

2.2.5 Date pickers類型

Date pickers類型指的是日期選擇器，是網(wǎng)頁中經(jīng)常使用的一種控件。在HTML5之前的版本中并沒有支持任何形式的日期選擇器，如果要實(shí)現(xiàn)日期的選擇只能使用JavaScript實(shí)現(xiàn)，較為煩瑣。HTML5提供了多個(gè)用于選取日期和時(shí)間的輸入類型，具體包括：

● date——選取日、月、年。

● month——選取月和年。

● week——選取周和年。

● time——選取時(shí)間（小時(shí)和分鐘）。

● datetime——選取時(shí)間、日、月、年（UTC，世界標(biāo)準(zhǔn)時(shí)間）。

● datetime-local——選取時(shí)間、日、月、年（本地時(shí)間）。

1．date類型

date類型的日期選擇器用于選取日、月、年，即選擇一個(gè)具體的日期，如2018年5月22日，選擇的日期會(huì)以2018-5-22的形式顯示。例如，date.html。

date.html：

date.html在Chrome瀏覽器中的顯示效果如圖2-9所示。

2．month類型

month類型的日期選擇器用于選取月、年，即選擇一個(gè)具體的月份，如2018年5月，則獲取的元素的值為2018-05。例如，month.html，其在Chrome瀏覽器中的顯示效果如圖2-10所示，由圖可見，整個(gè)月份中的日期都以深灰色顯示，單擊該區(qū)域可以選擇整個(gè)月份。

month.html：

3．week類型

week類型的日期選擇器用于選擇周和年，如2018年第21周，選擇以后元素的值會(huì)以2018-21的形式顯示。例如，week.html，其顯示效果如圖2-11所示，左側(cè)為周數(shù)，右側(cè)為日期。

week.html：

4．time類型

time類型的input元素用于選擇時(shí)間，可以具體到小時(shí)和分鐘，當(dāng)選擇06:08 PM時(shí)，獲取的input元素的值為18:08。例如，time.html，其顯示效果如圖2-12所示。

time.html：

5．datetime類型

datetime類型的日期選擇器用于選擇時(shí)間、日、月、年，其中時(shí)間為UTC時(shí)間。大部分瀏覽器不支持datetime類型的input元素。

6．datetime-local類型

datetime-local類型的日期選擇器用于選擇時(shí)間、日、月、年，其中時(shí)間為本地時(shí)間。例如，datetime-local.html，其顯示效果如圖2-13所示。

2.2.6 search類型

search類型的input元素用于輸入搜索關(guān)鍵詞的文本框。search類型提供的搜索框不只是百度或者Google的搜索框，而是任意網(wǎng)頁中的任意一個(gè)搜索框。例如，search.html，在搜索框中輸入文字后，右側(cè)會(huì)出現(xiàn)一個(gè)“×”按鈕，單擊此按鈕會(huì)清空搜索框的內(nèi)容，如圖2-14所示。如果之前在搜索框內(nèi)輸入過信息，會(huì)出現(xiàn)提示信息，如圖2-15所示。

search.html：

2.2.7 tel類型

tel類型的input元素是專門用于輸入電話號碼的文本框，它并不限定只能輸入數(shù)字，因?yàn)殡娫捥柎a中也包含如“+”“-”等字符。

2.2.8 color類型

color類型的input元素專門用于設(shè)置顏色值，單擊文本框時(shí)，可以打開拾色器面板，用戶可在其中進(jìn)行可視化的顏色選擇。當(dāng)選擇紅色時(shí)，元素的返回值以#FF0000的形式呈現(xiàn)。例如，color.html，其顯示效果如圖2-16所示。不同的操作系統(tǒng)的拾色器面板的顯示效果會(huì)有所不同，在Windows操作系統(tǒng)下的Chrome瀏覽器中的顯示效果如圖2-17所示。

color.html：