radiobuttons中的HTML文本框？

Question

我希望人们选择他们想要用radiobuttons搜索某些内容的方式，之后获取radiobuttons中文本框中的值。我正在添加一个我想要的图像，因为英语不是我的第一语言或第二语言。我相信这对你们很多人来说并不是很明智，所以如果你能帮我解决这个问题的基本结构，我将非常感激。

Answer 1

你应该已经发送了你的尝试，但因为这是一个非常简单的任务，这里是表格的基本结构：

＆＃13;

＆＃13;

input[type=text] {
    padding: 8px 16px;
    margin: 8px 0 8px 40px;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type=submit] {
    width: 50%;
    background-color: #54E5BF;
    color: white;
    padding: 10px 26px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

＆＃13;

<p>Search the way you like:</p>
<form>
  <div>
  <input type="radio" name="nameAndSurname" value="nameAndSurname" /> Search with name and surname:<br />
    <input type="text" name="firstname" value="Name">
    <input type="text" name="surname" value="Surname">
  </div>
  <div>
    <input type="radio" name="nameAndSurname" value="ssn" /> Search with your SSN: <br />
    <input type="text" name="surname" value="Security number">
  </div>
   <input type="submit" value="Submit">
 </form>

＆＃13;

＆＃13;

＆＃13;

Answer 2

＆＃13;

＆＃13;

<form name="searchForm" Method="post" action="self">
  <input id="way1" name="search-way" type="radio" value="name-surname" onclick="javascript:document.searchForm.number.disabled=true; document.searchForm.name.disabled=false; document.searchForm.surname.disabled=false"></input>
  <label for="way1">Search by name and surname</label>
  <br>
<label for="surname">surname</label><input type="text" id="surname" name="surname"></input> 
<br>
<label for="name">name</label><input type="text" id="name" name="name"></input>
<br><br>
  <input type="radio" id="way2" name="search-way"  value="security-number" onclick="javascript:document.searchForm.name.disabled=true; document.searchForm.surname.disabled=true;document.searchForm.number.disabled=false;"></input><label for="way2">Search by your security number</label>
<br>
<label for="number">Security number</label><input type="text" id="number" name="number"></input>
<br><input type="submit" value="Search" /></input>
</form>

＆＃13;

＆＃13;

＆＃13;

希望这可以提供帮助。