HTML基础教程：详解input标签的使用方法-原创手记-慕课网

概述

本文详细介绍了input标签在HTML中的使用方法，包括其基本语法、常见类型和常用属性。通过示例代码展示了文本输入框、密码框、单选按钮、复选框和提交按钮的用法，并探讨了如何使用CSS美化和JavaScript处理input标签的事件。文章还提供了实践小案例，帮助读者理解和应用相关知识。

input标签简介

input标签的作用

<input>标签是HTML中最常用的标签之一，主要用于创建表单控件，如文本框、按钮、单选按钮和复选框等。通过<input>标签，用户可以在网页上输入数据，例如姓名、电子邮件地址、密码等。这些输入的数据可以通过表单提交到服务器进行进一步处理。

input标签的基本语法

<input>标签没有闭合标签，其所有属性和值都放在<>中。基本语法如下：

<input type="text" name="username" value="请输入用户名" />

在这个例子中：

type属性定义了输入控件的类型。
name属性定义了控件的名称，用于提交数据时标识这个输入。
value属性定义了输入框的默认值。

常见的input类型

文本输入框

文本输入框是输入文本最常见的方式。用户可以在文本框中输入任何文本。使用type="text"定义文本输入框。

<input type="text" name="username" value="请输入用户名" />

密码输入框

密码输入框用于输入敏感的信息，如密码。输入的内容将以星号或其他符号显示，而不是实际的字符。使用type="password"定义密码输入框。

<input type="password" name="password" value="请输入密码" />

单选按钮

单选按钮允许用户从一组选项中选择一个选项。当页面上存在多个单选按钮时，只有一个是被选中的。使用type="radio"定义单选按钮。

<input type="radio" name="gender" value="male" /> 男
<input type="radio" name="gender" value="female" /> 女

复选框

复选框允许用户从一组选项中选择多个选项。每个复选框可以独立选择或取消选择。使用type="checkbox"定义复选框。

<input type="checkbox" name="agree" value="agree" /> 我同意服务条款

提交按钮

提交按钮用于提交表单数据。当用户点击提交按钮时，表单数据将被发送到服务器。使用type="submit"定义提交按钮。

<input type="submit" value="提交" />

input标签的属性

type属性

type属性定义了<input>标签的类型，可以是文本框、密码框、单选按钮、复选框或提交按钮等。每个不同的类型都对应不同的输入控件。

<input type="text" name="username" value="请输入用户名" />
<input type="password" name="password" value="请输入密码" />
<input type="radio" name="gender" value="male" /> 男
<input type="radio" name="gender" value="female" /> 女
<input type="checkbox" name="agree" value="agree" /> 我同意服务条款
<input type="submit" value="提交" />

name属性

name属性定义了<input>标签的名字。这个名字用于标识这个<input>标签，当表单提交时，服务器端可以通过这个名字来获取相应的输入值。

<input type="text" name="username" value="请输入用户名" />
<input type="password" name="password" value="请输入密码" />

value属性

value属性定义了输入框的默认值。对于文本框和单选按钮，它可以是输入框中的默认显示文本；对于提交按钮，它可以是按钮上显示的文本。

<input type="text" name="username" value="请输入用户名" />
<input type="submit" value="提交" />

disabled属性

disabled属性用于禁用输入框。禁用的输入框不能被用户修改，也不能被提交。当设置为true时，输入框将被禁用。例如，当用户年龄小于18岁时，可以禁用提交按钮。

<input type="submit" value="提交" disabled />

input标签的样式设置

使用CSS美化input标签

可以使用CSS来美化<input>标签，例如改变输入框的颜色、字体大小、背景颜色等。以下是一些常见的CSS样式：

input[type="text"] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

input[type="password"] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

input[type="submit"] {
    width: 100%;
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
}

常见样式技巧

边框圆角：使用border-radius属性给输入框添加圆角效果。
阴影效果：使用box-shadow属性给输入框添加阴影效果。
背景颜色：使用background-color属性改变输入框的背景颜色。
字体大小和颜色：使用font-size和color属性设置字体大小和颜色。

input标签的事件处理

onclick事件

onclick事件在用户点击输入框时触发。可以使用JavaScript来处理这个事件，例如弹出一个警告框或执行其他操作。

<input type="button" value="点击我" onclick="alert('你点击了按钮！')" />

onchange事件

onchange事件在输入框的内容发生改变时触发。可以使用JavaScript来处理这个事件，例如验证输入框的内容是否符合要求。

