打造完美Web登录界面：HTML、CSS与Bootstrap实战

最新推荐文章于 2025-03-14 15:28:02 发布

Suvo Sarkar

最新推荐文章于 2025-03-14 15:28:02 发布

阅读量2.5k

点赞数 27

本文链接：https://blog.csdn.net/weixin_36444661/article/details/143862548

版权

本文还有配套的精品资源，点击获取

简介：登录界面是用户与Web应用程序互动的起点，其设计和实现对用户体验至关重要。本教程将指导开发者如何使用HTML、CSS和Bootstrap框架创建一个功能齐全且视觉吸引力强的登录界面。内容涵盖从基础的表单标签到使用Bootstrap的响应式设计，以及如何结合JavaScript和后端技术来增强界面的业务逻辑和用户验证功能。 web程序登陆界面

1. HTML表单标签基础

HTML表单标签概述

HTML表单是网页交互的核心组件之一，主要用于收集用户输入的数据，如文本、数字、日期等。它们在设计时需考虑到用户体验、数据的安全性和服务器端的数据处理需求。一个典型的HTML表单包含 <form> 标签，其中嵌套各种表单元素（如 <input> , <select> , <textarea> 等），允许用户输入不同类型的数据。

输入控件详解

<input> 标签是表单中最灵活的元素，它支持多种 type 属性，如 text , password , checkbox , radio , submit 等，每种类型都对应不同的输入形式或功能。 select 元素提供一个下拉列表供用户选择，而 textarea 元素则用于输入多行文本，常用于评论或反馈。

表单的提交与验证

表单提交时，数据会发送到服务器，由服务器端脚本进行处理。 <form> 标签提供了 action 属性指定提交地址， method 属性定义提交方式（如GET或POST）。前端验证可使用JavaScript增强用户体验，如校验输入格式、检查必填字段等，避免了不必要的服务器负载和响应延迟。

<form action="submit.php" method="post">
    <input type="text" name="username" required>
    <input type="password" name="password" required>
    <input type="submit" value="登录">
</form>

以上示例为一个简单的登录表单，其中 required 属性确保在提交前用户必须填写用户名和密码。

2. CSS样式应用与美化

2.1 CSS基础与选择器

2.1.1 CSS的作用与基本语法

CSS（层叠样式表）用于控制网页的外观和格式。它定义了如何显示HTML元素，包括布局、颜色、字体、边框等。通过CSS，开发者能够将内容与表现分离，提高网页的可维护性和可访问性。CSS的作用在于：

美化界面 ：通过颜色、字体、边框、背景、阴影等视觉元素提升用户体验。
布局控制 ：利用定位、盒模型等属性对页面结构进行布局设计。
响应式设计 ：适配不同屏幕尺寸和设备，提高用户体验。

基本CSS语法涉及选择器、属性和值，语法结构简单，但可扩展性强大。例如：

h1 {
    color: blue;
    font-size: 24px;
}

这段代码选择所有 <h1> 元素，并将其文字颜色设置为蓝色，字体大小设为24像素。

2.1.2 选择器的种类及其优先级

CSS选择器可以分为多种类型，包括元素选择器、类选择器、ID选择器、属性选择器等。正确使用选择器能够精确控制样式应用范围。

元素选择器 ：直接指定HTML标签类型。
类选择器 ：用 . 表示，选择具有特定类属性的元素。
ID选择器 ：用 # 表示，选择具有特定ID属性的元素。
属性选择器 ：通过元素的属性和值来选择元素。

CSS中的一个重要概念是选择器优先级，也称为CSS特异性。它决定了当多个规则应用于同一元素时，哪个规则将生效。优先级从高到低如下：

行内样式（直接在元素上应用的样式）
ID选择器
类选择器、伪类和属性选择器
元素选择器和伪元素

为了解决样式的冲突，可以使用 !important 声明，但需谨慎使用，因为它会破坏CSS的自然特异性规则。

2.2 CSS布局技术

2.2.1 盒模型的理解与应用

