Помогите с инфой пожалуйста

Question

Помогите с инфой пожалуйста

Наталья Белякова Ученик (98), на голосовании 11 месяцев назад

Задание 1: Создайте файл HTML, в котором будет кнопка и пустой параграф.

Задание 2: Создайте файл HTML, в котором будет два параграфа и кнопка. Используйте JavaScript, чтобы при нажатии на кнопку текст из первого параграфа копировался во второй.

Задание 3: Создайте файл HTML, который будет содержать две кнопки и параграф.

Answer 1

Кнопка создаётся двумя разными методами:

с помощью элемента <input>;
с помощью элемента <button>.
Использование <input>
Элемент <input> универсальный и в зависимости от значения атрибута type создаёт разные элементы формы: кнопки, переключатели, текстовые поля и др. Для кнопок зарезервировано три значения type, которые позволяют создать кнопки с разным функционалом:

<input type="button"> — обычная кнопка;
<input type="submit"> — кнопка для отправки формы на сервер;
<input type="reset"> — кнопка для очистки формы.
Следует помнить, что все три варианта создают кнопки, по своему виду никак не различающиеся между собой. Разница лишь в их поведении.

Обычная кнопка
Такая кнопка применяется, как правило, в сочетании с JavaScript и при щелчке по кнопке выполняет заложенные в неё действия.

<input type="button" value="Переключить цвет" onclick="changeColor()">
Здесь используются следующие атрибуты:

type="button" — создаёт кнопку;
value — определяет надпись на кнопке;
onclick — событие JavaScript, отвечающее за щелчок по кнопке.
В примере 1 при щелчке по кнопке вызывается пользовательская функция changeColor(), которая переключает цвет текста у класса .color с чёрного на красный и обратно.

Пример 1. Создание кнопки

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Кнопка</title>
<style>
.red { color: red; }
</style>
<script>
function changeColor() {
document.querySelector('.color').classList.toggle('red');
}
</script>
</head>
<body>
<p class="color">Пример текста.</p>
<p><input type="button" value="Переключить цвет" onclick="changeColor()"></p>
</body>
</html>

Если забыть добавить не обязательный атрибут value, то кнопка получится «пустой» без всяких надписей на ней.

Кнопка для отправки формы на сервер
Такая кнопка позволяет пользователю отправить заполненную форму на сервер. Для этого сперва создаётся форма через элемент <form>, внутри неё добавляется кнопка с атрибутом type и значением submit (пример 2).