碼農9527 / WEB / 中級Web教程:HTML5表單元素

分享

   

【全民集運收費】中級Web教程:HTML5表單元素

2021-04-08  碼農9527

 網絡前端高薪的誘惑,學習門檻低,不管是學生黨還是工作者,都渴望憑藉自己的能力,空閒的時間,去學前端。也許是一種愛好,也許是一種想從事的工作。但它真的那麼簡單嗎?現在,初級前端的工作,已接近飽和,並處於供過於求的狀態,企業更需要的是具備紮實的基礎,至少具備後端技能的前端開發工程師。已不像之前所説的美工,美工了。在許多大企業中,前端開發崗位是獨立的,需要專業技能。

    HTML5表單元素

    HTML5新的表單元素

    HTML5有以下新的表單元素:

    <datalist>

    <keygen>

    <output>

    注意:不是所有的瀏覽器都支持HTML5新的表單元素,但是你可以在使用它們,即使瀏覽器不支持表單屬性,仍然可以顯示為常規的表單元素。

    HTML5<datalist>元素

    <datalist>元素規定輸入域的選項列表。

    <datalist>屬性規定form或input域應該擁有自動完成功能。當用户在自動完成域中開始輸入時,瀏覽器應該在該域中顯示填寫的選項:

    使用<input>元素的列表屬性與<datalist>元素綁定.

web

    <input>元素使用<datalist>預定義值:

<input list="browsers">  <datalist id="browsers">   <option value="Internet Explorer">   <option value="Firefox">   <option value="Chrome">   <option value="Opera">   <option value="Safari"></datalist>

    HTML5<keygen>元素

    <keygen>元素的作用是提供一種驗證用户的可靠方法。

    <keygen>標籤規定用於表單的密鑰對生成器字段。

    當提交表單時,會生成兩個鍵,一個是私鑰,一個公鑰。

    私鑰(privatekey)存儲於客户端,公鑰(publickey)則被髮送到服務器。公鑰可用於之後驗證用户的客户端證書(clientcertificate)。

web

    帶有keygen字段的表單:

<form action="demo_keygen.asp" method="get">用户名: <input type="text" name="usr_name">加密: <keygen name="security"><input type="submit"></form>

    HTML5<output>元素

    <output>元素用於不同類型的輸出,比如計算或腳本輸出:

web

    將計算結果顯示在<output>元素:

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0<input type="range" id="a" value="50">100 +<input type="number" id="b" value="50">=<output name="x" for="a b"></output></form>

    HTML5新表單元素

    HTML<datalist>標籤

    下面是一個<input>元素,<datalist>中描述了其可能的值:

<input list="browsers"><datalist id="browsers">   <option value="Internet Explorer">   <option value="Firefox">   <option value="Chrome">   <option value="Opera">   <option value="Safari"></datalist>

    HTML<keygen>標籤

    該標籤在新的Web標準中已廢棄。

    帶有keygen字段的表單:

<form action="demo_keygen.asp" method="get">   用户名: <input type="text" name="usr_name">   加密: <keygen name="security">   <input type="submit"></form>

    HTML<output>標籤

    將計算結果顯示在<output>元素中:

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0  <input type="range" id="a" value="50">100   +<input type="number" id="b" value="50">   =<output name="x" for="a b"></output>

    以上就是中級Web教程:HTML5表單元素的全部內容,

    0條評論

    發表

    請遵守用户 評論公約

    類似文章 更多
    喜歡該文的人也喜歡 更多

    ×
    ×

    ¥.00

    微信或支付寶掃碼支付:

    開通即同意《個圖VIP服務協議》

    全部>>