如何使HTML表单交互？ [英] How to make a HTML Form interactive?
问题描述
但我似乎无法让它工作。我的意思是互动，例如：如果我有以下饮料选择：
可乐
芬达
雪碧
百事可乐
当我选择百事可乐时，我想让它显示另一个HTML表单，让我选择与我选择的第一件事有关的东西。例如，如果我选择百事可乐，它会告诉我这个：
百事可乐
百事可乐橙色
百事可乐香蕉
然后当我选择其中一个时，它向我展示了另一个HTML表单，它让我选择了另一个与我的第一个和第二个选择相关的东西。例如：如果我选择百事可乐，那么百事可乐可以让我选择：
<2000>
2013
2020
到目前为止，我已经试过如果脚本（带有Javascript）
以下是我试过的：
<！DOCTYPE html>
< html>
< body>
< form>
< select name =drink>
< option value =cola>可乐< /选项>
< option value =fanta>芬达< / option>
< option value =sprite> Sprite< / option>
< option value =pepsi>百事可乐< / option>
< / select>
< br>< br>
< input type =submit>
< / form>
< script>
if（drink = pepsi）{
< html>
< form>
< select name =variant>
< option value =pcola>百事可乐< / option>
< option value =orange>百事可乐橙色< /选项>
< option value =香蕉>百事可乐香蕉< / 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 。
您只需使用两行
li ul {display：none;}
li输入：checked + ul {display：block;}
示例：
li ul {display：none;} li input：checked + ul {display：block;} 值=可乐/>可乐< / li>< li><输入类型=无线电名称=饮料值=芬达/>芬达< / li>< li><输入type =radioname =drinkvalue =Sprite/> Sprite< / li>< li>< inpu type =radioname =drinkvalue =Pepsi/>百事可乐< ul>< li>< input type =radioname =flavorvalue =pepsiCola/>百事可乐< ;< li>< li>< input type =radioname =flavorvalue =pepsiOrange/> Pepsi Orange< ul>< li>< input type =radioname =date value =2000/> 2000< / li>< li>< li>< li> lt; input type =radioname =datevalue =2013 input type =radioname =datevalue =2020/> 2020< / li>< / ul>< / li>< li>< input type =radioname =flavor value =pepsiBanana/>百事可乐香蕉< / li>< / ul>< / li>< / ul>< / form>
So I'm trying to make a site with an interactive HTML Form. But I can't seem to make it work. What I mean by interactive is that for example: If I have a drink choice between: Cola Fanta Sprite Pepsi
When I select Pepsi I want it to show another HTML form which let's me select something related to the first thing I chose. For example if I chose Pepsi it would show me this:
Pepsi Cola Pepsi Orange Pepsi Banana
and then when I choose one of Those it shows me another HTML form which let's me choose another thing Related to my first and second choices. For example: If I chose Pepsi then Pepsi Orange it would let me choose between:
2000 2013 2020
So far I've tried if Scripts (with Javascript)
Here's What I tried:
<!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>
For the level of interactivity you have described, you won't need javascript.
You can achieve what you are describing using just 2 lines of css:
li ul {display:none;}
li input:checked + ul {display:block;}
Example:
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>
这篇关于如何使HTML表单交互？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
