1. 程式人生 > >HTML5---5.表單新增的元素

HTML5---5.表單新增的元素

inpu java sub 選擇列 key 單元 option 專業 提示信息

新增的表單元素
Datalist   
 keygen   
output(span)   
progress(max value)  
meter(max  min   high   low    value)

<form action="">
    <!--專業:
    <select name="" id="">
        <option value="1">前端與移動開發</option>
        <option value="2">java</option>
        <option value="3">javascript</option>
        <option value="4">c++</option>
    </select>-->
    <!--不僅可以選擇,還應該可以輸入-->
    <!--建立輸入框與datalist的關聯  list="datalist的id號"-->
    專業:<input type="text" list="subjects"> <br>
    <!--通過datalist創建選擇列表-->
    <datalist id="subjects">
        <!--創建選項值:value:具體的值 label:提示信息,輔助值-->
        <!--option可以是單標簽也可以是雙標簽-->
        <option value="英語" label="不會"/>
        <option value="前端與移動開發" label="前景非常好"></option>
        <option value="java" label="使用人數多"></option>
        <option value="javascript" label="做特效"></option>
        <option value="c" label="不知道"></option>
    </datalist>

    網址:<input type="url" list="urls">
    <datalist id="urls">
        <!--如果input輸入框的type類型是url,那麽value值必須添加http://-->
        <option value="http://www.baidu.com" label="百度"></option>
        <option value="http://www.sohu.com"></option>
        <option value="http://www.163.com"></option>
    </datalist>
</form>

HTML5---5.表單新增的元素