Question

让我们说我希望有多个表单供用户填写，但首先他们必须选择带有单选按钮的选项。

这非常粗糙，但为了举个例子，必须这样做。当用户在页面上时，他们应该只看到几个单选按钮。（男，女，狗和猫）。

这是可用选项的示例代码。

<fieldset>
        <input type="radio" name="male" value="male"> Male
        <input type="radio" name="female" value="female"> Female
        <input type="radio" name="dog" value="dog"> Dog
        <input type="radio" name="cat" value="cat"> Cat
 </fieldset>

当他们选择单选按钮时，应为所选的每个收音机打开几个文本表单。当用户填写下一个表单并提交内容时，它应该为该用户创建一个页面（基本上是一个配置文件，但这只是一个例子）。

我的问题是：如何在不打开新页面的情况下选择收音机后才能使表格可用？以及如何制作自动页面部分？我假设它将是php和javascript的混合，如果不是更多（我不是最先进的那两个）。我很感激帮助，如果我不够具体，请告诉我。

Answer 1

使用:checked pseudo-class和sibling selector，您可以使用纯CSS执行此操作，但需要注意的是，表单必须是与无线电输入相同父级的子级。诀窍是将每个表单的初始display属性设置为none，并在选择相关输入时重置为block。

为了简洁起见，我只是将以下示例中的form标记设置为彩色块。

form{
  display:none;
}
#input_male:checked~#form_male,
#input_female:checked~#form_female,
#input_dog:checked~#form_dog,
#input_cat:checked~#form_cat{
  display:block;
}
*{box-sizing:border-box;color:#000;font-family:arial;}
input,label{display:inline-block;margin:0 0 10px;}
form{height:100px;}
form:first-of-type{background:red;}
form:nth-of-type(2){background:green;}
form:nth-of-type(3){background:blue;}
form:last-of-type{background:black;}

<input name="form" id="input_male" type="radio" value="male">
<label for="input_male">Male</label>
<input name="form" id="input_female" type="radio" value="female">
<label for="input_female">Female</label>
<input name="form" id="input_dog" type="radio" value="dog">
<label for="input_dog">Dog</label>
<input name="form" id="input_cat" type="radio" value="cat">
<label for="input_cat">Cat</label>
<form id="form_male"></form>
<form id="form_female"></form>
<form id="form_dog"></form>
<form id="form_cat"></form>

Answer 2

正如mihai所说纯javascript或jQuery会帮助你。但关于这个想法：

您可以拥有3个表单步骤并基于用户＆＃39;您可能希望在第二步和第三步中显示不同的表单。隐藏或将使用JavaScript / DOM在网页上创建其他类型的表单。使用JavaScript / jQuery事件侦听器，您可以找到显示第二层表单的时间（选择广播等）。

但最好是使用Ajax根据用户可能给你的不同答案（选择收音机等）获得第二层或第三层的表格。所以你有一个页面php页面，它会给你表格。与get_form.php一样，您可以根据您从get_form.php?p1=3&p2=5这样的用户获得的数据发送参数作为您想要的表单，并且可以将从get_form.php获取的HTML添加到您拥有的空标记中你的页面

Main.php

<HTML>
...
<script>
//codes to check if we need to show next form and code to get new forms with ajax
</script>
.....
<div I'd=form1container><form>
First layer form
</form></div>

<div I'd=form2container>
Second layer form container</div>

<div I'd=form3container>
Third layer form container</div>

get_form.php

echo "<form>";
// and different echoes based on parameters to create the dynamic form
echo "</form>

选择带单选按钮的表单

2 个答案: