Vlastnosti a metody formuláře

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 .

Sady polí jako „podformuláře“

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:

  1. select.options – kolekce <option> dílčí prvky,
  2. select.valuehodnota z aktuálně vybraných <option> ,
  3. select.selectedIndexčíslo z aktuálně vybraných <option> .

Poskytují tři různé způsoby nastavení hodnoty pro <select> :

  1. Najděte odpovídající <option> prvek (např. mezi select.options ) a nastavte jeho option.selected na true .
  2. Pokud známe novou hodnotu:nastavte select.value na novou hodnotu.
  3. 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 – pokud true a poté selected HTML-atribut je vytvořen,
  • selected – pokud true , 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 pouze form[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.