盒模型是CSS布局的基础，它将每个HTML元素视为一个矩形盒子。每个盒子由内容（content）、内边距（padding）、边框（border）和外边距（margin）四部分组成。

内容：元素的可见内容区域。
内边距 ：内容与边框之间的透明区域。
边框：围绕内容和内边距的框线。
外边距 ：边框外的透明区域，用于分隔相邻元素。

CSS中可以通过 box-sizing 属性设置盒模型的计算方式，默认为 content-box ， border-box 会包含padding和border在宽度和高度计算中。

* {
    box-sizing: border-box;
}

这段代码将页面中所有元素的盒模型设置为 border-box 。

2.2.2 布局的常见模式（如Flexbox、Grid）

CSS布局技术经历了从传统布局（如浮动和定位）到现代布局技术（如Flexbox和Grid）的发展。现代布局技术提供了更强大和灵活的布局能力。

Flexbox ：弹性盒子布局模型，适用于创建灵活的一维布局。它允许子元素在主轴方向上排列成行或列，并能自动调整其大小。
Grid ：网格布局模型，用于创建二维布局。它定义了行和列的网格，并将子元素放置在这些网格交叉点上。

.container {
    display: flex; /* 设置为Flexbox布局 */
    flex-direction: row; /* 子元素在行内排列 */
}

.grid-container {
    display: grid; /* 设置为Grid布局 */
    grid-template-columns: 200px 1fr; /* 定义两列的宽度 */
}

这些代码展示了如何为容器设置Flexbox布局和Grid布局。

2.3 界面美化技巧

2.3.1 颜色、字体和边框的样式设计

界面美化涉及颜色搭配、字体选择和边框设计。合适的颜色可以传达品牌信息和情感，字体的选择则影响可读性和美观，而边框则能增加视觉效果或分割内容。

颜色选择时可以使用颜色工具或色彩理论，如色轮、色相对比等。字体选择应基于字体的可读性、风格与品牌定位。边框则可以通过样式（实线、虚线）、宽度和颜色来增强视觉层次。

body {
    background-color: #f8f8f8;
    color: #333;
    font-family: 'Arial', sans-serif;
    border: 1px solid #ddd;
}

2.3.2 响应式设计与媒体查询

响应式设计是让网站在不同设备上都能良好展示的一种设计方法。媒体查询是实现响应式设计的重要工具，它允许根据不同的设备特性应用不同的CSS规则。

通过 @media 规则，开发者可以定义特定屏幕尺寸或设备类型的样式。以下示例展示了如何设置小屏设备的字体大小和布局：

/* 对于屏幕宽度小于600px的设备 */
@media only screen and (max-width: 600px) {
    body {
        font-size: 14px;
    }

    .header, .footer {
        padding: 10px;
    }
}

以上代码表示当屏幕宽度小于600像素时，页面字体大小将调整为14像素，并且头部和底部的内边距设置为10像素。

3. Bootstrap响应式设计实现

3.1 Bootstrap框架简介

3.1.1 Bootstrap的特点与优势

Bootstrap是一个流行的前端框架，它允许开发者快速地创建出响应式的网页布局。其特点主要体现在以下几个方面：

丰富的组件库： Bootstrap提供了大量的预制组件，比如按钮、导航栏、表单控件等，极大地简化了开发者的工作量。
一致的跨浏览器体验： Bootstrap的组件经过优化，以确保在不同的浏览器和设备上有一致的表现。
响应式设计： 该框架的核心之一就是响应式设计，能自动适应不同大小的屏幕和设备。
强大的栅格系统： Bootstrap的栅格系统是构建响应式布局的基础，允许开发者通过简单的类名来创建复杂的布局。
自定义和扩展性： 开发者可以通过Sass变量来自定义Bootstrap的颜色、字体等，适应个性化需求。

3.1.2 Bootstrap的安装与初始化

安装Bootstrap有两种常见方式：通过CDN或通过包管理器。以下是使用CDN的示例代码，将其添加到HTML的 <head> 标签内：

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<!-- Bootstrap JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.9.3/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

通过上述代码，Bootstrap框架被引入到项目中，接下来就可以开始使用它的类和组件来构建响应式网页了。

