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>