HTML <input> 标签的 type 属性

本文详细介绍了HTML中input元素的type属性及其各种值的应用场景,包括文本框、密码框、按钮、复选框等,并提供了丰富的示例代码。

http://www.w3school.com.cn/tags/att_input_type.asp

 

定义和用法

type 属性规定 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>

亲自试一试 (您在页面下面可以找到更多例子)

语法

<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" οnclick="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>
HTML 中,`<input>` 标签的 `class` 属性用于为输入元素分配一个或多个类名,以便通过 CSS 样式化或通过 JavaScript 进行操作。该属性在网页开发中具有广泛的用途,尤其是在表单设计、交互控制和样式管理方面。 ### 样式控制 通过 `class` 属性,可以为 `<input>` 元素应用特定的 CSS 样式。例如,开发者可以定义一个 `.highlight` 类来突出显示某些输入框: ```css .highlight { border: 2px solid #ff0000; background-color: #fff0f0; } ``` 在 HTML 中使用该类名的输入框将自动应用这些样式: ```html <input type="text" class="highlight" /> ``` 这种做法提高了样式的可复用性和维护性,使得多个输入框可以共享相同的视觉样式[^5]。 ### 表单验证 `class` 属性也常用于标识需要特定验证逻辑的输入字段。例如,一个类名为 `mustInputNumber` 的 `<input>` 元素可能用于确保用户输入的是数字: ```html <input type="text" class="mustInputNumber" /> ``` 通过 JavaScript,可以针对该类名进行统一的输入限制: ```javascript document.querySelectorAll('input.mustInputNumber').forEach(input => { input.addEventListener('input', function() { if (!/^\d*$/.test(this.value)) { this.value = this.value.replace(/[^\d]/g, ''); } }); }); ``` 这种方式可以集中管理输入验证逻辑,提高代码的可读性和可维护性[^1]。 ### 交互控制 `class` 属性还常用于 JavaScript 控制输入元素的交互行为。例如,通过为某些 `<input>` 添加 `.disabled` 类,可以在 CSS 中定义禁用状态的样式: ```css .disabled { background-color: #e0e0e0; cursor: not-allowed; } ``` JavaScript 可以根据类名动态切换输入框的状态: ```javascript const input = document.querySelector('input'); input.classList.add('disabled'); ``` 这种机制使得 UI 状态的切换更加灵活和可控[^3]。 ### 与 `<label>` 配合使用 `class` 属性还可以与 `<label>` 标签配合使用,以实现更友好的表单交互体验。例如,通过 JavaScript 动态修改 `<label>` 的样式或内容,以反映输入框的状态: ```html <label for="username" class="input-label">用户名</label> <input type="text" id="username" class="input-field" /> ``` 当用户输入错误,可以通过类名 `.error` 来高亮输入框和对应的标签: ```javascript document.querySelector('.input-field').classList.add('error'); document.querySelector('.input-label').textContent = '请输入有效用户名'; ``` 这种做法提升了表单的可访问性和用户体验[^4]。 ### 与其他标签的联动 `<input>` 的 `class` 属性还可以与其他 HTML 标签(如 `<div>`、`<p>`、`<ul>` 等)配合使用,实现动态内容更新。例如,当用户在输入框中输入内容,可以通过 JavaScript 更新 `<div>` 或 `<p>` 中的显示内容: ```html <input type="text" class="live-input" /> <p class="preview-text"></p> ``` JavaScript 可以监听输入事件并更新预览文本: ```javascript document.querySelector('.live-input').addEventListener('input', function() { document.querySelector('.preview-text').textContent = this.value; }); ``` 这种机制在实预览、搜索建议等场景中非常常见[^1]。 ### 相关问题
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值