<input type="text" name="username" value="请输入用户名" onchange="validateUsername()" />

使用JavaScript与input标签交互

可以通过JavaScript获取输入框的值并进行相应的处理。以下是一个简单的例子，当用户点击按钮时，会弹出输入框的值。

<input type="text" id="username" value="请输入用户名" />
<input type="button" value="点击我" onclick="alert(document.getElementById('username').value)" />

实践小案例

创建一个简单的用户注册表单

首先，编写一个简单的HTML表单，包含用户名、密码、性别和同意服务条款的复选框，以及一个提交按钮。

<!DOCTYPE html>
<html>
<head>
    <title>用户注册表单</title>
    <style>
        input[type="text"],
        input[type="password"] {
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            display: inline-block;
            border: 1px solid #ccc;
            box-sizing: border-box;
        }
        input[type="submit"] {
            width: 100%;
            background-color: #4CAF50;
            color: white;
            padding: 14px 20px;
            margin: 8px 0;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <form>
        <input type="text" name="username" placeholder="请输入用户名" />
        <input type="password" name="password" placeholder="请输入密码" />
        <input type="radio" name="gender" value="male" /> 男
        <input type="radio" name="gender" value="female" /> 女
        <input type="checkbox" name="agree" value="agree" /> 我同意服务条款
        <input type="submit" value="提交" />
    </form>
</body>
</html>

测试表单功能

打开上述HTML文件。
填写用户名和密码。
选择性别。
选择是否同意服务条款。
点击提交按钮。

当用户点击提交按钮时，表单数据将被发送到服务器进行进一步处理。为了实现更复杂的验证和功能，可以结合JavaScript进行处理。例如，可以验证用户名和密码的格式是否正确，或者在提交表单前弹出一个确认对话框。

<!DOCTYPE html>
<html>
<head>
    <title>用户注册表单</title>
    <style>
        input[type="text"],
        input[type="password"] {
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            display: inline-block;
            border: 1px solid #ccc;
            box-sizing: border-box;
        }
        input[type="submit"] {
            width: 100%;
            background-color: #4CAF50;
            color: white;
            padding: 14px 20px;
            margin: 8px 0;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <form id="registrationForm">
        <input type="text" name="username" placeholder="请输入用户名" />
        <input type="password" name="password" placeholder="请输入密码" />
        <input type="radio" name="gender" value="male" /> 男
        <input type="radio" name="gender" value="female" /> 女
        <input type="checkbox" name="agree" value="agree" /> 我同意服务条款
        <input type="submit" value="提交" />
    </form>
    <script>
        document.getElementById('registrationForm').addEventListener('submit', function(event) {
            event.preventDefault();
            // 获取表单数据
            var username = document.querySelector('input[name="username"]').value;
            var password = document.querySelector('input[name="password"]').value;
            var gender = document.querySelector('input[name="gender"]:checked').value;
            var agree = document.querySelector('input[name="agree"]').checked;
            // 验证用户输入
            if (username && password && gender && agree) {
                alert('表单数据已验证，可以提交！');
                // 提交表单
                // 可以使用 fetch 或 XMLHttpRequest 进行 AJAX 请求
            } else {
                alert('表单数据验证失败，请检查您的输入。');
            }
        });
    </script>
</body>
</html>

创建一个登录表单

以下是一个带有验证功能的登录表单示例，展示了如何使用JavaScript来进行登录验证。

<!DOCTYPE html>
<html>
<head>
    <title>用户登录表单</title>
    <style>
        input[type="text"],
        input[type="password"] {
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            display: inline-block;
            border: 1px solid #ccc;
            box-sizing: border-box;
        }
        input[type="submit"] {
            width: 100%;
            background-color: #4CAF50;
            color: white;
            padding: 14px 20px;
            margin: 8px 0;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <form id="loginForm">
        <input type="text" name="username" placeholder="请输入用户名" />
        <input type="password" name="password" placeholder="请输入密码" />
        <input type="submit" value="登录" />
    </form>
    <script>
        document.getElementById('loginForm').addEventListener('submit', function(event) {
            event.preventDefault();
            // 获取表单数据
            var username = document.querySelector('input[name="username"]').value;
            var password = document.querySelector('input[name="password"]').value;
            // 验证用户输入
            if (username && password) {
                alert('登录成功！');
            } else {
                alert('用户名或密码为空，请检查您的输入。');
            }
        });
    </script>
</body>
</html>

通过这些实践，你可以更好地掌握<input>标签的使用方法，并在实际项目中灵活应用。