Робота з формами Java Script

Якщо в HTML-документі визначено форму, то вона доступна сценарію JavaScript як об'єкт, що входить в об'єкт document з ім'ям, заданим атрибутом NAME тега FORM.

Нехай у нас є наступна форма:
<form name="my" id="forma" action="https://www.google.com/search" method="post">
<input name="one" value="1">
<input name="two" value="2">
</form>
<span id="for_A1"></span>
Отримання форми:
document.my;
Подивитися текст коду
function f_getform(){
const txt = document.my;
document.getElementById('for_A1').innerHTML =
"Отримання форми за ім'ям:<br>" + txt;
}
- доступ до форми з ім'ям "my"
document.my;
Подивитися текст коду
function f_getformDoc(){
const txt = document.forms["my"];
document.getElementById('for_A1').innerHTML =
"Отримання форми за ім'ям зі списку форм:<br>" + txt;
}
- доступ до форми з ім'ям "my"
document.forms[0];
Подивитися текст коду
function f_getformList(){
const txt = document.forms[0];
document.getElementById('for_A1').innerHTML =
"Перша форма зі списку форм на сторінці:<br>" + txt;
}
- доступ до першої форми зі списку форм на сторінці
document.getElementById("forma");
document.getElementsByName("my")[0];
document.querySelector("form");
Подивитися текст коду
function f_getformSearch(){
const formId = document.getElementById("forma");
const formName = document.getElementsByName("my")[0];
const formTag = document.querySelector("form");
document.getElementById('for_A1').innerHTML =
"Форма по id: " + formId +
"<br> Форма за ім'ям: " + formName +
"<br> Форма за тегом: " + formTag;
}
- способи доступу аналогічні способам доступу до інших елементів на сторінці

Доступ до властивостей форми:
form.action
Подивитися текст коду
function f_action(){
const form = document.my;
document.getElementById('for_A1').innerHTML = form.action;
}
- значення атрибуту action: адреса відправки форми
form.target
Подивитися текст коду
function f_target(){
const form = document.my;
document.getElementById('for_A1').innerHTML = form.target;
}
- значення атрибута target: фрейм, куди відправити отриману інформацію (задається у документах, що містять фрейми)
form.method
Подивитися текст коду
function f_method(){
const form = document.my;
document.getElementById('for_A1').innerHTML = form.method;
}
- метод HTTP, що застосовується для відправки
form.name
Подивитися текст коду
function f_name(){
const form = document.my;
document.getElementById('for_A1').innerHTML = form.name;
}
- ім'я форми
form.length
Подивитися текст коду
function f_length(){
const form = document.my;
document.getElementById('for_A1').innerHTML = form.length;
}
- кількість елементів форми
form.elements
Подивитися текст коду
function f_elements(){
const form = document.my;
document.getElementById('for_A1').innerHTML = form.elements;
}
- колекція елементів форми

Доступ до елементів форми:
Окрім стандартних методів getElementById(), getElementsByClassName(), getElementsByTagName(), getElementsByName(), querySelector() і querySelectorAll() доступні також наступні спеціальні методи:
form.elements[0]
Подивитися текст коду
function f_getElementsIndex(){
const form = document.my;
document.getElementById('for_A1').innerHTML =
"Елемет по id: " + form.elements[0];
}
- отримання елементу зі списку по індексу
form.elements["one"]
Подивитися текст коду
function f_getElementsName(){
const form = document.my;
document.getElementById('for_A1').innerHTML =
"Елемент по імені " + form.elements["one"];
}
- отримання елементу зі списку по імені
document.my.one
Подивитися текст коду
function f_getElementsPath(){
const form = document.my;
document.getElementById('for_A1').innerHTML =
"Елемент через об'єкт форми:<br> " + document.my.one;
}
- отримання елементу через об'єкт форми

Властивості елементів форми:
document.my.one.type
Подивитися текст коду
function f_elementsType(){
const elementOne = document.my.one;
document.getElementById('for_A1').innerHTML =
"Тип елементу: " + elementOne.type;
}
- тип елементу або значення атрибуту type у поля input
document.my.one.value
Подивитися текст коду
function f_elementsValue(){
const elementOne = document.my.one;
const oldValue = elementOne.value;
elementOne.value = "3";
document.getElementById('for_A1').innerHTML =
"Попереднє значення поля: " + oldValue +
"<br>Нове значення поля: " + elementOne.value;
}
- значення текстового поля форми
document.my.one.focus()
Подивитися текст коду
function f_elementsFokus(){
document.my.one.focus();
}
- курсор на полі форми
document.my.one.blur()
Подивитися текст коду
function f_elementsBlur(){
document.my.one.focus();
}
- прибирає курсор із поля форми
document.my.reset()
Подивитися текст коду
function f_elementsReset(){
document.my.one.focus();
}
- видаляє введені значення полів форми

