捕鱼机海啸怎么打

書名：精通HTML5+CSS3+JavaScript網(wǎng)頁設(shè)計（視頻教學(xué)版）（第2版）
作者名：王英英
本章字?jǐn)?shù)： 1122字
更新時間： 2019-12-09 14:23:58

5.3 表單高級元素的使用

除了上述基本屬性外，HTML5中還有一些高級屬性，包括url、email、time、range、search等。對于部分高級屬性，IE 11.0瀏覽器暫時還不支持，下面將用Opera 11.60瀏覽器查看效果。

5.3.1 url屬性

url屬性用于說明網(wǎng)站網(wǎng)址，顯示為在一個文本框中輸入URL地址。在提交表單時會自動驗證url的值，代碼格式如下：

     <input type="url" name="userurl"/>

另外，用戶可以使用普通屬性設(shè)置url輸入框，例如可以使用max屬性設(shè)置其最大值、min屬性設(shè)置其最小值、step屬性設(shè)置合法的數(shù)字間隔、利用value屬性規(guī)定其默認(rèn)值。對于另外的高級屬性中同樣的設(shè)置不再重復(fù)講述。

【例5.11】（實例文件：ch05\5.11.html）

     <!DOCTYPE html>
     <html>
     <body>
     <form>
     <br/>
     請輸入網(wǎng)址：
     <input type="url" name="userurl"/>
     </form>
     </body>
     </html>

在IE 11.0中的瀏覽效果如圖5-11所示。用戶可在文本框中輸入相應(yīng)的網(wǎng)址。如果輸入的URL格式不準(zhǔn)確，按【Enter】鍵，就會彈出提示信息。

圖5-11 url屬性的效果

5.3.2 email屬性

與url屬性類似，email屬性用于讓瀏覽者輸入E-mail地址。在提交表單時會自動驗證email域的值，代碼格式如下：

     <input type="email" name="user_email"/>

【例5.12】（實例文件：ch05\5.12.html）

     <!DOCTYPE html>
     <html>
     <body>
     <form>
     <br/>
     請輸入您的郵箱地址：
     <input type="email" name="user_email"/>
     <br />
     <input type="submit" value="提交">
     </form>
     </body>
     </html>

在IE 11.0中的瀏覽效果如圖5-12所示。用戶可在文本框中輸入相應(yīng)的郵箱地址。如果用戶輸入的郵箱地址不合法，單擊【提交】按鈕后會彈出提示信息。

圖5-12 email屬性的效果

5.3.3 date和times屬性

HTML5新增了一些日期和時間輸入類型，其中包括date、datetime、datetime-local、month、week和time，具體含義如表5-1所示。

表5-1 日期和時間輸入類型

上述屬性的代碼格式類似，例如以date屬性為例，代碼格式如下：

     <input type="date" name="user_date" />

【例5.13】（實例文件：ch05\5.13.html）

     <!DOCTYPE html>
     <html>
     <body>
     <form>
     <br/>
     請選擇購買商品的日期：
     <br />
     <input type="date" name="user_date"/>
     </form>
     </body>
     </html>

在Opera 55.2中的瀏覽效果如圖5-13所示。用戶單擊輸入框中的下三角按鈕，即可在彈出的窗口中選擇需要的日期。

圖5-13 date屬性的效果

5.3.4 number屬性

number屬性提供了一個輸入數(shù)字的輸入類型。用戶可以直接輸入數(shù)字或者通過單擊微調(diào)框中的按鈕選擇數(shù)字，代碼格式如下：

     <input type="number" name="shuzi" />

【例5.14】（實例文件：ch05\5.14.html）

     <!DOCTYPE html>
     <html>
     <body>
     <form>
     <br/>
     此網(wǎng)站我曾經(jīng)來
     <input type="number" name="shuzi"/>次了哦！
     </form>
     </body>
     </html>

在Opera 11.0中的瀏覽效果如圖5-14所示。用戶可以直接輸入數(shù)字，也可以單擊微調(diào)按鈕選擇合適的數(shù)字。

圖5-14 number屬性的效果

技巧提示

強烈建議用戶使用min和max屬性規(guī)定輸入的最小值和最大值。

5.3.5 range屬性

range屬性可以顯示一個滾動的控件。和number屬性一樣，用戶可以使用max、min和step屬性設(shè)置控件的范圍，代碼格式如下：

     <input type="range" name="" min="" max="" />

其中，min和max屬性分別控制滾動控件的最小值和最大值。

【例5.15】（實例文件：ch05\5.15.html）

     <!DOCTYPE html>
     <html>
     <body>
     <form>
     <br/>
     英語成績公布了！我的成績名次為：
     <input type="range" name="ran" min="1" max="10"/>
     </form>
     </body>
     </html>

在IE 11.0中的瀏覽效果如圖5-15所示。用戶可以拖曳滑塊選擇合適的數(shù)字。

圖5-15 range屬性的效果

技巧提示

默認(rèn)情況下，滑塊位于滾珠的中間位置。如果用戶指定的最大值小于最小值，就允許使用反向滾動軸，目前瀏覽器對這一屬性還不能很好地支持。

5.3.6 required屬性

required屬性規(guī)定必須在提交之前填寫輸入域（不能為空）。required屬性適用于以下類型的輸入屬性：text，search，url，email，password，date，pickers，number，checkbox和radio等。

【例5.16】（實例文件：ch05\5.16.html）

在Opera 11.0中的瀏覽效果如圖5-16所示。如果用戶只輸入密碼就單擊【登錄】按鈕，就會彈出提示信息。

圖5-16 required屬性的效果

官术网_书友最值得收藏!

精通HTML5+CSS3+JavaScript網(wǎng)頁設(shè)計（視頻教學(xué)版）（第2版）