3.2 Bootstrap组件应用

3.2.1 常用组件的使用方法

Bootstrap提供了丰富而强大的组件，下面以导航栏组件为例，展示如何使用它：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
    </ul>
  </div>
</nav>

在这段代码中，我们使用 navbar 类定义了一个导航栏， navbar-expand-lg 类控制了导航栏在不同屏幕尺寸下的表现。 navbar-light bg-light 定义了导航栏的样式。通过 collapse 类和按钮的 data-toggle 属性，我们还可以实现响应式的导航栏折叠功能。

3.2.2 组件的定制与扩展

Bootstrap组件可以进行定制和扩展以满足特定的需求。这通常是通过覆盖默认的CSS样式来完成的。例如，你可以自定义导航栏的背景色：

.navbar {
  background-color: #343a40;
}

然后在你的CSS文件中引入这段样式，从而覆盖默认的样式。为了保持样式的整洁和可维护性，建议使用Sass等预处理器的变量和混入来定制和扩展组件。

3.3 响应式布局实践

3.3.1 媒体查询与断点的设置

响应式布局的核心是媒体查询，它允许开发者为不同的屏幕尺寸设置特定的样式规则。Bootstrap定义了四个默认断点： sm , md , lg , xl 。

例如，以下代码展示了如何针对不同断点设置样式：

/* 大屏幕设备（桌面，992px以上） */
@media (min-width: 992px) {
  .custom-class {
    background-color: lightgreen;
  }
}

/* 中等屏幕设备（平板，768px至991px） */
@media (min-width: 768px) and (max-width: 991px) {
  .custom-class {
    background-color: lightblue;
  }
}

/* 小屏幕设备（手机，767px以下） */
@media (max-width: 767px) {
  .custom-class {
    background-color: lightcoral;
  }
}

通过自定义媒体查询，你可以创建更加符合实际需求的响应式设计。

3.3.2 实现跨设备的兼容布局

创建跨设备兼容布局的关键在于合理利用Bootstrap提供的栅格系统。栅格系统分为12个列，你可以使用 container , row , col 等类来创建一个响应式的布局：

<div class="container">
  <div class="row">
    <div class="col-4">Column 1</div>
    <div class="col-4">Column 2</div>
    <div class="col-4">Column 3</div>
  </div>
</div>

在这个例子中，三个列都各自占满了容器宽度的四分之一（12/3），并且在任何屏幕尺寸下都是这样。当然，你可以根据需要调整列的数量和宽度比例，来创建更复杂的布局。

此外，利用Bootstrap的响应式工具类可以快速解决常见的布局调整需求，比如在小屏幕上隐藏或显示某些元素：

<div class="d-none d-sm-block">仅在小屏幕上隐藏</div>
<div class="d-block d-sm-none">仅在小屏幕上显示</div>

在上述代码中， d-none 和 d-block 分别用于控制元素的显示和隐藏，通过 d-sm- 前缀，我们可以针对不同屏幕尺寸定义不同的行为。

通过这些方式，开发者可以利用Bootstrap构建出既美观又符合用户需求的响应式网页。

4. 登录界面的视觉与功能完整性

4.1 登录界面视觉设计

4.1.1 用户体验与界面美观的关系

在构建登录界面时，用户体验与界面美观之间存在密不可分的关系。用户界面不仅仅需要具备功能性的要求，同时还需要在视觉上吸引用户，从而提供更加直观、易用且愉悦的用户体验。良好的视觉设计可以简化用户操作流程，减少用户在进行登录操作时的心理负担。

例如，通过使用直观的图形和布局，用户可以快速理解登录表单的输入要求。另外，采用颜色对比、动画效果和反馈机制，可以提示用户进行下一步操作，甚至在用户输入错误信息时给予视觉上的提示，提高用户的满意度和界面的整体吸引力。

4.1.2 视觉设计的要素与原则

为了达成上述的用户体验目标，视觉设计需要遵循一定的原则和要素。设计要素包括色彩、形状、排版、图像和布局，而设计原则则是清晰性、一致性、反馈和简洁性。

