如何使 HTML 表单具有交互性

How to make a HTML Form interactive?

本文关键字：交互性 表单 何使 HTML      更新时间：2023-09-26

所以我正在尝试用交互式HTML表单制作一个网站。但我似乎无法让它工作。我所说的互动是指例如：如果我在以下两者之间有饮料选择：可乐芬达精灵百事可乐

当我选择百事可乐时，我希望它显示另一个HTML表单，让我选择与我选择的第一件事相关的内容。例如，如果我选择百事可乐，它会向我显示以下内容：

百事可乐百事橙百事香蕉

然后当我选择其中一个时，它向我显示另一个 HTML 表单，让我选择与我的第一个和第二个选择相关的另一个东西。例如：如果我选择百事可乐，那么百事可乐橙会让我在以下两者之间进行选择：

2000年20132020

年

到目前为止，我已经尝试过脚本（使用Javascript）

这是我尝试过的：

    <!DOCTYPE html>
<html>
<body>
<form>
  <select name="drink">
    <option value="cola">Cola</option>
    <option value="fanta">Fanta</option>
    <option value="sprite">Sprite</option>
    <option value="pepsi">Pepsi</option>
  </select>
  <br><br>
  <input type="submit">
</form>
<script>
    if (drink=pepsi) {
        <html>
        <form>
      <select name="variant">
     <option value="pcola">Pepsi Cola</option>
     <option value="orange">Pepsi Orange</option>
     <option value="banana">Pepsi Banana</option>
    </select>
    <br><br>
    <input type="submit">
</form>
 </html>
}
</script>

    <script>
    if (variant=orange) {
        <html>
        <form>
      <select name="year">
     <option value="2000">2000</option>
     <option value="2013">2013</option>
     <option value="2020">2020</option>
    </select>
    <br><br>
    <input type="submit">
</form>
 </html>
}
</script>

</body>
</html>

对于您所描述的交互性级别，您不需要javascript。

您只需使用2行css即可实现您所描述的内容：

li ul {display:none;}
li input:checked + ul {display:block;}

例：

li ul {display:none;}
li input:checked + ul {display:block;}
<form>
<ul>
<li><input type="radio" name="drink" value="Cola" />Cola</li>
<li><input type="radio" name="drink" value="Fanta" />Fanta</li>
<li><input type="radio" name="drink" value="Sprite" />Sprite</li>
<li><input type="radio" name="drink" value="Pepsi" />Pepsi
<ul>
<li><input type="radio" name="flavour" value="pepsiCola" />Pepsi Cola</li>
<li><input type="radio" name="flavour" value="pepsiOrange" />Pepsi Orange
<ul>
<li><input type="radio" name="date" value="2000" />2000</li>
<li><input type="radio" name="date" value="2013" />2013</li>
<li><input type="radio" name="date" value="2020" />2020</li>
</ul>
</li>
<li><input type="radio" name="flavour" value="pepsiBanana" />Pepsi Banana</li>
</ul>
</li>
</ul>
</form>

学习一些关于JS方法的知识： getElementById ， getElementsByTagName ， ...

例如： 

if (document.getElementById('value') == 'cola')

。返回您选择的值，接下来使用它来更改表单的内容。

使用 '=' 赋值

，但在 if 构造中使用 '==' 赋值。

尝试使用type设置为 text/html 的 script 元素来存储form html字符串，将.onchange和.onsubmit事件附加到document以处理动态内容;使用 .innerHTML 将script元素内容追加到document.body;调整if的条件以使用严格相等===运算符;将以前的form select和input type="submit"元素disabled属性设置为true 

<!DOCTYPE html>
<html>
<head>
  <script type="text/html" id="pepsi">
    <form name="variant">
      <select name="variant">
        <option value="pcola">Pepsi Cola</option>
        <option value="orange">Pepsi Orange</option>
        <option value="banana">Pepsi Banana</option>
      </select>
      <br>
      <br>
      <input type="submit" disabled>
    </form>
  </script>
  <script type="text/html" id="orange">
    <form name="year">
      <select name="year">
        <option value="2000">2000</option>
        <option value="2013">2013</option>
        <option value="2020">2020</option>
      </select>
      <br>
      <br>
      <input type="submit" disabled>
    </form>
  </script>
</head>
<body>
  <form name="initial">
    <select name="drink">
      <option value="cola">Cola</option>
      <option value="fanta">Fanta</option>
      <option value="sprite">Sprite</option>
      <option value="pepsi">Pepsi</option>
    </select>
    <br>
    <br>
    <input type="submit" disabled>
  </form>
  <script>
    document.onchange = function(event) {
      event.target.parentElement
        .querySelector("input")
        .removeAttribute("disabled")
    }
    document.onsubmit = function(event) {
      event.preventDefault();
      event.stopPropagation();
      var drink = event.target.querySelector("select").value;
      if (drink === "pepsi" || drink === "orange") {
        document.body.innerHTML += "<br>" 
        + document.getElementById(drink).innerHTML;
      }
      for (var i = 0; i < document.forms.length -1; i++) {
        var form = document.forms[i];
        form.querySelector("select").setAttribute("disabled", true)
        form.querySelector("input").setAttribute("disabled", true)
      }
    }
  </script>
</body>
</html>

相关文章：