hztech

导航

HTML之表单元素

转载地址:http://www.cnblogs.com/kissdodog/archive/2013/01/10/2854917.html

一、文本域

<input type="text" name="text" value="" />

二、密码域

  密码跟文本框类似,但是在里面输入的内容显示为圆点。

<input type="password" name="text" value="" />

三、单选按钮

男人:<input type="radio" name="sex" value="male" /> Male
<br />
女人:<input type="radio" name="sex" value="female" /> Female

四、复选框

<input type="checkbox" name="check1" value="" />

五、按钮

<input type="button" value="确认" />

六、重置按钮

  当点击重置按钮时,重置按钮所在的表单将全部清空,而其他表单不受影响。

<input type="reset" value="重置" />

七、提交按钮

  当点击提交按钮时,浏览器将自动提交表单。

<input type="submit" value="提交" />

八、隐藏域

  隐藏域在浏览器中并不显示,仅仅为保存一些不太重要的资料而存在。

<input type="hidden" value="我是一个隐藏域" />

九、上传域

<input type="file" value="" />

十、图片按钮

<input type="image" src="123.gif" />

十一、下拉列表

<select>
   <option value="0">0</option>
   <option value="1">1</option>
   <option value="2">2</option>
</select>     

  

属性 可选值 说明

disabled

disabled 规定禁用该下拉列表。
multiple multiple 规定可选择多个选项。 
name name 规定下拉列表的名称。 
size number 规定下拉列表中可见选项的数目。

十二、label

   label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。例如,当将单选按钮放在label内。 则点击label内的文字也会触发单选按钮,而不必只是点中小圆点。

<p><label><input type="radio" name="male" />男人</label></p>
<p><label><input type="radio" name="male" />女人</label></p>

女人

也可以写成这样

复制代码
<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>
复制代码

posted on 2015-04-01 22:54  TheViolin  阅读(161)  评论(0编辑  收藏  举报