清晰性 ：确保所有的文本和控件都易于阅读，使用标准的提示信息和易懂的图标。
一致性 ：界面的元素和操作流程需要遵循统一的风格，以减少用户的学习成本。
反馈：提供即时的反馈信息，如表单验证错误提示、登录过程的进度显示等。
简洁性 ：界面元素不应过多，以避免用户感到混乱。简洁的界面有助于用户集中注意力在必要的操作上。

在设计过程中，设计师通常会借助一些设计工具和规范来指导他们创建出既美观又实用的界面。例如，他们可能会参照材料设计（Material Design）或苹果的Human Interface Guidelines等知名的设计系统。

4.1.3 代码实现登录界面的视觉设计

为了将上述设计原则和要素转化为实际的代码，我们可以使用HTML和CSS来实现。下面是一个简单的示例代码块，展示了如何创建一个基本的登录表单界面。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page Design</title>
<style>
  body {
    font-family: Arial, sans-serif;
    background-color: #f7f7f7;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
  }
  .login-container {
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
  }
  .login-container input[type="text"], .login-container input[type="password"] {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 5px;
  }
  .login-container input[type="submit"] {
    background-color: #5cb85c;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  .login-container input[type="submit"]:hover {
    background-color: #4cae4c;
  }
</style>
</head>
<body>
  <div class="login-container">
    <h2>Login</h2>
    <form>
      <input type="text" placeholder="Username" required>
      <input type="password" placeholder="Password" required>
      <input type="submit" value="Login">
    </form>
  </div>
</body>
</html>

在这个示例中，我们通过使用内联样式创建了一个简单的登录表单。这个表单拥有基本的输入框和提交按钮，同时通过CSS样式提供了简洁且一致的视觉设计。

4.1.4 设计工具和资源的运用

设计师在创建视觉设计时，通常会使用各种设计工具和资源。常见的工具包括Adobe系列（如Photoshop、Illustrator）、Sketch、Figma和InVision等。这些工具可以帮助设计师创建原型、设计图和高保真度的用户界面。

除了设计工具，设计师还会利用大量的在线资源库来获取图标、字体和高质量图片等。这些资源网站包括但不限于Unsplash、Flaticon和Google Fonts。通过运用这些资源，设计师能够更加高效地创建出视觉吸引且功能完善的登录界面。

4.2 功能完整性分析

4.2.1 功能需求的分析与实现

为了确保登录界面的功能完整性，我们需要对功能需求进行详尽的分析。这不仅包括基本的用户名和密码输入框，还包括表单验证、错误处理、第三方登录集成等功能。

表单验证 ：在前端进行初步的输入验证，确保用户输入的内容符合要求。
错误处理 ：当用户输入错误信息时，系统需要提供清晰的反馈。
第三方登录集成 ：如社交媒体登录，可以简化用户的登录流程。

4.2.2 用户反馈与界面优化

在用户界面设计的过程中，收集用户反馈是一个不断优化界面的重要环节。设计师可以通过各种方式，如问卷调查、用户访谈或使用分析工具，来了解用户对登录界面的看法和改进建议。

根据收集到的反馈信息，设计师可以对界面进行微调，例如调整输入框的位置、改变颜色方案或者优化提示信息等。此外，用户测试可以帮助发现潜在的设计问题或交互问题，进一步提升登录界面的易用性和安全性。

4.3 安全性考量

4.3.1 登录安全性的基本要求

登录界面的设计不仅需要考虑用户体验和视觉美观，还需要确保安全性。基本的安全要求包括但不限于：

数据加密 ：传输过程中使用HTTPS协议来加密数据。
验证码 ：为了防止自动化攻击，如机器人登录尝试，使用验证码机制。
二次验证 ：为高风险操作提供二次验证，例如使用手机短信或电子邮件验证码。

4.3.2 常见的安全漏洞与防御策略

虽然前端可以实施一些基本的安全措施，但后端的安全防御措施更为关键。常见的安全漏洞包括跨站脚本攻击（XSS）和跨站请求伪造（CSRF）。防御这些漏洞的策略包括：

