3.1 Элемент <input type="button">
Элемент <input type="button"> используется для создания кнопки, которая не имеет встроенного поведения по умолчанию. В отличие от кнопок submit и reset, которые выполняют определенные действия при нажатии, кнопка button обычно используется в сочетании с JavaScript для выполнения определенных задач.
Пример использования:
<input type="button" value="Click Me" onclick="alert('Button clicked!')">
Основные атрибуты:
1. Атрибут value: устанавливает текст, который будет отображаться на кнопке.
<input type="button" value="Click Me">
2. Атрибут onclick: определяет JavaScript-функцию, которая выполнится при нажатии на кнопку.
<input type="button" value="Click Me" onclick="myFunction()">
function myFunction() {
alert('Button clicked!');
}
Примеры использования:
Вызов функции JavaScript:
<input type="button" value="Show Alert" onclick="showAlert()">
function showAlert() {
alert('This is an alert!');
}
Изменение стиля элемента:
<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 Элемент <input type="checkbox">
Элемент <input type="checkbox"> используется для создания флажков/галочек (чекбоксов), которые позволяют пользователям выбирать один или несколько вариантов из предложенных. Флажок может быть включен или выключен.
Пример использования:
<label for="subscribe">Subscribe to newsletter:</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>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>
Флажок с предварительно установленным значением:
<input type="checkbox" name="terms" value="agree" checked> I agree to the terms and conditions
3.3 Элемент <input type="radio">
Поле для выбора радиокнопки (type="radio")
Элемент <input type="radio"> используется для создания «радиокнопок», которые позволяют пользователям выбирать только один вариант из группы. Радиокнопки объединяются в группы с помощью одинакового значения атрибута name.
Пример использования:
<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>
Основные атрибуты:
Атрибут 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>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>
Радиокнопка с предварительно установленным значением:
<input type="radio" name="subscription" value="monthly" checked>Monthly<br>
<input type="radio" name="subscription" value="yearly">Yearly<br>
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