HTML输入标签入门：轻松掌握input标签的基础用法

本文详细介绍了input标签入门的相关知识，包括其基本结构、常见类型以及常用属性。通过实例演示和练习题，帮助读者轻松掌握input标签在HTML中的基础用法，涵盖了文本框、密码框、复选框和单选按钮等常见输入控件的使用方法。

什么是HTML输入标签

HTML输入标签（<input>）是HTML中最常用的标签之一，用于在网页中创建各种类型的输入控件。这些控件允许用户输入数据或选择某些选项，例如文本框、单选按钮、复选框等。通过使用不同的属性，可以定义输入控件的具体类型和行为。

HTML输入标签是表单的重要组成部分，用户可以在表单中输入信息，如用户名、密码、电子邮件地址等。当用户提交表单时，输入的数据将被发送到服务器进行处理和验证。

input标签的基本结构

HTML输入标签的基本结构如下所示：

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

该标签的语法包括：

• <input>：表示一个输入控件。
• type：定义输入控件的类型。
• name：定义输入控件的名称。在表单提交时，此名称将作为键名传递数据。
• id：定义输入控件的唯一标识符。可以通过CSS或JavaScript来引用输入控件。
• value：定义输入控件的初始值。例如，当用户打开网页时，输入控件中显示的默认文本。
• 其他可选属性：如placeholder、readonly等。

HTML输入标签支持多种类型，每种类型对应不同的用户输入方式。以下是一些常见的type属性值及其用途：

text类型

type="text"是默认的输入类型，用于输入文本数据：

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

password类型

type="password"通常用于输入密码，输入框中会显示星号（*）而不是实际输入的字符，以保护敏感信息：

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

checkbox类型

type="checkbox"用于创建复选框，允许用户选择一个或多个选项：

<input type="checkbox" name="agree" id="agree" value="同意">
<label for="agree">我同意条款</label>

radio类型

type="radio"用于创建单选按钮，允许用户从一组选项中选择一个选项：

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

submit类型

type="submit"用于创建提交按钮，用户点击按钮时将提交表单数据：

<input type="submit" name="submit" id="submit" value="提交">

hidden类型

type="hidden"用于创建隐藏的输入控件，用户不可见，但其值会随表单一起提交：

<input type="hidden" name="hiddenField" id="hiddenField" value="隐藏信息">

date类型

type="date"用于创建日期输入控件，用户可以输入日期：

<input type="date" name="dateOfBirth" id="dateOfBirth" value="2023-01-01">

email类型

type="email"用于创建电子邮件输入控件，用户输入的值会自动进行电子邮件格式验证：

<input type="email" name="email" id="email" value="请输入邮箱">

type属性

type属性定义了输入控件的类型。根据不同的type值，输入控件会显示不同的样式和功能。常见type值包括：

• text：文本输入框。
• password：密码输入框。
• checkbox：复选框。
• radio：单选按钮。
• submit：提交按钮。
• hidden：隐藏输入控件。
• date：日期输入控件。
• email：电子邮件输入控件。

<input type="text" name="username" id="username" value="请输入用户名">
<input type="password" name="password" id="password" value="请输入密码">
<input type="checkbox" name="agree" id="agree" value="同意">
<label for="agree">我同意条款</label>
<input type="radio" name="gender" id="male" value="男">
<label for="male">男</label>
<input type="radio" name="gender" id="female" value="女">
<label for="female">女</label>
<input type="submit" name="submit" id="submit" value="提交">
<input type="hidden" name="hiddenField" id="hiddenField" value="隐藏信息">
<input type="date" name="dateOfBirth" id="dateOfBirth" value="2023-01-01">
<input type="email" name="email" id="email" value="请输入邮箱">

value属性

value属性定义了输入控件的初始值或默认值。当用户打开网页时，输入控件中会显示这个默认值。

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

name属性

name属性定义了输入控件的名称。在表单提交时，输入控件的值将通过名称和值的形式作为键值对发送到服务器。

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

id属性

id属性定义了输入控件的唯一标识符。可以通过CSS或JavaScript来引用输入控件。需要注意的是，同一个页面中每个id的值必须是唯一的。

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

利用input标签创建用户名和密码输入框

要创建一个简单的HTML登录表单，需要定义两个输入控件，一个用于输入用户名，另一个用于输入密码。用户名输入控件的type属性设置为text，密码输入控件的type属性设置为password。

<form>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" value="请输入用户名">

    <label for="password">密码：</label>
    <input type="password" id="password" name="password" value="请输入密码">
</form>

添加提交按钮

