單選按鈕中的HTML文本框？

Question

我希望人們選擇他們想要用單選按鈕搜索某些東西的方式，然後在單選按鈕內獲取文本框中的值。我添加了我想要的圖像，因爲英語不是我的第一或第二語言。我相信這對你們很重要，所以如果你能幫助我這個基本結構，我會很感激。

Answer 1

<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>

希望這可以幫助。

Answer 2

您應該已經將您的嘗試，但因爲這是一個非常簡單的任務，這裏是形式的基本結構：

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; 
 
}

<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>