3.1 Element <input type="button">
Das Element <input type="button"> wird verwendet, um einen Button zu erstellen, der kein Standardverhalten hat. Im Gegensatz zu den Buttons submit und reset, die bestimmte Aktionen beim Klicken ausführen, wird der Button button häufig in Kombination mit JavaScript verwendet, um bestimmte Aufgaben zu erfüllen.
Beispiel für die Verwendung:
<input type="button" value="Click Me" onclick="alert('Button clicked!')">
Wichtige Attribute:
1. Das Attribut value: legt den Text fest, der auf dem Button angezeigt wird.
<input type="button" value="Click Me">
2. Das Attribut onclick: definiert die JavaScript-Funktion, die beim Klicken auf den Button ausgeführt wird.
<input type="button" value="Click Me" onclick="myFunction()">
function myFunction() {
alert('Button clicked!');
}
Beispiele für die Verwendung:
Auslösen einer JavaScript-Funktion:
<input type="button" value="Show Alert" onclick="showAlert()">
function showAlert() {
alert('This is an alert!');
}
Ändern des Stils eines Elements:
<input type="button" value="Change Color" onclick="changeColor()">
<p id="text">This is a paragraph.</p>
function changeColor() {
document.getElementById('text').style.color = 'blue';
}
3.2 Element <input type="checkbox">
Das Element <input type="checkbox"> wird verwendet, um Kästchen zu erstellen, die es Benutzern ermöglichen, eine oder mehrere Optionen aus den vorgeschlagenen auszuwählen. Das Kästchen kann ein- oder ausgeschaltet sein.
Beispiel für die Verwendung:
<label for="subscribe">Subscribe to newsletter:</label>
<input type="checkbox" id="subscribe" name="subscribe" value="yes">
Wichtige Attribute:
1. Das Attribut name: legt den Namen des Formularelements fest, der zusammen mit den Daten an den Server gesendet wird.
<input type="checkbox" name="subscribe">
2. Das Attribut value: legt den Wert fest, der an den Server gesendet wird, wenn das Kästchen aktiviert ist.
<input type="checkbox" name="subscribe" value="yes">
3. Das Attribut checked: definiert, ob das Kästchen standardmäßig aktiviert sein soll.
<input type="checkbox" name="subscribe" value="yes" checked>
Beispiele für die Verwendung:
Mehrere Kästchen:
<p>Select your interests:</p>
<input type="checkbox" name="interest" value="sports">Sports<br>
<input type="checkbox" name="interest" value="music">Music<br>
<input type="checkbox" name="interest" value="movies">Movies<br>
Kästchen mit voreingestelltem Wert:
<input type="checkbox" name="terms" value="agree" checked> I agree to the terms and conditions
3.3 Element <input type="radio">
Feld für die Auswahl von Radiobuttons (type="radio")
Das Element <input type="radio"> wird verwendet, um „Radiobuttons“ zu erstellen, die es Benutzern ermöglichen, nur eine Option aus einer Gruppe auszuwählen. Radiobuttons werden mit Hilfe des gleichen Attributwerts name gruppiert.
Beispiel für die Verwendung:
<p>Choose your gender:</p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
Wichtige Attribute:
Das Attribut name: legt den Namen der Radiobutton-Gruppe fest. Alle Radiobuttons mit demselben Namen gehören zu einer Gruppe, und der Benutzer kann nur einen davon auswählen.
<input type="radio" name="gender" value="male">
<input type="radio" name="gender" value="female">
Das Attribut value: legt den Wert fest, der an den Server gesendet wird, wenn der Radiobutton ausgewählt ist.
<input type="radio" name="gender" value="male">
Das Attribut checked: definiert, ob der Radiobutton standardmäßig ausgewählt sein soll.
<input type="radio" name="gender" value="male" checked>
Beispiele für die Verwendung:
Gruppe von Radiobuttons zur Auswahl einer Option:
<p>Choose a color:</p>
<input type="radio" name="color" value="red">Red<br>
<input type="radio" name="color" value="green">Green<br>
<input type="radio" name="color" value="blue">Blue<br>
Radiobutton mit voreingestelltem Wert:
<input type="radio" name="subscription" value="monthly" checked>Monthly<br>
<input type="radio" name="subscription" value="yearly">Yearly<br>
GO TO FULL VERSION