目錄

?

1.文本框

2.密碼框

3.單選按鈕 ? checked

4.復選框 ? checked

5.列表框 ? selected

6.按鈕

7.文本域

8.文件域

9.自帶驗證功能 郵箱 ?網址 ?數字

10.滑塊 ?

11.search搜索框

12.隱藏域

13.只讀與禁用

14.標注

15.驗證

---

1.文本框

姓名:<input type="text" name="userName" ?maxlength="6"/>

2.密碼框

密碼:<input type="password" name="mima" maxlength="6"/>

3.單選按鈕 ? checked

男<input type="radio" name="sex" value="男"/>
女<input type="radio" name="sex" value="女"/>
?一組name值相同，必須指定value值 ? ? name=value(sex=男)
?

4.復選框 ? checked

<p>
? ? <input type="checkbox" name="hobby" value="music"/>音樂
? ? <input type="checkbox" name="hobby" value="game"/>游戲
? ? ?<input type="checkbox" name="hobby" value="swim"/>游泳
</p>
? name=value ?一組name值相同，必須指定value值

?

5.列表框 ? selected

?<select name="month">
? ? ?<option value="1">一月</option>
? ? ?<option value="2">二月</option>
?</select> ? （month=1）

?

6.按鈕

<input type="reset" ?value="重置"/>
<input type="submit" value="提交"/>
<input type="button" name="彈框" οnclick="alert(this.value)"/>
<input type="image" src="images/login.gif"/> 圖片按鈕具有提交功能

?

7.文本域

<textarea name="jieshao" rows="6" cols="30">

</textarea>

8.文件域

<form action="" method="post" enctype="multipart/form-data">
? ? <p>
? ? ? ? <input type="file" name="files"/><br/>
? ? ? ? <input type="submit" name="upload" value="上傳"/>
? ? </p>
</form>

9.自帶驗證功能 郵箱 ?網址 ?數字

?郵箱: <input type="email" name="eamil"/>
?請輸入你的網址: <input type="url" name="userUrl"/>
?請輸入數字: <input type="number" name="num" min="0" max="10" step="2"/>

10.滑塊 ?

?請輸入數字：<input type="range" name="range1" min="0" max="10" step="2"/>

11.search搜索框

? <input type="search"/> ?跟text文本框類似

12.隱藏域

<p><input type="hidden" name="id" value="888"/></p>

13.只讀與禁用

?<P>用戶名：<input name="name" type="text" value="張三" readonly></P>
? <p><input type="submit" value="修改" disabled/></p>

14.標注

<label for="nan">男</label><input type="radio" name="sex" value="男" id="nan"/>
<label for="nv">女</label><input type="radio" name="sex" value="女" id="nv"/>

15.驗證

?placeholder ? ?required（非空驗證） pattern正則表達式

總結

以上是生活随笔為你收集整理的HTML中From表单的常用type属性及用法【较全】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。