Dieser Artikel führt Sie anhand eines praktischen Beispiels durch die Erstellung eines HTML-Radiobuttons.
Wie füge ich ein Optionsfeld in HTML hinzu?
Um ein Optionsfeld in HTML hinzuzufügen, folgen Sie der unten angegebenen Syntax:
< Eingang Typ = 'Radio' Name = '' Wert = '' >
Hier ist die Beschreibung der angegebenen Syntax:
- „ Typ ”: Dieses Attribut gibt an, welche Art von Eingabe Sie erstellen möchten, z. B. Text, Radio, Kontrollkästchen und mehr. Um einen Radiobutton zu erstellen, muss der Attributwert auf „radio“ gesetzt werden.
- „ Name ”: Es definiert den Namen des Eingabeelements. Dieses Attribut sollte für die Liste der Optionsfelder gleich sein.
- „ Wert ”: Dies gibt den Wert an, der an den Server gesendet wird, wenn das Optionsfeld als aktiviert markiert ist.
Beispiel: Hinzufügen eines Optionsfelds in HTML
In diesem Beispiel wird das Verfahren zum Hinzufügen eines Optionsfelds in HTML unter Verwendung des Eingabe-Radio-Buttons erläutert. Im
Schritt 1: HTML-Datei erstellen
Fügen Sie zuerst ein
Innerhalb des erstellten
- Fügen Sie zuerst das „ ”-Tag, um der Seite eine Überschrift zu geben.
- Dann ein ' ”-Tag für einen Absatz oder eine Textzeile.
- Danach wird das Input-Tag mit einem Attribut „ Typ „Wert haben“ Radio “, der Name wird als Auswahl festgelegt, und „ Wert ' wie ' rot “. Jedem gleichnamigen Optionsfeld werden unterschiedliche Werte zugewiesen. Derselbe Name steht für dieselbe Gruppe oder Liste.
- Wenn Sie eine Schaltfläche hinzufügen möchten, die standardmäßig als aktiviert markiert ist, weisen Sie das Attribut „ überprüft “ zu dieser Schaltfläche.
- Zu guter Letzt das „
”-Element auf jedem Optionsfeld wird verwendet, um Beschriftungen hinzuzufügen. Es bietet auch eine bessere Zugänglichkeit.
Der folgende Code ist die Interpretation des obigen Szenarios:
< h1 > HTML-Optionsschaltfläche h1 >< p > Was ist deine Lieblingsfarbe? p >
< Eingang Typ = 'Radio' Name = 'Wähle Farbe' Wert = 'rot' überprüft >
< Etikett zum = 'radio1' > Rot Etikett >
< Br >
< Eingang Typ = 'Radio' Name = 'Wähle Farbe' Wert = 'blau' >
< Etikett zum = 'radio1' > Blau Etikett >
< Br >
< Eingang Typ = 'Radio' Name = 'Wähle Farbe' Wert = 'grün' >
< Etikett zum = 'radio1' > Grün Etikett >
< Br >
< Eingang Typ = 'Radio' Name = 'Wähle Farbe' Wert = 'Violett' >
< Etikett zum = 'radio1' > Violett Etikett >
< Br >
< Eingang Typ = 'Radio' Name = 'Wähle Farbe' Wert = 'Andere' >
< Etikett zum = 'radio1' > Andere Etikett >
Es ist ersichtlich, dass die Optionsfelder erfolgreich erstellt wurden:
Sie können auch Stile auf das oben erstellte Optionsfeld anwenden, indem Sie dem unten genannten CSS-Code folgen.
Schritt 2: Stil auf HTML anwenden
Das ' div “ gibt das div-Tag an, das wir in der HTML-Datei erstellt haben:
- Zuerst die ' Hintergrundfarbe „Eigenschaft ist festgelegt als“ #8197f0 “.
- „ Grenze „Eigenschaft ist festgelegt als“ 5px gepunktet #13023a “, wobei 5px die Breite des Rahmens darstellt, gepunktet den Linientyp und next die Farbe des Rahmens.
- „ Polsterung “ ist eingestellt als „ 20px 100px “, wobei 20px die Auffüllung von oben und unten und 100px die Auffüllung von links und rechts angibt.
- Weisen Sie für die Schriftartgestaltung das „ Schriftfamilie „Immobilienwert als“ kursiv “.
CSS
div {Hintergrundfarbe: #8197f0;
Rand: 5px gepunktet #13023a;
Polsterung: 20px 100px;
Schriftgröße: 20px;
Schriftfamilie: kursiv;
}
Es ist ersichtlich, dass das div-Element erfolgreich formatiert wurde:
Das ist es! Wir haben den HTML-Radiobutton ausführlich erklärt.
Fazit
Ein Optionsfeld ist eine Eingabe, die immer in Gruppen von zwei oder mehr Optionen erscheint. Aus dieser Gruppe kann der Benutzer nur eine Option auswählen. In HTML kann ein Optionsfeld mit dem „