Page 139 - 6108

<form name="myForm">
<select name="language" size="5">
<option value="JS"
selected="selected">JavaScript</option>
<option value="Java">Java</option>
<option value="CS">C#</option>
<option value="CPP">C++</option>
</select>
<p><input type="text" name="textInput"
placeholder="Введіть текст" /></p>
<p><input type="text" name="valueInput"
placeholder="Введіть значення" /></p>
<p><button type="button" name="addButton">Додати</button>
<button type="button"
name="removeButton">Видалити</button></p>
</form>

let languagesSelect = myForm.language;
function addOption(){
let text = myForm.textInput.value;
let value = myForm.valueInput.value;
languagesSelect.add(new Option(text, value));
}
function removeOption(){
languagesSelect.remove(languagesSelect.selectedIndex);
}
myForm.addButton.addEventListener("click", addOption);
myForm.removeButton.addEventListener("click", removeOption);
Елемент select підтримує три події: blur (втрата фокус), focus
(отримання фокусу) і change (зміна виділеного елемента в списку).

<div id="selection"></div>
function changeOption(){
let selection = document.getElementById("selection");
let selectedOption =
languagesSelect[languagesSelect.selectedIndex];
selection.textContent = "Вибрано: " + selectedOption.text;
}
languagesSelect.addEventListener("change", changeOption);
Кнопки
Для відправки введених даних на формі використовуються кнопки. Для
створення кнопки використовується елементи input або button:

<button name="send" type="submit" >Відправити</button>
<input type="submit" name="send" value="Відправити" />

При натисканні на кнопку відбувається відправка форми за адресою, яка
вказана в формі в атрибуті action, або за адресою веб-сторінки, якщо атрибут
action не вказано. Однак в коді javascript можна перехопити відправку,
обробляючи подія click.
Для очищення форми призначені наступні рівноцінні по функціональності
кнопки:

<button type = "reset"> Очистити </ button>
<input type = "reset" value = "Очистити" />