input标签有哪些类型？文本框和按钮怎么设置？-html教程-PHP中文网

input标签有哪些类型？文本框和按钮怎么设置？

小老鼠

发布： 2025-08-07 09:25:01

原创

489人浏览过

文本框通过type="text"或type="password"设置，常用属性包括id、name、value和placeholder；2. 按钮类型包括type="button"、"submit"、"reset"及使用<button>标签创建的按钮，可结合onclick等事件触发操作；3. 其他常用input类型有number、email、date、radio、checkbox和file，分别用于数字输入、邮箱验证、日期选择、单选、多选和文件上传；4. 使用css可通过属性选择器和伪类美化input样式，如设置宽高、边框、焦点效果及自定义placeholder；5. javascript可动态控制input元素，包括获取和设置值、监听input和blur事件、表单验证以及动态创建和插入元素，从而实现丰富交互。

input标签有哪些类型？文本框和按钮怎么设置？

input标签类型繁多，文本框和按钮的设置方式也各有千秋。掌握这些，能让你在前端开发的道路上更加得心应手。

解决方案

<input>

登录后复制

标签是 HTML 中用于创建交互式表单控件的关键元素。它根据

type

登录后复制

属性的不同，可以呈现出多种不同的输入形式。理解这些类型及其对应的属性，对于构建用户友好的表单至关重要。

文本框是最常见的输入类型，而按钮则用于触发特定的操作。下面详细介绍它们的设置方法。

文本框的设置

文本框主要使用

type="text"

登录后复制

和

type="password"

登录后复制

两种类型。

```
type="text"
```
登录后复制
: 用于单行文本输入。
登录后复制
- ```
id
```
  登录后复制
  : 元素的唯一标识符，用于 JavaScript 或 CSS 操作。
- ```
name
```
  登录后复制
  : 表单提交时，用于标识输入字段的名称。
- ```
value
```
  登录后复制
  : 文本框的默认值。
- ```
placeholder
```
  登录后复制
  : 在输入框为空时显示的提示文本。
```
type="password"
```
登录后复制
: 用于密码输入，输入的内容会被隐藏。
登录后复制
属性与
```
type="text"
```
登录后复制
基本相同，但为了安全起见，通常不设置
```
value
```
登录后复制
属性。

按钮的设置

<input>

登录后复制

标签提供了多种按钮类型，以及

<button>

登录后复制

标签，各有特点。

```
type="button"
```
登录后复制
: 定义一个普通按钮，通常与 JavaScript 配合使用。
登录后复制
- ```
value
```
  登录后复制
  : 按钮上显示的文本。
- ```
onclick
```
  登录后复制
  : 点击按钮时执行的 JavaScript 代码。
```
type="submit"
```
登录后复制
: 定义一个提交按钮，用于将表单数据提交到服务器。
登录后复制
该按钮会自动提交包含它的表单。
```
type="reset"
```
登录后复制
: 定义一个重置按钮，用于将表单字段重置为默认值。
登录后复制
点击后，表单中的所有字段都会恢复到初始状态。
```
<button>
```
登录后复制
标签: 提供了更灵活的按钮创建方式，可以包含 HTML 内容。
登录后复制
- ```
type
```
  登录后复制
  : 可以设置为
```
button
```
  登录后复制
  、
```
submit
```
  登录后复制
  或
```
reset
```
  登录后复制
  ，功能与
```
<input>
```
  登录后复制
  标签相同。
- 可以包含文本、图像等任何 HTML 内容。

除了文本框和按钮，input 标签还有哪些常用的类型？

<input>

登录后复制

标签远不止文本框和按钮。还有一些常用的类型，它们在构建功能丰富的表单时发挥着重要作用。

爱改写

AI写作和改写润色工具

查看详情

```
type="number"
```
登录后复制
: 用于输入数字。
登录后复制
- ```
min
```
  登录后复制
  : 允许的最小值。
- ```
max
```
  登录后复制
  : 允许的最大值。
- ```
step
```
  登录后复制
  : 每次增加或减少的值。
- ```
value
```
  登录后复制
  : 默认值。
```
type="email"
```
登录后复制
: 用于输入电子邮件地址。浏览器会自动验证输入是否符合电子邮件格式。
登录后复制
```
type="date"
```
登录后复制
: 用于选择日期。
登录后复制
浏览器会提供一个日期选择器。
```
type="radio"
```
登录后复制
: 用于单项选择。
```
男

女
```
登录后复制
- ```
name
```
  登录后复制
  : 同一组单选按钮必须具有相同的