输入验证 ：确保所有用户输入都经过验证，防止恶意脚本的注入。
输出编码 ：对所有输出进行编码处理，防止XSS攻击。
令牌生成 ：使用令牌来验证请求的来源，防止CSRF攻击。

通过细致的需求分析和用户反馈收集，以及重视安全性问题，我们可以构建一个既美观又功能完整的登录界面。这不仅需要前端技术的支持，还需要后端以及安全技术的协助，以保证用户在使用过程中既舒适又安全。

5. JavaScript与后端技术集成

5.1 JavaScript基础

5.1.1 JavaScript的作用与语法基础

JavaScript是一种广泛使用的脚本语言，它让网页具备交互性，使得用户能够与网页进行实时的交互操作。JavaScript 可以改变 HTML 和 CSS 以更新用户界面，从而创建动态网站。JavaScript 运行在客户端，即用户的浏览器中，这也意味着它能够快速响应用户的操作。

语法是任何编程语言的基础，对于JavaScript来说也不例外。JavaScript 的核心语法包括变量声明、数据类型、运算符、条件语句、循环、函数等基本构建块。例如，使用 var 或 let 声明一个变量，然后赋予字符串、数字等数据类型。条件语句如 if 用于基于不同条件执行不同的代码块，而 function 关键字用于定义可复用的代码块，即函数。

// 变量声明示例
let greeting = "Hello, World!";

// 条件语句示例
if (greeting === "Hello, World!") {
    console.log("The greeting is correct.");
}

// 函数示例
function sayHello() {
    console.log("Hello!");
}

5.1.2 常用的DOM操作与事件处理

文档对象模型（DOM）是针对HTML和XML文档的一个API，允许程序和脚本动态地访问和更新文档的内容、结构和样式。JavaScript可以利用DOM来读取、修改和添加网页上的元素。

事件处理是JavaScript中非常重要的一个部分，它让JavaScript可以响应用户的操作，如点击、按键、鼠标移动等。通过为元素添加事件监听器，JavaScript能够执行相应的函数来处理这些事件。

// DOM操作示例
const heading = document.querySelector("h1"); // 获取第一个h1元素
heading.textContent = "New Heading"; // 改变其文本内容

// 事件处理示例
document.body.addEventListener("click", function() {
    console.log("Body was clicked.");
});

5.2 前后端数据交互

5.2.1 AJAX与JSON的基本使用

AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个页面的情况下，能够让网页实现异步数据更新的技术。JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。

在JavaScript中，使用 XMLHttpRequest 对象或者现代的 fetch API可以实现AJAX请求。JSON常作为数据的传输格式，在前后端交互中被广泛使用。前端可以发送JSON数据到服务器，并从服务器接收JSON格式的响应数据。

// AJAX使用fetch API发送请求的示例
fetch('https://example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

5.2.2 使用Fetch API进行网络请求

fetch API是现代浏览器提供的一个内置的网络请求API，它提供了一个更强大、更灵活的方式来发起网络请求。与 XMLHttpRequest 相比， fetch API的语法更简洁，更易于使用。 fetch 返回一个Promise，这让它能够与 async/await 语法很好地配合，使得异步代码的编写更加直观。

// 使用async/await语法使用fetch API
async function fetchData() {
    try {
        const response = await fetch('https://example.com/data');
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('There has been a problem with your fetch operation:', error);
    }
}

fetchData();

5.3 功能实现与优化

5.3.1 登录验证逻辑的实现

在Web应用中，登录验证是一个核心功能。前端JavaScript通常负责收集用户输入的用户名和密码，然后通过AJAX或Fetch API发送到后端进行验证。验证成功后，服务器通常会返回一个令牌（如JWT），前端将此令牌存储起来，并用于后续的请求认证。

// 登录验证的前端逻辑示例
function login(username, password) {
    fetch('https://example.com/api/login', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ username, password })
    })
    .then(response => response.json())
    .then(data => {
        if(data.success) {
            // 存储令牌，并进行其他验证成功后的操作
            localStorage.setItem('authToken', data.token);
            console.log("Login successful");
        } else {
            console.log("Login failed");
        }
    })
    .catch(error => console.error('Login error:', error));
}

