Page 137 - 6108

даному випадку якщо текст складається з пробілів або не був введений, то
змінюємо колір границі поля на червоний.
Елемент textarea дозволяє ввести багаторядковий текст. Основні
властивості і методи подібні до елементу input з атрибутом type = 'text'. і
відповідні події.
Прапорці, перемикачі
Прапорці – поле, в яке можна поставити позначку і яке створюється за
допомогою елемента

<input type = "checkbox" />.
Відмінну рису прапорця – властивість checked, яке приймає true, якщо
прапорець відмічено і false, якщо ні. Натискання на прапорець генерує подія

click.
Перемикачі представляють групи кнопок, з яких можна вибрати тільки
одну. Перемикачі створюються елементом
<input type = "radio" />

Вибір або натискання на одну з них також генерує подію click.
При створенні групи перемикачів їх атрибут name повинен мати одне і те
ж значення.
Оскільки перемикачів може бути багато, то при прикріпленні до них
обробника події треба пробігтися по всьому масиву перемикачів, який можна
отримати за ім'я групи.

<form>
<p><label><input type=radio name=size value="small">Small
</label></p>
<p><label><input type=radio name=size value="medium">Medium
</label></p>
<p><label><input type=radio name=size value="large">Large
</label></p>
</form>
<div id="size"></div>

let sizes = document.forms[0].elements.namedItem('size');
function selectSize() {
let sizePizza;
sizes.forEach(element => {
if (element.checked) sizePizza = element.value;
});
return sizePizza;
}
function showSize() {
let sizeBox = document.getElementById('size');
sizeBox.textContent = `Pizza size: ${selectSize()}`;
}
sizes.forEach(element => {
element.addEventListener('click', showSize);
});