Formuláře a ovládací prvky, například <input>
mají spoustu speciálních vlastností a událostí.
Práce s formuláři bude mnohem pohodlnější, když se je naučíme.
Navigace:formulář a prvky
Formuláře dokumentů jsou členy speciální kolekce document.forms
.
Jedná se o takzvanou „pojmenovanou sbírku“ :je to jak pojmenované, tak objednané. K získání formuláře můžeme použít jak jméno, tak číslo v dokumentu.
document.forms.my; // the form with name="my"
document.forms[0]; // the first form in the document
Když máme formulář, pak je v pojmenované kolekci form.elements
k dispozici jakýkoli prvek .
Například:
<form name="my">
<input name="one" value="1">
<input name="two" value="2">
</form>
<script>
// get the form
let form = document.forms.my; // <form name="my"> element
// get the element
let elem = form.elements.one; // <input name="one"> element
alert(elem.value); // 1
</script>
Může existovat více prvků se stejným názvem. To je typické pro přepínače a zaškrtávací políčka.
V takovém případě form.elements[name]
je kolekce . Například:
<form>
<input type="radio" name="age" value="10">
<input type="radio" name="age" value="20">
</form>
<script>
let form = document.forms[0];
let ageElems = form.elements.age;
alert(ageElems[0]); // [object HTMLInputElement]
</script>
Tyto navigační vlastnosti nezávisí na struktuře značky. Všechny ovládací prvky, bez ohledu na to, jak hluboko jsou ve formuláři, jsou dostupné v form.elements
.
Formulář může mít jednu nebo více <fieldset>
prvky uvnitř. Mají také elements
vlastnost, která v nich uvádí ovládací prvky formuláře.
Například:
<body>
<form id="form">
<fieldset name="userFields">
<legend>info</legend>
<input name="login" type="text">
</fieldset>
</form>
<script>
alert(form.elements.login); // <input name="login">
let fieldset = form.elements.userFields;
alert(fieldset); // HTMLFieldSetElement
// we can get the input by name both from the form and from the fieldset
alert(fieldset.elements.login == form.elements.login); // true
</script>
</body>
Kratší zápis:form.name
Existuje kratší zápis:k prvku můžeme přistupovat jako form[index/name]
.
Jinými slovy, namísto form.elements.login
můžeme napsat form.login
.
To také funguje, ale je tu menší problém:pokud přistoupíme k prvku a poté změníme jeho name
, pak je stále k dispozici pod starým názvem (stejně jako pod novým).
To je snadno vidět na příkladu:
<form id="form">
<input name="login">
</form>
<script>
alert(form.elements.login == form.login); // true, the same <input>
form.login.name = "username"; // change the name of the input
// form.elements updated the name:
alert(form.elements.login); // undefined
alert(form.elements.username); // input
// form allows both names: the new one and the old one
alert(form.username == form.login); // true
</script>
To však obvykle není problém, protože jen zřídka měníme názvy formulářových prvků.
Zpětný odkaz:element.form
Pro jakýkoli prvek je formulář dostupný jako element.form
. Formulář tedy odkazuje na všechny prvky a prvky odkazují na formulář.
Tady je obrázek:
Například:
<form id="form">
<input type="text" name="login">
</form>
<script>
// form -> element
let login = form.login;
// element -> form
alert(login.form); // HTMLFormElement
</script>
Prvky formuláře
Pojďme si promluvit o ovládacích prvcích formuláře.
vstup a textová oblast
K jejich hodnotě můžeme přistupovat jako input.value
(řetězec) nebo input.checked
(boolean) pro zaškrtávací políčka a přepínače.
Takhle:
input.value = "New value";
textarea.value = "New text";
input.checked = true; // for a checkbox or radio button
Použijte textarea.value
, nikoli textarea.innerHTML
Vezměte prosím na vědomí, že i když <textarea>...</textarea>
má svou hodnotu jako vnořené HTML, nikdy bychom neměli používat textarea.innerHTML
pro přístup.
Ukládá pouze kód HTML, který byl na stránce původně, nikoli aktuální hodnotu.
výběr a možnost
A <select>
prvek má 3 důležité vlastnosti:
select.options
– kolekce<option>
dílčí prvky,select.value
– hodnota z aktuálně vybraných<option>
,select.selectedIndex
– číslo z aktuálně vybraných<option>
.
Poskytují tři různé způsoby nastavení hodnoty pro <select>
:
- Najděte odpovídající
<option>
prvek (např. meziselect.options
) a nastavte jehooption.selected
natrue
. - Pokud známe novou hodnotu:nastavte
select.value
na novou hodnotu. - Pokud známe číslo nové možnosti:nastavte
select.selectedIndex
na toto číslo.
Zde je příklad všech tří metod:
<select id="select">
<option value="apple">Apple</option>
<option value="pear">Pear</option>
<option value="banana">Banana</option>
</select>
<script>
// all three lines do the same thing
select.options[2].selected = true;
select.selectedIndex = 2;
select.value = 'banana';
// please note: options start from zero, so index 2 means the 3rd option.
</script>
Na rozdíl od většiny ostatních ovládacích prvků <select>
umožňuje vybrat více možností najednou, pokud má multiple
atribut. Tento atribut se však používá zřídka.
Pro více vybraných hodnot použijte první způsob nastavení hodnot:přidejte/odeberte selected
vlastnost z <option>
dílčí prvky.
Zde je příklad, jak získat vybrané hodnoty z vícenásobného výběru:
<select id="select" multiple>
<option value="blues" selected>Blues</option>
<option value="rock" selected>Rock</option>
<option value="classic">Classic</option>
</select>
<script>
// get all selected values from multi-select
let selected = Array.from(select.options)
.filter(option => option.selected)
.map(option => option.value);
alert(selected); // blues,rock
</script>
Úplná specifikace <select>
prvek je k dispozici ve specifikaci https://html.spec.whatwg.org/multipage/forms.html#the-select-element.
nová možnost
Ve specifikaci je pěkná krátká syntaxe pro vytvoření <option>
prvek:
option = new Option(text, value, defaultSelected, selected);
Tato syntaxe je volitelná. Můžeme použít document.createElement('option')
a nastavit atributy ručně. Přesto může být kratší, takže zde jsou parametry:
text
– text uvnitř možnosti,value
– hodnotu opce,defaultSelected
– pokudtrue
a potéselected
HTML-atribut je vytvořen,selected
– pokudtrue
, pak se vybere možnost.
Rozdíl mezi defaultSelected
a selected
je to defaultSelected
nastavuje atribut HTML (který můžeme získat pomocí option.getAttribute('selected')
, zatímco selected
nastaví, zda je volba vybrána nebo ne.
V praxi by se obvykle mělo nastavit obojí hodnoty na true
nebo false
. (Nebo je jednoduše vynechejte; obě výchozí hodnoty jsou false
.)
Zde je například nová „nevybraná“ možnost:
let option = new Option("Text", "value");
// creates <option value="value">Text</option>
Stejná možnost, ale vybraná:
let option = new Option("Text", "value", true, true);
Prvky možností mají vlastnosti:
option.selected
- Je tato možnost vybrána.
option.index
- Číslo možnosti mezi ostatními v
<select>
. option.text
- Textový obsah možnosti (viditelný návštěvníkem).
Odkazy
- Specifikace:https://html.spec.whatwg.org/multipage/forms.html.
Shrnutí
Navigace ve formuláři:
document.forms
- Formulář je k dispozici jako
document.forms[name/index]
. form.elements
- Prvky formuláře jsou dostupné jako
form.elements[name/index]
, nebo můžete použít pouzeform[name/index]
.elements
vlastnost funguje také pro<fieldset>
. element.form
- Prvky odkazují na svou formu v
form
vlastnost.
Hodnota je k dispozici jako input.value
, textarea.value
, select.value
atd. (Pro zaškrtávací políčka a přepínače použijte input.checked
určit, zda je vybrána hodnota.)
Pro <select>
, lze hodnotu získat také pomocí indexu select.selectedIndex
nebo prostřednictvím kolekce možností select.options
.
To jsou základy, jak začít pracovat s formuláři. S mnoha příklady se dále setkáme v tutoriálu.
V další kapitole se budeme zabývat focus
a blur
události, které se mohou vyskytnout u libovolného prvku, ale většinou jsou zpracovávány ve formulářích.