當我們在網頁設計了表單讓使用者輸入資料, 例如:註冊網站會員、留言板...等, 您是否擔心使用者沒有依要求輸入正確的資料呢?像是在 email 欄位隨意輸入「abcdefg」, 或是在電話欄位只打了「123」, 那麼這些錯誤的資料可能無法正確傳送 email 給您, 或是讓您聯絡到對方, 對我們來說只是白白浪費時間去處理這些資料罷了。 因此, 在使用者填寫了資料要送出之前, 我們應該做一些簡單的資料驗證, 以減少這些無用的資料。過去要做到表單的資料驗證, 都需要透過程式語言才可以, 但現在利用 HTML5 的屬性, 再搭配有支援 HTML5 的網頁瀏覽器, 就可以做到資料驗證。 用 required 屬性驗證必填欄位 我們可以在 input 元件內加上 required 屬性, 成為必填欄位。input 的類型可以是文字欄位 (text)、單選鈕 (radio) 等。required 屬性的用法如下: ![](http://www.flag.com.tw/db/preview/images/F5462_1A.jpg) 指定了必填欄位後, 我們也可以加上一些樣式, 提醒使者該欄為必填欄位。而在使用者送出表單時, 則會檢查該欄位是否有填入資料, 若沒有則會出現提示, 告知使用者必須填寫欄位內容: ![](http://www.flag.com.tw/db/preview/images/F5462_1.jpg) .......﹝詳細內容﹞ 更多內容請見 《 最新 HTML5+CSS3 網頁程式設計 第二版 》 ![](http://paper.udn.com/udnpaper/POH0032/289737/html/i25.gif) |
沒有留言:
張貼留言