```
name
```
  登录后复制
  属性。
- ```
value
```
  登录后复制
  : 每个选项对应的值。
- ```
label
```
  登录后复制
  : 使用
```
<label>
```
  登录后复制
  标签关联单选按钮，提高用户体验。
```
type="checkbox"
```
登录后复制
: 用于多项选择。
```
同意协议
```
登录后复制
- ```
value
```
  登录后复制
  : 选中复选框时对应的值。
```
type="file"
```
登录后复制
: 用于选择文件。
登录后复制
- ```
accept
```
  登录后复制
  : 指定允许选择的文件类型。例如，
```
image/*
```
  登录后复制
  表示只允许选择图像文件。

如何使用 CSS 美化 input 标签？

HTML 提供的默认样式通常比较朴素，使用 CSS 可以轻松美化

<input>

登录后复制

标签，提升用户界面的美观度。

修改文本框的样式:

input[type="text"], input[type="password"] {
    width: 200px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* 防止 padding 撑大元素 */
    margin-bottom: 10px;
    font-size: 16px;
}

input[type="text"]:focus, input[type="password"]:focus {
    border-color: #66afe9;
    outline: none; /* 移除默认的 focus 样式 */
    box-shadow: 0 0 5px rgba(102, 175, 233, 0.5); /* 添加阴影效果 */
}

登录后复制

使用属性选择器
```
input[type="text"]
```
登录后复制
可以针对特定类型的
```
input
```
登录后复制
标签应用样式。
```
:focus
```
登录后复制
伪类用于设置元素获得焦点时的样式。

修改按钮的样式:

input[type="submit"], button {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

input[type="submit"]:hover, button:hover {
    background-color: #3e8e41;
}

登录后复制

```
cursor: pointer;
```
登录后复制
将鼠标悬停在按钮上时显示为手型。
```
:hover
```
登录后复制
伪类用于设置鼠标悬停时的样式。

自定义 placeholder 样式:

input::placeholder { /* 现代浏览器 */
    color: #bbb;
    font-style: italic;
}

input:-ms-input-placeholder { /* Internet Explorer */
    color: #bbb;
    font-style: italic;
}

input::-webkit-input-placeholder { /* Chrome, Safari, Opera */
    color: #bbb;
    font-style: italic;
}

登录后复制

使用
```
::placeholder
```
登录后复制
(或旧版本的浏览器兼容写法) 可以自定义 placeholder 的样式。

如何使用 JavaScript 动态控制 input 标签？

JavaScript 提供了强大的能力来动态控制

<input>

登录后复制

标签，实现更复杂的交互效果。

获取 input 元素的值:

const usernameInput = document.getElementById("username");
const username = usernameInput.value;
console.log(username);

登录后复制

使用
```
document.getElementById()
```
登录后复制
获取元素。
使用
```
element.value
```
登录后复制
获取输入框的值。

设置 input 元素的值:
```
usernameInput.value = "新的用户名";
```
登录后复制
- 直接修改
```
element.value
```
  登录后复制
  即可改变输入框的值。
监听 input 元素的事件:
```
usernameInput.addEventListener("input", function() {
    console.log("输入框的值发生了变化：", this.value);
});
```
登录后复制
- ```
input
```
  登录后复制
  事件在输入框的值发生变化时触发。
- ```
this
```
  登录后复制
  关键字指向触发事件的元素。

验证 input 元素的值:

const emailInput = document.getElementById("email");
emailInput.addEventListener("blur", function() { // 失去焦点时验证
    const email = this.value;
    if (!isValidEmail(email)) {
        alert("请输入有效的邮箱地址");
        this.focus(); // 重新聚焦
    }
});

function isValidEmail(email) {
    // 简单的邮箱验证正则
    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return regex.test(email);
}

登录后复制

```
blur
```
登录后复制
事件在元素失去焦点时触发。
可以使用正则表达式验证输入的值是否符合特定格式。
```
element.focus()
```
登录后复制
使元素获得焦点。

动态创建 input 元素:

const newInput = document.createElement("input");
newInput.type = "text";
newInput.id = "newInput";
newInput.name = "newInput";
newInput.placeholder = "动态创建的输入框";

const container = document.getElementById("container");
container.appendChild(newInput);

登录后复制