为了提交表单数据，需要在表单中添加一个提交按钮。设置type属性为submit，并提供相应的值。

<form>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" value="请输入用户名">

    <label for="password">密码：</label>
    <input type="password" id="password" name="password" value="请输入密码">

    <input type="submit" id="submit" name="submit" value="登录">
</form>

添加其他输入控件

为了进一步完善表单，可以添加其他类型的输入控件，如复选框和单选按钮。

<form>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" value="请输入用户名">

    <label for="password">密码：</label>
    <input type="password" id="password" name="password" value="请输入密码">

    <label for="agree">我同意条款：</label>
    <input type="checkbox" id="agree" name="agree" value="同意">
    <label for="agree">我同意条款</label>

    <br>

    <label for="gender">性别：</label>
    <input type="radio" id="male" name="gender" value="男">
    <label for="male">男</label>
    <input type="radio" id="female" name="gender" value="女">
    <label for="female">女</label>

    <br>

    <input type="submit" id="submit" name="submit" value="提交">
</form>

增加CSS和JavaScript

为了确保表单在不同浏览器中的表现一致，可以使用CSS。例如，统一输入框的宽度、高度、边框等样式。

<style>
    input[type="text"], input[type="password"] {
        width: 200px;
        height: 30px;
        border: 1px solid #ccc;
        padding: 5px;
        box-sizing: border-box;
    }
</style>

<form>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" value="请输入用户名">

    <label for="password">密码：</label>
    <input type="password" id="password" name="password" value="请输入密码">

    <label for="agree">我同意条款：</label>
    <input type="checkbox" id="agree" name="agree" value="同意">
    <label for="agree">我同意条款</label>

    <br>

    <label for="gender">性别：</label>
    <input type="radio" id="male" name="gender" value="男">
    <label for="male">男</label>
    <input type="radio" id="female" name="gender" value="女">
    <label for="female">女</label>

    <br>

    <input type="submit" id="submit" name="submit" value="提交">
</form>

如何让input标签有默认值

要设置输入控件的默认值，可以使用value属性。例如，给用户名和密码输入框设置默认值：

<form>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" value="请输入用户名">

    <label for="password">密码：</label>
    <input type="password" id="password" name="password" value="请输入密码">

    <input type="submit" id="submit" name="submit" value="登录">
</form>

如何使input标签在不同浏览器中表现一致

由于不同浏览器可能对HTML标签的解释和渲染方式有所不同，因此为了确保输入标签在不同浏览器中的表现一致，可以使用CSS。例如，统一输入框的宽度、高度、边框等样式，并使用box-sizing属性确保一致的表现。

<style>
    input[type="text"], input[type="password"] {
        width: 200px;
        height: 30px;
        border: 1px solid #ccc;
        padding: 5px;
        box-sizing: border-box;
    }
</style>

<form>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" value="请输入用户名">

    <label for="password">密码：</label>
    <input type="password" id="password" name="password" value="请输入密码">

    <input type="submit" id="submit" name="submit" value="登录">
</form>

本章内容总结

本章介绍了HTML输入标签的基础知识，包括输入标签的基本结构、常见的输入类型（如text、password、checkbox、radio、submit、hidden、date、email）、以及输入标签的常见属性（如type、value、name、id）。通过实例演示，学习了如何创建简单的登录表单，并解决了常见的问题，如设置默认值和统一浏览器表现。

练习题：尝试创建一个包含多种input类型的小型表单

为了进一步加深对输入标签的理解，尝试创建一个包含多种输入类型的表单，如用户名、密码输入框、复选框、单选按钮和提交按钮。确保每个输入控件都有相应的name和id属性，并设置适当的默认值。

<style>
    input[type="text"], input[type="password"] {
        width: 200px;
        height: 30px;
        border: 1px solid #ccc;
        padding: 5px;
        box-sizing: border-box;
    }
</style>

<form>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" value="请输入用户名">

    <label for="password">密码：</label>
    <input type="password" id="password" name="password" value="请输入密码">

    <label for="agree">我同意条款：</label>
    <input type="checkbox" id="agree" name="agree" value="同意">
    <label for="agree">我同意条款</label>

    <br>

    <label for="gender">性别：</label>
    <input type="radio" id="male" name="gender" value="男">
    <label for="male">男</label>
    <input type="radio" id="female" name="gender" value="女">
    <label for="female">女</label>

    <br>

    <input type="submit" id="submit" name="submit" value="提交">
</form>

通过完成本练习题，可以更好地掌握HTML输入标签的基本用法。如果需要进一步的学习和实践，可以参考慕课网的课程资源。