5.3.2 性能优化与错误处理

在实现前端功能时，性能优化是一个不可忽视的环节。合理的代码组织、减少HTTP请求次数、代码压缩等都是常见的优化手段。此外，前端代码应当具备健壮性，这意味着应当对可能出现的错误进行捕获和处理。

// 代码压缩与错误处理的示例
try {
    // 正常执行的代码
} catch (error) {
    // 错误处理代码
    console.error('An error occurred:', error);
    // 还可以进行额外的操作，例如显示错误信息给用户
}

JavaScript与后端技术的集成是实现现代Web应用不可或缺的一部分。通过使用AJAX和Fetch API进行前后端数据交互，以及通过DOM操作实现丰富的前端功能，开发者可以创建功能强大的Web应用。同时，确保代码的性能优化和错误处理机制，则有助于提升用户体验和应用的稳定性。

6. 综合案例分析

6.1 案例需求分析

6.1.1 确定项目目标与用户场景

在本章节中，我们探讨一个综合案例——开发一个功能齐全的在线论坛。首先，项目目标是创建一个用户友好的界面，其中用户可以注册、登录、发帖、回帖以及查看其他用户的信息。

确定用户场景对理解目标用户群体至关重要。我们设想了以下几种典型的用户场景：

新用户注册 ：用户首次访问论坛时，应被引导至注册页面进行账户创建。
常规用户登录 ：已有账户的用户应能快速登录，参与论坛讨论。
发帖与回帖 ：用户应能够创建新帖子和回复现有帖子，同时管理自己的帖子。
资料浏览 ：用户可以查看其他用户的资料信息，包括发帖量、等级等。

6.1.2 设计技术路线与实现方案

为了实现上述目标，我们决定采用前后端分离的开发模式。前端使用现代JavaScript框架，如React或Vue.js，搭配Bootstrap来提高响应式布局的开发效率。后端则选择Node.js搭配Express框架，并结合数据库技术如MongoDB来存储用户数据和帖子信息。

技术路线如下：

前端实现 ：利用React和Bootstrap构建用户界面，利用Ajax与后端进行数据交互。
后端实现 ：使用Node.js和Express构建RESTful API，用MongoDB作为数据存储。
安全性 ：对敏感操作如登录、注册等采用HTTPS协议和JWT（JSON Web Tokens）进行数据加密传输，保护用户信息。

6.2 功能实现

6.2.1 编码实现登录界面的各个部分

登录页面是用户与系统交互的第一个界面。在这个部分，我们将重点关注HTML、CSS和JavaScript的综合应用。

首先是HTML结构的实现：

<form id="loginForm" class="form-signin">
  <h2 class="form-signin-heading">欢迎登录</h2>
  <label for="inputUsername" class="sr-only">用户名</label>
  <input type="text" id="inputUsername" class="form-control" placeholder="用户名" required autofocus>
  <label for="inputPassword" class="sr-only">密码</label>
  <input type="password" id="inputPassword" class="form-control" placeholder="密码" required>
  <button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
</form>

对应的CSS样式：

.form-signin {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: auto;
}
.form-signin .form-control {
  position: relative;
  box-sizing: border-box;
  height: auto;
  padding: 10px;
  font-size: 16px;
}
.form-signin .btn {
  margin-top: 15px;
}

JavaScript登录逻辑，使用Fetch API：

document.getElementById('loginForm').addEventListener('submit', function(e) {
  e.preventDefault();
  const username = document.getElementById('inputUsername').value;
  const password = document.getElementById('inputPassword').value;
  fetch('/api/login', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ username, password })
  })
  .then(response => response.json())
  .then(data => {
    if(data.success) {
      localStorage.setItem('userToken', data.token);
      window.location.href = '/dashboard.html';
    } else {
      alert('登录失败: ' + data.message);
    }
  })
  .catch(error => {
    console.error('登录过程中发生错误: ', error);
  });
});