<input>标签拾遗(上)

来源:互联网 发布:网络斗牛公式编程原理 编辑:程序博客网 时间:2024/05/16 08:51


浏览器支持:

所有的浏览器都支持input标签



定义和用法

<input> 标签用于搜集用户信息。

根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。


HTML 与 XHTML 之间的差异

在 HTML 中,<input> 标签没有结束标签。

在 XHTML 中,<input> 标签必须被正确地关闭。


文本域(Text fields)
本例演示如何在 HTML 页面创建文本域。用户可以在文本域写入文本。
<html><body><form>名:<input type="text" name="firstname">
</form>

<br />姓:<input type="text" name="lastname"></form></body></html>

效果预览如下:

密码域
本例演示如何创建 HTML 的密码域。

<input type="password" name="password">


复选框
本例演示如何在 HTML 页中创建文本框。用户可以选中或取消选取复选框。

<input type="checkbox" name="Bike"><br />我喜欢汽车:<input type="checkbox" name="Car"></form>


单选按钮
本例演示如何在 HTML 中创建单选按钮。
<html><body><form>男性:<input type="radio" checked="checked" name="Sex" value="male" /><br />女性:<input type="radio" name="Sex" value="female" /></form><p>当用户点击一个单选按钮时,该按钮会变为选中状态,其他所有按钮会变为非选中状态。</p></body></html>

在同类选择其中name值相同的时候可以保证单选,如果name值不一样,则每个不同name值的单选框都可显示单选。
<form>喜欢:<input type="radio" checked="checked2" name="like" value="like" /><br />不喜欢:<input type="radio" name="onlike" value="nolike" /></form>
如下图结果: