Question

你好，你能说出为什么我可以在这段代码中选择两个单选按钮

<html>
  <head><title>Survey</title>
  <body>
     <h3>Please Enter the following Information: </h3>

  <form method= "post" action="/~fmccown/cgi-bin/printinfo.cgi">
    <input type ="hidden" name="input-source" value="survey2.html" />
     <p>
      Name: <input type="text" name="name" size="30" />
      </p><p>
      Classification:
      <select name="class">
        <option>Freshman</option>
    <option selected="selected">Sophomore</option>
    <option>Junior</option>
    <option>Senior</option>
     </select>
    </p><p>
      Gender:
        <input type="radio" name="gender" value="M" checked="checked" />Male
    <input type="radio" name="gender" value="F" />Female
    </p><p>
      Email address: <input type="text" name="email" size="30" />
          </p><p>
    Password: <input type="password" name="pword" />
    </p><p>
    What are your favorite computer classes?
    <br /> &nbsp;
    <label>
    <input type="checkbox" name="class-int" />Internet Development &nbsp;
    </label>
    <label>
    <input type="checkbox" name="class-net" />Networking &nbsp;
    </label>
    <label>
    <input type="checkbox" name="class-gui" />GUI &nbsp;
    </label>
    <label>
    <input type="checkbox" name="class-oop" />OOP
    </label>
    </p><p>
    Are you graduating this spring?
    <label>
    <input type="radio" name="grad-yes" value="Yes" />Yes
    </label>
    <label>
    <input type="radio" name="grad-no" value="Yes" />No
    </label>
    </p><p>
      <input type="submit" value="Submit Survey" />
      <input type="reset" value="Clear Form" />
   </p>
   </form>
  <p>
    Thank You!
  </p>
  </body>
  </html>

Answer 1

这两个元素可能应该具有相同的name：

<input type="radio" name="grad-yes" value="Yes" />
<input type="radio" name="grad-no" value="Yes" />

Answer 2

当且仅当他们共享一个共同名称时，单选按钮才会组合在一起。

第一对称为gender，因此可以正常工作。

第二对没有，因为一个被称为grad-yes而另一个被称为grad-no。

要走的路是：

<label>
<input type="radio" name="grad" value="Yes" />Yes
</label>
<label>
<input type="radio" name="grad" value="No" />No
</label>

两个单选按钮同时打开

2 个答案: