3.1 Елемент <input type="button">
Елемент <input type="button"> використовується для створення кнопки, яка не має вбудованої поведінки за замовчуванням. На відміну від кнопок submit і reset, які виконують певні дії при натисканні, кнопка button зазвичай використовується у поєднанні з JavaScript для виконання певних завдань.
Приклад використання:
<input type="button" value="Click Me" onclick="alert('Кнопку натиснуто!')">
Основні атрибути:
1. Атрибут value: встановлює текст, який буде відображатися на кнопці.
<input type="button" value="Click Me">
2. Атрибут onclick: визначає JavaScript-функцію, яка виконається при натисканні на кнопку.
<input type="button" value="Click Me" onclick="myFunction()">
function myFunction() {
alert('Кнопку натиснуто!');
}
Приклади використання:
Виклик функції JavaScript:
<input type="button" value="Show Alert" onclick="showAlert()">
function showAlert() {
alert('Це alert!');
}
Зміна стилю елемента:
<input type="button" value="Change Color" onclick="changeColor()">
<p id="text">Це абзац.</p>
function changeColor() {
document.getElementById('text').style.color = 'blue';
}
3.2 Елемент <input type="checkbox">
Елемент <input type="checkbox"> використовується для створення чекбоксів, які дозволяють користувачам вибирати один або кілька варіантів із запропонованих. Чекбокс може бути увімкненим або вимкненим.
Приклад використання:
<label for="subscribe">Підписатись на розсилку:</label>
<input type="checkbox" id="subscribe" name="subscribe" value="yes">
Основні атрибути:
1. Атрибут name: встановлює ім'я елемента форми, яке буде надіслано на сервер разом із даними.
<input type="checkbox" name="subscribe">
2. Атрибут value: встановлює значення, яке буде надіслане на сервер, якщо чекбокс встановлений.
<input type="checkbox" name="subscribe" value="yes">
3. Атрибут checked: визначає, чи повинен чекбокс бути встановленим за замовчуванням.
<input type="checkbox" name="subscribe" value="yes" checked>
Приклади використання:
Кілька чекбоксів:
<p>Виберіть ваші інтереси:</p>
<input type="checkbox" name="interest" value="sports">Спорт<br>
<input type="checkbox" name="interest" value="music">Музика<br>
<input type="checkbox" name="interest" value="movies">Фільми<br>
Чекбокс із заданим значенням за замовчуванням:
<input type="checkbox" name="terms" value="agree" checked> Я погоджуюсь із умовами
3.3 Елемент <input type="radio">
Поле для вибору радіокнопки (type="radio")
Елемент <input type="radio"> використовується для створення «радіокнопок», які дозволяють користувачам вибирати тільки один варіант із групи. Радіокнопки об'єднуються в групи за допомогою однакового значення атрибуту name.
Приклад використання:
<p>Оберіть вашу стать:</p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Чоловік</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Жінка</label><br>
Основні атрибути:
Атрибут name: встановлює ім'я групи радіокнопок. Усі радіокнопки з однаковим іменем будуть належати одній групі, і користувач зможе вибрати тільки одну з них.
<input type="radio" name="gender" value="male">
<input type="radio" name="gender" value="female">
Атрибут value: встановлює значення, яке буде надіслане на сервер, якщо радіокнопка вибрана.
<input type="radio" name="gender" value="male">
Атрибут checked: визначає, чи повинна радіокнопка бути вибраною за замовчуванням.
<input type="radio" name="gender" value="male" checked>
Приклади використання:
Група радіокнопок для вибору одного варіанта:
<p>Оберіть колір:</p>
<input type="radio" name="color" value="red">Червоний<br>
<input type="radio" name="color" value="green">Зелений<br>
<input type="radio" name="color" value="blue">Синій<br>
Радіокнопка із заданим значенням за замовчуванням:
<input type="radio" name="subscription" value="monthly" checked>Щомісячна<br>
<input type="radio" name="subscription" value="yearly">Щорічна<br>
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