<option id="u08qk"></option>
  • <blockquote id="u08qk"><option id="u08qk"></option></blockquote>
  • <blockquote id="u08qk"><button id="u08qk"></button></blockquote>
    <li id="u08qk"></li>
  • <object id="u08qk"></object>
  • 成都web前端培訓
    成都達內金融街中心

    HTML5表單自動聚焦代碼分享

    • 時間:2018-02-11 15:30
    • 發布:達內楊老師
    • 來源:達內

    成都達內分享——HTML5表單自動聚焦代碼分享

    <!DOCTYPE html> 2: <html>

    <head>

    <title>注冊帳號</title>

    <meta charset="utf-8">

    </head>

    <body>

    <form method="post" action="goto">

    <fieldset id="register_information">

    <legend>新用戶注冊</legend>

    <ol>

    <li>

    <label for="name">郵 箱</label>

    <input type="email" id="name" name="name">

    </li>

    <li>

    <label for="user">用戶名</label>

    <input type="text" id="user" name="user">

    </li>

    <li>

    <label for="nickname">顯示名稱</label>

    <input type="text" id="nickname" name="user">

    </li>

    <li>

    <label for="password">密碼</label>

    <input type="password" id="password" ame="user_password">

    </li>

    <li>

    <label for="confirm_password">確認密碼</label>

    <input type="password" id="confirm_password" ame="user_password">

    </li>

    </ol>

    </fieldset>

    </form>

    </body>

    </html>

    使用自動聚焦

    要使用HTML5的自動聚焦功能,只需要在表單域中添加autofocus屬性即可

    例如上面,想讓頁面加載完成時自動將光標定位到表單的第一個表單域郵箱上以及提高輸入效率。

    代碼如下:

    <li>

    <label for="name">郵 箱</label>

    <input type="email" id="name" name="name" autofocus>

    </li>

    HTML5注冊表單的自動聚焦與占位文本示例代碼

    需要注意的是,如果頁面中設置了多個autofocus屬性,那么用戶的光標只會定位到后一個設置了autofocus屬性的表單域上。

    使用占位文本

    占位文本的大用處,就是向用戶說明應該如何正確的填寫表單。即進行輸入提示。要使用占位文本的話,只需要在輸入域中添加placeholder屬性即可

    下面是使用了placeholder屬性的輸入表單域

    代碼如下:

    <ol>

    <li>

    <label for="name">郵 箱</label>

    <input type="email" id="name" name="name" autofocus placeholder="請輸入有效的郵件地址">

    </li>

    <li>

    <label for="user">用戶名</label>

    <input type="text" id="user" name="user" placeholder="輸入用戶名">

    </li>

    <li>

    <label for="nickname">顯示名稱</label>

    <input type="text" id="nickname" name="user" placeholder="輸入昵稱">

    </li>

    <li>

    <label for="password">密碼</label>

    <input type="password" id="password" ame="user_password" placeholder="輸入密碼">

    </li>

    <li>

    <label for="confirm_password">確認密碼</label>

    <input type="password" id="confirm_password" ame="user_password" placeholder="再次輸入密碼">

    </li>

    </ol>

    運行效果如下

    HTML5注冊表單的自動聚焦與占位文本示例代碼

    是否啟用自動完成

    在HTML5中引入了autocomplete屬性。用來通知瀏覽器是否為當前表單域自動填充數據。某些瀏覽器會記住用戶之前輸入的數據,而在某些情況下,我們可能并不希望用戶使用記錄數據,特別類似于密碼這一類的

    關閉自動完成

    代碼如下:

    <input type="password" id="password" ame="user_password" autocomplete="off" placeholder="輸入密碼">

    只需要將atuocomplete的值設置成off,就可以阻止自動完成。

    上一篇:Div與span配合css的前端
    下一篇:淺析AMP-移動頁面優化
    • 關注微信公眾號

      回復關鍵字:視頻資料

      免費領取 達內課程視頻學習資料

    • 視頻學習QQ群

      添加QQ群:1143617948

      免費領取達內課程視頻學習資料

    Copyright ? 2018 Tedu.cn All Rights Reserved 京ICP備08000853號-56 京公網安備 11010802029508號 達內時代科技集團有限公司 版權所有

    選擇城市和中心
    江西省

    貴州省

    廣西省

    海南省

    校花把腿张开让男生桶视频