HTML中From表单的常用type属性及用法【较全】

目录

 

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="弹框" onclick="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正则表达式