Web前端-html 5—form

                                                            form

 

color

獲取當前的顏色  和  js 連用

<input type="color" name="mycolor">
    <button>點擊改變顏色</button>

 

email

郵箱格式的校驗，規則： 必須要有@   並且  @前後都有內容才能通過

<form action="http://www.baidu.com">
    <input type="email">
    <input type="submit">
</form>

number

  純數字：不可以有有文本，或特殊字符    主要用於移動端：彈出想對應的軟鍵盤數字的
  可以輸入不在範圍內的值但是，點擊提交的時候回校驗 必選要在範圍內：最大值  最小值  步長的倍數
  步長的基點數是從最小值基礎上變化
  若沒有最小值則是0（默認）

<form action="http://www.baidu.com">
    <input type="number" min="2.5" max="100" step="5">
    <input type="submit">
</form>

tel

tel 手機端： 彈出一個軟鍵盤 數值的 在pc端做text效果

<form action="http://www.baidu.com">
    <input type="tel" >
    <input type="submit">
</form>

url

url：必須要給個協議

<form action="http://www.baidu.com">
    <input type="url" >
    <input type="submit">
</form>

search

search：手機端：彈出以軟件盤 軟件盤 右下角有個“搜索”/search

<form action="http://www.baidu.com">
    <input type="search" >
    <input type="submit">
</form>

range

range
默認：0 ~100
初始顯示的是 value = 50
min 最小值
max 最大值
value 默認值
同樣是通過js調節

<form action="http://www.baidu.com">
    <input type="range" max="1000" value="50">
    <input type="submit">
</form>

input

<input type="date">
<input type="month">
<input type="time">
<input type="datetime-local">
<hr>
<!--<form action="http://www.baidu.com">-->
<form action="#" id="myform">
    <!--input的屬性--> 
    <!--不佔位 只有提示作用 不輸入value 值則顯示  輸入value值不顯示-->
    <!--<input type="text" placeholder="我是提示的作用" autofocus>-->
    
    <!--無法使用的-->
    <!--<input type="text" disabled  value="我是不可以用的disabled"  name="mydisabled">-->
    <!--無法使用-->
    <!--<input type="text" readonly value="我是不可以用的readonly" name="myreadonly">-->
    <!--
    disabled 的內容 不會被提交 即使有name 值也不會被提交給後臺
    readonly 的內容 會被提交給後臺

    -->
    <!--自動獲取焦點  ，當多一個input都有該屬性的時候 則誰先焦點在誰身上-->
    <!--<input type="text" placeholder="自動獲取到焦點" autofocus>-->
    <!--不爲空的校驗，只要不嫌是placeholder的內容 則就表示該輸入框部位空-->
    <!--<input type="text" required placeholder="不能爲空的驗證">-->
    <!--多個內容 多個內容 但是 每一個郵件地址用“，”作爲間隔-->
    <!--<input type="email" multiple>-->
    <!--min  max  最大值最小值-->
    <!--<input type="range" min="0" max="1000" value="2000">-->
    <!--step  步長   默認是1   -->
    <!--<input type="number" step="10" name="show">-->
    <!--form ：讓不在當前form 中的其他 內容  同時個該form 可以一起提交  但是要使用特殊當前form 添加id-->

    <!--此時的input 不在要type 屬性而是使用的是 list屬性  作爲關聯datalist中的值-->
    <input list="a" name="inputlist">
    <datalist id="a">
        <option value="a">aa</option>
        <option value="aa">bb</option>
        <option value="aab">cc</option>
        <option value="b">dd</option>
        <option value="bb">ee</option>
        <option value="bba">ff</option>
    </datalist>
    <input type="submit">
</form>
<!--<input type="text" name="username" value="善知一枝花" form="myform">-->