CSS表單年齡范圍設(shè)置

在CSS表單中，我們可以使用HTML和CSS來設(shè)置年齡范圍，我們需要創(chuàng)建一個(gè)HTML表單，其中包含兩個(gè)文本字段，分別代表年齡的***小值和***大值，我們可以使用CSS來樣式化這些字段，并添加一些交互效果，如當(dāng)輸入的值超出范圍時(shí)顯示錯誤信息。

下面是一個(gè)簡單的示例代碼：

HTML部分：

<form id="age-range-form">
  <label for="min-age">***小年齡：</label>
  <input type="text" id="min-age" name="min-age">
  <label for="max-age">***大年齡：</label>
  <input type="text" id="max-age" name="max-age">
  <input type="submit" value="提交">
</form>

CSS部分：

#age-range-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50px;
}
#age-range-form label {
  margin-bottom: 10px;
}
#age-range-form input[type="text"] {
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
#age-range-form input[type="submit"] {
  padding: 10px 20px;
  border: 1px solid #007bff;
  border-radius: 5px;
  color: #fff;
  background-color: #007bff;
  cursor: pointer;
}

JavaScript部分：

document.getElementById('age-range-form').addEventListener('submit', function(event) {
  var minAge = parseInt(document.getElementById('min-age').value);
  var maxAge = parseInt(document.getElementById('max-age').value);
  var currentAge = new Date().getFullYear();
  if (minAge > currentAge || maxAge < currentAge) {
    alert('輸入的年齡范圍與當(dāng)前年份不符！');
    event.preventDefault(); // 防止表單提交
  } else {
    alert('年齡范圍設(shè)置成功！');
    // 這里可以添加一些其他邏輯，如將數(shù)據(jù)發(fā)送到服務(wù)器等
  }
});

在這個(gè)示例中，我們使用JavaScript來驗(yàn)證輸入的年齡范圍是否合法，并給出相應(yīng)的提示信息，這只是一個(gè)簡單的示例，實(shí)際的應(yīng)用中可能需要更復(fù)雜的邏輯和交互效果，但無論如何，使用CSS和JavaScript來設(shè)置和管理CSS表單中的年齡范圍是一種非常實(shí)用的方法。