Кнопки:
Для відправки форм можна використовувати наступні кнопки:
<button name="send">Відправити</button>
 - кнопка <button> <input type="submit" name="send" value="Відправити"/>
 - кнопка відправки форм <input type="submit"/>, має знаходитися у формі
<button type="reset">Очистити</button>
 - кнопка button очистки форм <input type="reset" value="Очистити"/>
 - кнопка input очистки форм

Способи обробки натискань:
<button onclick="f_onclick()"></button>
Подивитися текст коду
function f_onclick(){
document.getElementById('for_A1').innerHTML = "Натиснули button";
}
- з використанням властивості onclick кнопки <button>
<input type="submit"
name="sendButton" value="Подивитися результат"/>
Подивитися текст коду
function f_onevent(){
alert("Натиснули кнопку input");
}
const sendButton = document.search.sendButton;
sendButton.addEventListener("click", f_onevent);
- з використанням обробчика подій

Події полів input:
Нехай у нас є форма із полем:
<form name="inputForm">
<input type="text" name="inputField" value="type here" />
<button type="reset"> clean </button>
<span id="symbol"> </span>
</form>
<div id="printBlock"> </div>
focus
Подивитися текст коду
const field = document.inputForm.inputField;
function i_focus(e){
field.style.backgroundColor = "MintCream";
}
field.addEventListener("focus", i_focus);
- коли курсор знаходиться в полі
blur
Подивитися текст коду
const field = document.inputForm.inputField;
const resetOutline = field.style.outline;
function i_blur(e){
field.style.backgroundColor = "WhiteSmoke";
const text = field.value.trim();
if(text==="")
field.style.outline = "solid 3px red";
else
field.style.outline = resetOutline;
}
field.addEventListener("blur", i_blur);
- курсор знаходиться поза полем
зручно використовувати для відновлення стилів
change
Подивитися текст коду
const field = document.inputForm.inputField;
function i_change(e){
field.style.border = "solid 4px PaleVioletRed";
}
field.addEventListener("change", i_change);
- змінене значення поля value
input
Подивитися текст коду
const field = document.inputForm.inputField;
function i_input(e){
field.style.outline = "solid 4px MediumAquamarine";
}
field.addEventListener("input", i_input);
- відбувається введення тексту в поле
select
Подивитися текст коду
const field = document.inputForm.inputField;
function i_select(e){ <xmp> field.style.backgroundColor = "Lavender"; <xmp>} <xmp>field.addEventListener("select", i_select);
- виділення тексту поля
keydown
Подивитися текст коду
const field = document.inputForm.inputField;
function i_keydown(e){
const symbolSpan = document.getElementById("symbol");
symbolSpan.textContent = "✎";
}
field.addEventListener("keydown", i_keydown);
- натискання клавіші клавіатури
keyup
Подивитися текст коду
const field = document.inputForm.inputField;
function i_keyup(e){
const symbolSpan = document.getElementById("symbol");
symbolSpan.textContent = " ";
}
field.addEventListener("keyup", i_keyup);
- відпускання попередньо натиснутої клавіші клавіатури
keypress
Подивитися текст коду
const field = document.inputForm.inputField;
function i_keypress(e){
const printBlock = document.getElementById("printBlock");
const val = e.target.value;
printBlock.textContent = val;
}
field.addEventListener("keypress", i_keypress);
- натискання клавіші клавіатури із символами вводу

Події прапорців і перемикачів:
checked
Подивитися текст коду
function ch_checked() {
var checkBox = document.getElementById("myCheck");
var text = document.getElementById("ch_text");
if (checkBox.checked == true)
text.innerHTML = "★";
else
text.innerHTML = "✩";
}
- введені дані отримуємо в незашифрованому вигляді

Робота з текстовими полями:
Поле вводу паролю
Подивитися текст коду
const field = document.inputForm.inputField;
function oninput(e){
const printBlock = document.getElementById("printBlock");
printBlock.textContent = e.target.value;
}
field.addEventListener("input", oninput);
- введені дані отримуємо в незашифрованому вигляді