HTML 登录表单介绍

HTML 的登录表单是 web 开发中常用的重要组件之一。它提供了登录认证的功能，让用户可以输入用户名和密码来验证身份。

HTML 登录表单的基本结构

HTML 登录表单需要使用以下标签组成：

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>

  <br>

  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required>

  <br>

  <button type="submit">Login</button>
</form>

这个表单包含了两个输入框（一个是用户名，一个是密码）和一个提交按钮。

<form> 标签

<form> 标签定义了一个表单。它的 action 属性指定了提交表单的 URL，method 属性指定了提交方法（通常是 "POST" 或 "GET"）。例如：

<form action="/login" method="POST">
  ...
</form>

<label> 标签

<label> 标签用于关联输入控件和标签本身，使得点击标签时光标会自动聚焦到输入控件。使用 for 属性可以实现这个效果。例如：

<label for="username">Username:</label>
<input type="text" id="username" name="username">

<input> 标签

<input> 标签定义了一个输入控件，它的 type 属性指定了输入控件的类型，分别有：

• text：文本输入框
• password：密码输入框
• email：邮箱输入框
• number：数字输入框
• checkbox：复选框
• radio：单选框
• file：文件上传控件

此外，<input> 标签还有 name 属性和 id 属性，用于标识控件的名称和 ID。例如：

<input type="text" id="username" name="username">
<input type="password" id="password" name="password">

<button> 标签

<button> 标签定义了一个按钮，它的 type 属性指定了按钮的类型，通常是 "submit" 或 "button"。例如：

<button type="submit">Login</button>

HTML 登录表单的样式

HTML 登录表单的样式可以通过 CSS 来控制。以下示例演示了如何为登录表单添加样式：

<style>
  form {
    width: 300px;
    margin: 0 auto;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }

  label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
  }

  input[type="text"],
  input[type="password"] {
    width: 100%;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 5px;
  }

  button[type="submit"] {
    background-color: #4CAF50;
    color: white;
    padding: 5px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
  }

  button[type="submit"]:hover {
    background-color: #3e8e41;
  }
</style>

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>

  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required>

  <button type="submit">Login</button>
</form>

总结

HTML 登录表单是 web 开发中常用的重要组件之一。通过 <form>、<label>、<input> 和 <button> 标签组合而成。样式可以通过 CSS 来控制。