HTML <input> 标签的 type 属性

HTML <input> 标签的 type 属性 HTML <input> 标签的 type 属性

HTML <input> 标签

实例

下面的表单拥有两个输入字段以及一个提交按钮：

<form action="form_action.asp" method="get">

  <p>First name: <input type="text" name="fname" /></p>

  <p>Last name: <input type="text" name="lname" /></p>

  <input type="submit" value="Submit" />

</form>

亲自试一试

定义和用法

type 属性规定 input 元素的类型。

语法

<input type="value">

属性值 值 描述 button 定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。

checkbox 定义复选框。

file 定义输入字段和 "浏览"按钮，供文件上传。

hidden 定义隐藏的输入字段。

image 定义图像形式的提交按钮。

password 定义密码字段。

该字段中的字符被掩码。

radio 定义单选按钮。

reset 定义重置按钮。

重置按钮会清除表单中的所有数据。

submit 定义提交按钮。

提交按钮会把表单数据发送到服务器。

text 定义单行的输入字段，用户可在其中输入文本。

默认宽度为 20 个字符。

Text

<input type="text" /> 定义用户可输入文本的单行输入字段。

Email: <input type="text" name="email" />

Pin: <input type="text" name="pin" />

TIY

Button

<input type="button" /> 定义可点击的按钮，但没有任何行为。

button 类型常用于在用户点击按钮时启动 JavaScript 程序。

<input type="button" value="Click me" onclick="msg()" />

TIY

Checkbox

<input type="checkbox" /> 定义复选框。

复选框允许用户在一定数目的选择中选取一个或多个选项。

<input type="checkbox" name="vehicle" value="Bike" /> I have a bike

<input type="checkbox" name="vehicle" value="Car" /> I have a car

TIY

File

<input type="file" /> 用于文件上传。

<input type="file" />

TIY

Hidden

<input type="hidden" /> 定义隐藏字段。

隐藏字段对于用户是不可见的。

隐藏字段通常会存储一个默认值，它们的值也可以由 JavaScript 进行修改。

<input type="hidden" name="country" value="Norway" />

TIY

Image

<input type="image" /> 定义图像形式的提交按钮。

必须把 src 属性 和 alt 属性 与 <input type="image"> 结合使用。

<input type="image" src="submit.gif" alt="Submit" />

TIY

Password

<input type="password" /> 定义密码字段。

密码字段中的字符会被掩码（显示为星号或原点）。

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

TIY

Radio

<input type="radio" /> 定义单选按钮。

单选按钮允许用户选取给定数目的选择中的一个选项。

<input type="radio" name="sex" value="male" /> Male
<input type="radio" name="sex" value="female" /> Female

TIY

Reset Button

<input type="reset" /> 定义重置按钮。

重置按钮会清除表单中的所有数据。

<input type="reset" />

TIY

Submit

<input type="submit" /> 定义提交按钮。

提交按钮用于向服务器发送表单数据。

数据会发送到表单的 action 属性中指定的页面。

<form action="form_action.asp" method="get">

Email: <input type="text" name="email" />

<input type="submit" />

</form>

TIY

HTML <input> 标签