type屬性

 type屬性

當type="text"時:屬性如下
maxlength:設置文本框最大字符長度。
pattern:用於輸入驗證的正則表達式。
placeholder:輸入字符串的提示(呈現暗灰色)。
readonly:文本框處於只讀狀態(不能修改)。
disableD:文本框處於禁用狀態。
size:設置文本框寬度。
value:設置文本框初始值。
required:表明用戶必須輸入一個值,否則無法通過輸入驗證。
list:list指定爲文本框提供建議值的datalist元素,其值爲datalist元素的id值。
例如:
<form action="http://www.baidu.com" target="_blank">
<input type="text" name="user" maxlength="5" size="20" value="wyj" readonly disabled/>
<input type="text" list="abc" />
<button>提交</button>
</form>
<datalist id="abc">
<option value="1">蘋果</option>
<option value="2">提子</option>
<option value="3" label="香蕉">
<option value="菠蘿">
</datalist>
當type的值爲password,search時屬性同text一樣
當type=number,ranger時只限輸入數字的文本框(對數據進行處理)。

屬性:

        min:設置可接受數字的最小值。

        max:設置可接受數字的最大值。
        step:指定上下調節的步長。
        list,readonly,required,value等等
<form action="http://www.baidu.com" target="_blank">
<input type="number" step="2" min="10" max="100" />
<button>提交</button>
</form>
當type=color時
<form action="http://www.baidu.com" target="_blank">
<input type="color" name="user" />
<button>提交</button>
</form>

當type=checkbox(複選框),radio(單選框)時:
屬性如下:checked:設置複選框,單選框是否勾選狀態。
required:表示用戶必須勾選,否則無法通過驗證。
value:設置複選框,單選框勾選狀態時提交的數據。默認爲on
例如:
<form action="http://www.baidu.com" target="_blank">
音樂<input type="checkbox" name="music" value="1">
唱歌<input type="checkbox" name="sing" value="2">


<br />

<input type="radio" name="sex" value="1" checked>男
<input type="radio" name="sex" value="2">女
<button>提交</button>
</form>


當type=submit,reset,button時,生成一個按鈕,三種模式:提交,重置和一般按鈕。
submit,reset有默認的value值
<form action="http://www.baidu.com" target="_blank">
<input type="button" value="提交"/>
<input type="reset" />
<input type="submit" />
</form>
當type=image時,生成一個圖片按鈕,點擊圖片就實現提交功能,並且傳送了分區響應數據,圖片按鈕也提供了一些額外屬性。
屬性:
        src:指定要顯示圖像的URL。
        width,height:圖片的長度和寬度。

        提供的額外屬性(formaction,formtarget,autofocus)

 <form action="http://www.baidu.com" target="_blank">

        <input type="image" src="img/wei.jpg.jpg" width="600" height="400"/>
</form>
當type=email時表示郵件格式,當type=tel時表示電話號碼格式,當type=url時表示網址格式。
當type=hidden時生成一個隱藏控件,一般用於表單提交時關聯主鍵id提交,而這個數據作爲隱藏存在。
當type=file時,生成一個文件上傳控件,用於文件的上傳額外提供了一些屬性:
        accept:指定接受的MDME類型
        required:表明用戶必須提供一個值,否則無法通過驗證.
        accept="image/gif,image/jpeg,image/png"
        <form action="http://www.baidu.com" target="_blank">
<input type="hidden" />

<input type="file" accept="image/gif,image/jpeg" required="required" />

<button>提交</button>
</form>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章