作为一种主要用于网页设计和开发的标记语言，HTML（HyperText Markup Language）一直被广泛应用于全球各个领域。为了提高用户体验和页面可靠性，很多开发者通过JavaScript来实现错误提示功能来优化用户界面。本文将介绍如何使用JavaScript在HTML中显示红色错误文本，并结合一个蓝色的表单样式。

首先，我们需要创建一个基本的HTML布局，并添加一个简单的表单元素作为示例。以下是一个典型的表单布局的示例：

```html

红字错误和蓝色表单示例

```

在上面的HTML代码中，我们创建了一个具有两个输入框和一个提交按钮的表单。每个输入框都有一个必填字段的要求，意味着如果用户未填写必填字段，则需要显示错误信息。

接下来，我们将使用JavaScript编写一个脚本来实现显示红色错误信息的功能。创建一个名为`script.js`的文件，并在其中添加以下代码：

```javascript

const form = document.getElementById("myForm");

form.addEventListener("submit", function(event){

event.preventDefault();

let errors = false;

// 清除之前的错误信息

clearErrors();

// 检查每个输入字段的有效性

if(form.name.value.trim() == ""){

displayError("name", "姓名不能为空");

errors = true;

}

if(form.email.value.trim() == ""){

displayError("email", "邮箱不能为空");

errors = true;

}

if(errors){

return false;

} else {

// 执行表单提交操作

// 例如：form.submit();

}

});

function displayError(fieldId, errorMessage){

const field = document.getElementById(fieldId);

const error = document.createElement("span");

error.innerHTML = errorMessage;

error.style.color = "red";

field.parentNode.insertBefore(error, field.nextSibling);

}

function clearErrors(){

const errorTags = document.querySelectorAll("span");

errorTags.forEach(function(error){

error.parentNode.removeChild(error);

});

}

```

在上述JavaScript代码中，我们首先获取了表单元素并为其添加了一个`submit`事件监听器。当用户点击提交按钮时，我们阻止默认的表单提交行为（通过调用`event.preventDefault()`），并开始检查每个输入字段的有效性。

如果某个字段为空，则会调用`displayError`函数来在该字段的后面显示一个红色的错误信息。`displayError`函数接受两个参数：字段的ID和错误消息。它首先获取对应的字段元素，然后创建一个`span`元素来存储错误消息，并将其插入到字段元素之后。

为了防止错误信息重叠，我们在显示新的错误信息之前调用了`clearErrors`函数来清除之前的错误信息。该函数使用`querySelectorAll`方法选择所有的`span`元素，并通过循环移除它们。

最后，我们只需要将`script.js`文件链接到HTML文档中，通过``语句来引入。然后就可以通过在浏览器中打开HTML文件来测试红字错误和蓝色表单的效果了。

为了实现蓝色的表单样式，我们可以在`