3.1 Element <input type="button">
Element <input type="button"> jest używany do stworzenia przycisku, który nie ma wbudowanego domyślnego zachowania. W przeciwieństwie do przycisków submit i reset, które wykonują określone działania po naciśnięciu, przycisk button jest zwykle używany w połączeniu z JavaScriptem do wykonywania określonych zadań.
Przykład użycia:
<input type="button" value="Click Me" onclick="alert('Button clicked!')">
Podstawowe atrybuty:
1. Atrybut value: ustawia tekst, który będzie wyświetlany na przycisku.
<input type="button" value="Click Me">
2. Atrybut onclick: definiuje funkcję JavaScript, która zostanie wykonana po naciśnięciu przycisku.
<input type="button" value="Click Me" onclick="myFunction()">
// Funkcja uruchamiana przy naciśnięciu przycisku
function myFunction() {
alert('Button clicked!');
}
Przykłady użycia:
Wywołanie funkcji JavaScript:
<input type="button" value="Show Alert" onclick="showAlert()">
// Funkcja pokazująca alert
function showAlert() {
alert('This is an alert!');
}
Zmiana stylu elementu:
<input type="button" value="Change Color" onclick="changeColor()">
<p id="text">This is a paragraph.</p>
// Funkcja zmieniająca kolor paragrafu
function changeColor() {
document.getElementById('text').style.color = 'blue';
}
3.2 Element <input type="checkbox">
Element <input type="checkbox"> jest używany do tworzenia pól wyboru (checkboxów), które pozwalają użytkownikom wybrać jedną lub więcej opcji z dostępnych. Pole wyboru może być zaznaczone lub odznaczone.
Przykład użycia:
<label for="subscribe">Subscribe to newsletter:</label>
<input type="checkbox" id="subscribe" name="subscribe" value="yes">
Podstawowe atrybuty:
1. Atrybut name: ustawia nazwę elementu formularza, która zostanie przesłana na serwer wraz z danymi.
<input type="checkbox" name="subscribe">
2. Atrybut value: ustawia wartość, która zostanie przesłana na serwer, jeśli pole wyboru jest zaznaczone.
<input type="checkbox" name="subscribe" value="yes">
3. Atrybut checked: określa, czy pole wyboru ma być zaznaczone domyślnie.
<input type="checkbox" name="subscribe" value="yes" checked>
Przykłady użycia:
Kilka pól wyboru:
<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>
Pole wyboru z wstępnie ustawioną wartością:
<input type="checkbox" name="terms" value="agree" checked> I agree to the terms and conditions
3.3 Element <input type="radio">
Pole do wyboru radiobutton (type="radio")
Element <input type="radio"> jest używany do tworzenia „przycisków radiowych”, które pozwalają użytkownikom wybrać tylko jedną opcję z grupy. Przyciski radiowe są grupowane przez to samo wartości atrybutu name.
Przykład użycia:
<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>
Podstawowe atrybuty:
Atrybut name: ustawia nazwę grupy przycisków radiowych. Wszystkie przyciski radiowe z tą samą nazwą będą należeć do jednej grupy i użytkownik będzie mógł wybrać tylko jeden z nich.
<input type="radio" name="gender" value="male">
<input type="radio" name="gender" value="female">
Atrybut value: ustawia wartość, która zostanie przesłana na serwer, jeśli przycisk radiowy jest wybrany.
<input type="radio" name="gender" value="male">
Atrybut checked: określa, czy przycisk radiowy ma być wybrany domyślnie.
<input type="radio" name="gender" value="male" checked>
Przykłady użycia:
Grupa przycisków radiowych dla wyboru jednej opcji:
<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>
Przycisk radiowy z wstępnie ustawioną wartością:
<input type="radio" name="subscription" value="monthly" checked>Monthly<br>
<input type="radio" name="subscription" value="yearly">Yearly<br>
GO TO FULL VERSION