Javascript 选择其中一个单选按钮，然后单击“提交”，这将重定向其他页面_Javascript_Html_Css

Javascript 选择其中一个单选按钮，然后单击“提交”，这将重定向其他页面

javascript html css

Javascript 选择其中一个单选按钮，然后单击“提交”，这将重定向其他页面,javascript,html,css,Javascript,Html,Css,我有几个单选按钮。选择其中一个并提交时，它将重定向到与选项对应的特定页面我在谷歌上搜索了很多，但似乎解决不了两个问题选择一个单选按钮，然后单击“提交重定向” 垂直对齐页面中心的按钮这是密码- <style type="text/css"> body { background-color: #333; } body,td,th { font-family: "Arial Black", Gadget, sans-serif; } form{display:in

我有几个单选按钮。选择其中一个并提交时，它将重定向到与选项对应的特定页面

我在谷歌上搜索了很多，但似乎解决不了两个问题

选择一个单选按钮，然后单击“提交重定向”
垂直对齐页面中心的按钮

这是密码-

<style type="text/css">
body {
    background-color: #333;
}
body,td,th {
    font-family: "Arial Black", Gadget, sans-serif;
}
form{display:inline;
}
.block{ 
position:absolute;
top:50%
}
.wrapper{
    text-align:center;
}
</style>


身体{
背景色：#333；
}
正文，td，th{
字体系列：“Arial黑色”，小工具，无衬线；
}
表单{显示：内联；
}
.block{
位置：绝对位置；
最高：50%
}
.包装纸{
文本对齐：居中；
}

HTML-

<body>
<h1 align="center">Menu</h1>
<p>&nbsp;</p>
<p align="center">&nbsp; </p>
<form id="form2" name="form2" method="post" action="" >
<div class="wrapper"> 
  <label class="block"><input type="radio" name="Radio Buttons" value="radio" id="RadioButtons_0"/>Options112</label>
</div>
<div class="wrapper">
  <label class="block"><input type="radio" name="Radio Buttons" value="radio" id="RadioButtons_1" />
Option2</label> 
</div>
<div class="wrapper">
  <label class="block"><input type="radio" name="Radio Buttons" value="radio" id="RadioButtons_2" style="display:inline-block"/>
Option3</label>
</div>
</form>
<form id="form1" name="form1" method="post" action="">
<br/>
  <div align="center">
    <input type="submit" name="Submit" id="Submit" value="Submit"  />
    <input type="submit" name="Contribute" id="Contribute" value="Contribute" />
  </div>
</form>
</body>


菜单


选择112
选择2
选择3

限制是使用javascript。

问题一：

将包装器css声明更改为

.wrapper{
    width:150px;
    margin:0 auto;
    text-align:left;
}

您可以更改宽度并设置所需的值…请参见本文档中的结果

问题二：

你说的重定向是什么意思？您正在将两个表单发布到同一页面，而不是重定向。如果要将值发布到其他页面，请在表单标记的“Action”属性中指定一些内容。同时删除单选按钮的“名称”属性中的空格以使其更干净

希望能有帮助

狮子座问题一：

将包装器css声明更改为

.wrapper{
    width:150px;
    margin:0 auto;
    text-align:left;
}

您可以更改宽度并设置所需的值…请参见本文档中的结果

问题二：

希望能有帮助

狮子座

<body>
<h1 align="center">Menu</h1>
<p>&nbsp;</p>
<p align="center">&nbsp; </p>
<form id="form2" name="form2" method="post" action="" >
<div class="wrapper"> 
  <label class="block"><input type="radio" name="Radio Buttons" value="radio" id="RadioButtons_0"/>Option1</label>
</div>
<div class="wrapper">
  <label class="block"><input type="radio" name="Radio Buttons" value="radio" id="RadioButtons_1" />
Option2</label> 
</div>
<div class="wrapper">
  <label class="block"><input type="radio" name="Radio Buttons" value="radio" id="RadioButtons_2" style="display:inline-block"/>
Option3</label>
</div>
</form>
<form id="form1" name="form1" method="post" action="">
<br/>
  <div align="center">
    <input type="submit" name="Submit" id="Submit" value="Submit"  />
    <input type="submit" name="Contribute" id="Contribute" value="Contribute" />
  </div>
</form>
</body>

HTML

<body>
<h1 align="center">Menu</h1>
<p>&nbsp;</p>
<p align="center">&nbsp; </p>
<form id="form2" name="form2" method="post" action="" >
<div class="wrapper"> 
  <label class="block"><input type="radio" name="Radio Buttons" value="radio" id="RadioButtons_0"/>Option1</label>
</div>
<div class="wrapper">
  <label class="block"><input type="radio" name="Radio Buttons" value="radio" id="RadioButtons_1" />
Option2</label> 
</div>
<div class="wrapper">
  <label class="block"><input type="radio" name="Radio Buttons" value="radio" id="RadioButtons_2" style="display:inline-block"/>
Option3</label>
</div>
</form>
<form id="form1" name="form1" method="post" action="">
<br/>
  <div align="center">
    <input type="submit" name="Submit" id="Submit" value="Submit"  />
    <input type="submit" name="Contribute" id="Contribute" value="Contribute" />
  </div>
</form>
</body>

您的html中有一些奇怪的内容您的div标签未正确关闭，因为在by right中，普通div标签为

但是你的html显然有点奇怪您的div标签未正确关闭，因为在by right中，普通div标签为

但是你的显然是

首先你没有关闭你的div也更改块类位置的css:relative首先你没有关闭你的div也更改块类位置的css:relativeOP提到：限制是使用javascript.OP提到：限制是使用javascript。问题是Option1和Option2是相同的字符长度。如果我选择不同长度的名称，它将不再对齐。如果有任何进一步的问题，请随时让我再次知道。干杯问题是选项1和选项2的字符长度相同。如果我选择不同长度的名称，它将不再对齐。如果有任何进一步的问题，请随时让我再次知道。干杯