使用 HTML 和 CSS 构建调查表单

在网站开发中，表单是连接用户与网站后端的重要交互方式之一。表单可以收集用户提供的信息，进行数据处理和传递。本文介绍如何使用 HTML 和 CSS 构建调查表单，并增加一些交互效果，例如验证用户输入和动态改变表单元素。

HTML 基础结构

HTML 提供了各种用于创建表单的标记。表单元素由一个容器标记（如 <form>）和输入元素标记（如 <input>、<textarea>等）组成。以下是一个基本的 HTML 表单结构：

<form action="/submit" method="post">
  <label for="name">Name:</label>
  <input id="name" type="text" name="name" required>

  <label for="email">Email:</label>
  <input id="email" type="email" name="email" required>

  <label for="age">Age:</label>
  <input id="age" type="number" name="age" required>

  <input type="submit" value="Submit">
</form>

请注意，<input> 标记使用 id 和 name 属性来标识元素。id 属性用于在表单中标识元素，而 name 属性用于提交表单元素的值。在后端应用程序中，可以通过 name 属性获取用户的输入值。

<label> 标记用于标识输入元素的标签，并允许用户单击标签时聚焦到对应的输入元素。required 属性表示该输入元素必须填写，并将在提交表单时进行验证。

CSS 样式

使用 CSS 可以实现表单的自定义样式。以下是一个简单的 CSS 样式，用于使表单元素垂直对齐并添加一些外观装饰：

form {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

form label {
  font-size: 18px;
  margin-bottom: 5px;
}

form input[type="text"], 
form input[type="email"], 
form input[type="number"], 
form textarea {
  padding: 8px;
  border-radius: 5px;
  border: 2px solid gray;
  margin-bottom: 10px;
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
}

form input[type="submit"] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

form input[type="submit"]:hover {
  background-color: #45a049;
}

请注意，<input> 标记使用了属性选择器 [type="text"]、[type="email"]、[type="number"] 和 textarea 来选择不同类型的输入元素，并将它们应用了相同的样式。样式选项包括 padding、border-radius、border、margin-bottom 和 box-sizing 等。

<input type="submit"> 标记用于添加提交按钮，这里使用了一些样式来改变鼠标悬停样式。

JavaScript 动态效果

可以使用 JavaScript 在表单中添加一些动态交互效果。以下是一个简单的示例脚本，用于在用户输入时验证电子邮件地址：

const emailInput = document.querySelector("#email");

emailInput.addEventListener("input", validateEmail);

function validateEmail(event) {
  const email = event.target.value;
  const valid = /\S+@\S+\.\S+/.test(email);

  if (!valid) {
    event.target.setCustomValidity("Invalid email address");
  } else {
    event.target.setCustomValidity("");
  }
}

此脚本监听 #email 元素上的 input 事件，并检查输入的电子邮件地址的格式。如果地址无效，则将元素的自定义有效性状态设置为 "Invalid email address"。如果地址有效，则将元素的自定义有效性状态设置为空字符串。

总结

使用 HTML、CSS 和 JavaScript，可以轻松地创建网站表单，使用户与网站进行交互。通过为表单添加样式和动态交互效果，可以增强网站的外观和功能，提高用户体验。