HTML-Textboxen in Radiobuttons?

Question

Ich möchte, dass die Leute auswählen, wie sie etwas mit Radiobuttons suchen und danach die Werte in Textfeldern innerhalb Radiobuttons abrufen. Ich füge ein Bild von dem hinzu, was ich will, weil Englisch nicht meine erste oder zweite Sprache ist. Ich bin mir sicher, dass dies kein Klacks für viele von euch ist. Wenn ihr mir bei der grundlegenden Struktur helfen könnt, werde ich dankbar sein.

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>

Hope this helfen kann.

Answer 2

Sie sollten Ihre Versuche gesendet, sondern weil dies eine ziemlich einfache Aufgabe ist, hier ist die Grundstruktur der Form:

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>