input标签教程：HTML表单输入的基本指南-原创手记-慕课网

概述

本文详细介绍了input标签的基础概念和基本语法结构，涵盖了多种input类型及其使用场景，提供了丰富的示例代码和属性详解。此外，文章还讲解了如何使用CSS和JavaScript对input标签进行样式控制和表单验证。input标签教程在此全面展开。

引入HTML表单和input标签

表单的定义和作用

HTML表单是一种允许用户输入数据并将其提交到服务器的用户界面元素。表单通常包含多个输入控件，如文本框、下拉列表、复选框、单选按钮等。表单提交的数据可以用于各种用途，例如发送电子邮件、搜索数据库、提交表单数据到服务器等。

HTML表单由<form>标签定义，包含一系列输入控件和其他表单元素。表单的数据通常会以URL编码的形式发送到服务器上的指定处理程序。

input标签的基础概念

<input>标签是HTML中最常用的标签之一，用于创建各种输入控件。这些输入控件允许用户在表单中输入信息。<input>标签是自闭合标签，不需要结束标签。

input标签的基本语法结构

<input>标签的基本语法如下：

<input type="text" name="username" id="username" value="" />

type 属性定义输入控件的类型，例如文本框、密码框等。
name 属性定义输入控件的名称，用于提交数据时识别该字段。
id 属性定义输入控件的唯一标识符，用于CSS样式选择和JavaScript脚本引用。
value 属性定义输入控件的默认值。

常见的input类型和使用场景

text类型：用于文本输入

type="text" 用于一般的文本输入，是最常见的输入类型。用户可以在此输入任何文本，例如姓名、地址等。

示例代码：

<form action="/submit" method="post">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" />
  <br>
  <label for="email">邮箱：</label>
  <input type="text" id="email" name="email" />
</form>

password类型：用于密码输入

type="password" 用于输入密码，输入内容将以星号（*）的形式展示，保护密码的安全性。

示例代码：

<form action="/submit" method="post">
  <label for="password">密码：</label>
  <input type="password" id="password" name="password" />
</form>

checkbox类型：用于复选框

type="checkbox" 用于创建复选框，用户可以选择多个选项。

示例代码：

<form action="/submit" method="post">
  <label>
    <input type="checkbox" name="option1" value="option1" />
    选项1
  </label>
  <br>
  <label>
    <input type="checkbox" name="option2" value="option2" />
    选项2
  </label>
  <br>
  <label>
    <input type="checkbox" name="option3" value="option3" />
    选项3
  </label>
</form>

radio类型：用于单选按钮

type="radio" 用于创建单选按钮，用户只能选择一个选项。

示例代码：

<form action="/submit" method="post">
  <label>
    <input type="radio" name="gender" value="male" />
    男
  </label>
  <br>
  <label>
    <input type="radio" name="gender" value="female" />
    女
  </label>
</form>

submit类型：用于提交按钮

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

示例代码：

<form action="/submit" method="post">
  <input type="submit" value="提交" />
</form>

input标签的属性详解

name属性：指定输入字段的名字

name 属性定义输入控件的名称，用于提交数据时识别该字段。这个名字会作为键，输入的内容作为值，发送到服务器。

示例代码：

<form action="/submit" method="post">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" />
</form>

value属性：设置输入字段的默认值

value 属性定义输入控件的默认值。用户可以在此基础上进行修改。

示例代码：

<form action="/submit" method="post">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" value="defaultUser" />
</form>

id属性：为输入字段设置ID

id 属性定义输入控件的唯一标识符，用于CSS样式选择和JavaScript脚本引用。每个输入控件的id应该是唯一的。

示例代码：

<form action="/submit" method="post">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" value="defaultUser" />
</form>

size属性：设置输入字段的可见宽度

size 属性定义输入控件的可见宽度（以字符数量为单位）。这不会影响用户输入的字符数量，只是决定了输入框在页面上的显示宽度。

示例代码：

<form action="/submit" method="post">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" value="defaultUser" size="20" />
</form>

placeholder属性：设置输入框提示文本

placeholder 属性定义输入控件的提示文本，当输入框为空时显示提示信息。

示例代码：

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

disabled属性：禁用输入控件

disabled 属性用于禁用输入控件，使其无法被用户修改。

示例代码：

<form action="/submit" method="post">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" value="readonlyUser" disabled />
</form>

input标签的样式控制

通过CSS，可以自定义输入控件的样式，如背景颜色、边框颜色、字体大小等。例如，使用CSS设置输入框的背景颜色为蓝色。

示例代码：

<style>
  input[type="text"] {
    background-color: lightblue;
    border: 1px solid #000;
    padding: 5px;
    font-size: 16px;
  }
</style>

<form action="/submit" method="post">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" value="defaultUser" size="20" />
</form>

通过CSS，可以进一步自定义输入控件的样式，例如设置圆角边框、阴影效果等，以匹配网站的整体设计风格。

示例代码：

<style>
  input[type="text"] {
    background-color: lightblue;
    border: 1px solid #000;
    padding: 5px;
    font-size: 16px;
    border-radius: 5px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    font-family: Arial, sans-serif;
    color: #333;
  }
</style>

<form action="/submit" method="post">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" value="defaultUser" size="20" />
</form>

实战演练：创建简单的登录表单

使用input标签构建用户名和密码输入框

创建一个简单的登录表单，包括用户名和密码输入框。

示例代码：

<form action="/login" method="post">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" value="" placeholder="请输入用户名" />
  <br>
  <label for="password">密码：</label>
  <input type="password" id="password" name="password" value="" placeholder="请输入密码" />
  <br>
  <input type="submit" value="登录" />
  <script>
    function validateForm() {
      var username = document.forms["loginForm"]["username"].value;
      var password = document.forms["loginForm"]["password"].value;
      if (username == "" || password == "") {
        alert("用户名和密码不能为空");
        return false;
      }
    }
  </script>
</form>

通过以上步骤，你已经成功创建了一个简单的登录表单，并对其进行了基本的样式美化和输入验证。这个表单可以进一步扩展和完善，以适应更多的需求和场景。如果你想要进一步学习前端开发相关知识，可以参考慕课网上的相关课程。