HTML <input> 标签的 type 属性 详解
HTML <input> 标签的 type 属性
实例
下面的表单拥有两个输入字段以及一个提交按钮：
<form action="form_action.php" 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>
完整实例【亲自试一试】：
<html>
<body>
<form action="/demo/demo_form.php" 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>
<p>请单击确认按钮，输入会发送到服务器上名为 "demo_form.php 的页面。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
定义和用法
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】：
<html>
<body>
<form action="/demo/demo_form.php" method="get">
<p>Email: <input type="text" name="email" /></p>
<p>Pin: <input type="text" name="pin" maxlength="18" /></p>
<input type="submit" value="Submit" />
</form>
<p>请单击确认按钮，输入会发送到服务器上名为 "demo_form.php 的页面。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
Button
<input type="button" /> 定义可点击的按钮，但没有任何行为。button 类型常用于在用户点击按钮时启动 JavaScript 程序。
<input type="button" value="Click me" onclick="msg()" />
完整实例【TIY】：
<html>
<head>
<script type="text/javascript">
function msg()
{
alert("Hello world!");
}
</script>
</head>
<body>
<form>
<input type="button" value="Click me" onclick="msg()" />
</form>
<p>如果点击上面的按钮，会启动一段 JavaScript。如果您希望学习更多有关 JavaScript 的知识，请访问我们的 JavaScript 教程。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
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】：
<html>
<body>
<form action="/demo/demo_form.php" method="get">
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
<input type="checkbox" name="vehicle" value="Car" /> I have a car<br />
<input type="checkbox" name="vehicle" value="Airplane" /> I have an airplane<br />
<input type="submit" value="Submit" />
</form>
<p>请单击确认按钮，输入会发送到服务器上名为 "demo_form.php 的页面。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
File
<input type="file" /> 用于文件上传。
<input type="file" />
完整实例【TIY】：
<html>
<body>
<form>
<input type="file" name="pic" accept="image/gif" />
</form>
<p><b>注释：</b>出于安全方面的考虑，本例不允许用户上传文件。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
Hidden
<input type="hidden" /> 定义隐藏字段。隐藏字段对于用户是不可见的。隐藏字段通常会存储一个默认值，它们的值也可以由 JavaScript 进行修改。
<input type="hidden" name="country" value="Norway" />
完整实例【TIY】：
<html>
<body>
<form action="/demo/demo_form.php" method="get">
Email: <input type="text" name="email" /><br />
<input type="hidden" name="country" value="China" />
<input type="submit" value="Submit" />
</form>
<p>请单击确认按钮，输入会发送到服务器上名为 "demo_form.php 的页面。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
Image
<input type="image" /> 定义图像形式的提交按钮。
必须把 src 属性 和 alt 属性 与 <input type="image"> 结合使用。
<input type="image" src="submit.gif" alt="Submit" />
完整实例【TIY】：
<html>
<body>
<form action="/demo/demo_form.php" method="get">
<p>First name: <input type="text" name="fname" /></p>
<p>Last name: <input type="text" name="lname" /></p>
<input type="image" src="/i/eg_submit.jpg" alt="Submit" />
</form>
<p>请在这幅图像上单击，输入会发送到服务器上名为 "demo_form.php 的页面。</p>
<p class="note"><span>注释：</span>如果 type 属性设置为 image，当用户单击图像时，浏览器将以像素为单位，将鼠标相对于图像边界的偏移量发送到服务器，其中包括从图像左边界开始的水平偏移量，以及从图像上边界开始的垂直偏移量。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
Password
<input type="password" /> 定义密码字段。密码字段中的字符会被掩码（显示为星号或原点）。
<input type="password" name="pwd" />
完整实例【TIY】：
<html>
<body>
<form action="/demo/demo_form.php" method="get">
Email: <input type="text" name="email" /><br />
Password: <input type="password" name="pwd" maxlength="8" /><br />
<input type="submit" value="Submit" />
</form>
<p>请单击确认按钮，输入会发送到服务器上名为 "demo_form.php 的页面。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
Radio
<input type="radio" /> 定义单选按钮。单选按钮允许用户选取给定数目的选择中的一个选项。
<input type="radio" name="sex" value="male" /> Male
<input type="radio" name="sex" value="female" /> Female
完整实例【TIY】：
<html>
<body>
<form action="/demo/demo_form.php" method="get">
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female<br />
<input type="submit" value="Submit" />
</form>
<p>请单击确认按钮，输入会发送到服务器上名为 "demo_form.php 的页面。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
Reset Button
<input type="reset" /> 定义重置按钮。重置按钮会清除表单中的所有数据。
<input type="reset" />
完整实例【TIY】：
<html>
<body>
<form action="/demo/demo_form.php" method="get">
Email: <input type="text" name="email" /><br />
Pin: <input type="text" name="pin" maxlength="4" /><br />
<input type="reset" value="Reset" />
<input type="submit" value="Submit" />
</form>
<p>请单击重置按钮，可以清空表单。</p>
<p>请单击确认按钮，输入会发送到服务器上名为 "demo_form.php 的页面。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
Submit
<input type="submit" /> 定义提交按钮。提交按钮用于向服务器发送表单数据。数据会发送到表单的 action 属性中指定的页面。
<form action="form_action.asp" method="get">
Email: <input type="text" name="email" />
<input type="submit" />
</form>
完整实例【TIY】：
<html>
<body>
<form action="/demo/demo_form.php" method="get">
<p>Email: <input type="text" name="email" /></p>
<p>Pin: <input type="text" name="pin" maxlength="18" /></p>
<input type="submit" value="Submit" />
</form>
<p>请单击确认按钮，输入会发送到服务器上名为 "demo_form.php 的页面。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
