<input>的type属性

最新推荐文章于 2025-09-23 22:24:18 发布

原创最新推荐文章于 2025-09-23 22:24:18 发布 · 1.3k 阅读

7 ·

CC 4.0 BY-SA版权

本文介绍了HTML表单中各种input类型的使用方法及其应用场景，包括文本输入、密码字段、单选按钮、复选框、重置按钮等，并通过示例展示了如何在网页中正确使用这些表单元素。

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

语法：

<input type="value">

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

<form action="/example/html/form_action.asp" 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>

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

<form action="/example/html/form_action.asp" method="get">
  Email: <input type="text" name="email" /><br />
  Password: <input type="password" name="pwd" maxlength="8" /><br />
  <input type="submit" value="Submit" />
</form>

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

<form action="/example/html/form_action.asp" method="get">
  <input type="radio" /> 苹果<br />
  <input type="radio" /> 香蕉<br />
  <input type="submit" value="Submit" />
</form>

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

<form action="/example/html/form_action.asp" method="get">
<input type="checkbox" name="fruits"  /> 苹果<br />
<input type="checkbox" name="fruits" /> 香蕉<br />
<input type="checkbox" name="fruits"  /> 梨<br />
<input type="submit" value="Submit" />
</form>

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

<input type="reset" />

Button 定义可点击的按钮，但没有任何行为。

<input type="button" />

Submit 定义提交按钮。提交按钮用于向服务器发送表单数据。数据会发送到表单的 action 属性中指定的页面。

<form action="/example/html/form_action.asp" 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>