update
This commit is contained in:
Ilya Kantor
parent
962caebbb7
commit
87bf53d076
1825 changed files with 94929 additions and 0 deletions
|
|
@ -0,0 +1,25 @@
|
|||
Решение:
|
||||
|
||||
```html
|
||||
<!--+ run -->
|
||||
<select>
|
||||
<option value="Rock">Рок</option>
|
||||
<option value="Blues" selected>Блюз</option>
|
||||
</select>
|
||||
|
||||
<script>
|
||||
var select = document.body.children[0];
|
||||
|
||||
// 1)
|
||||
var selectedOption = select.options[select.selectedIndex];
|
||||
alert(selectedOption.value);
|
||||
|
||||
// 2)
|
||||
var newOption = new Option("Classic", "Классика");
|
||||
select.appendChild(newOption);
|
||||
|
||||
// 3)
|
||||
newOption.selected = true;
|
||||
</script>
|
||||
```
|
||||
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
# Добавьте опцию к селекту
|
||||
|
||||
[importance 5]
|
||||
|
||||
Есть селект:
|
||||
|
||||
```html
|
||||
<select>
|
||||
<option value="Rock">Рок</option>
|
||||
<option value="Blues" selected>Блюз</option>
|
||||
</select>
|
||||
```
|
||||
|
||||
При помощи JavaScript:
|
||||
<ol>
|
||||
<li>Выведите значение и текст текущей выбранной опции.</li>
|
||||
<li>Добавьте опцию: `<option value="Classic">Классика</option>`.</li>
|
||||
<li>Сделайте её выбранной.</li>
|
||||
</ol>
|
||||
306
2-ui/4-forms-controls/1-form-elements/article.md
Normal file
306
2-ui/4-forms-controls/1-form-elements/article.md
Normal file
|
|
@ -0,0 +1,306 @@
|
|||
# Навигация и свойства элементов формы
|
||||
|
||||
Элементы управления, такие как `<form>`, `<input>` и другие имеют большое количество своих важных свойств и ссылок.
|
||||
|
||||
[cut]
|
||||
|
||||
## Псевдомассив form.elements
|
||||
|
||||
Элементы `FORM` можно получить по имени или номеру, используя свойство `document.forms[name/index]`.
|
||||
|
||||
Например:
|
||||
|
||||
```js
|
||||
document.forms.my -- форма с именем 'my'
|
||||
document.forms[0] -- первая форма в документе
|
||||
```
|
||||
|
||||
**Любой *элемент* формы `form` можно получить аналогичным образом, используя свойство `form.elements`.**
|
||||
|
||||
<img src="form.png">
|
||||
|
||||
Например:
|
||||
|
||||
```html
|
||||
<!--+ run height=40 -->
|
||||
<body>
|
||||
<form name="my">
|
||||
<input name="one" value="1">
|
||||
<input name="two" value="2">
|
||||
</form>
|
||||
|
||||
<script>
|
||||
var form = document.forms.my; // можно document.forms[0]
|
||||
|
||||
var elem = form.elements.one; // можно form.elements[0]
|
||||
|
||||
alert(elem.value); // "один"
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
**Может быть несколько элементов с *одинаковым именем*. В таком случае `form.elements[name]` вернет коллекцию элементов**, например:
|
||||
|
||||
```html
|
||||
<!--+ run height=40 -->
|
||||
<body>
|
||||
<form>
|
||||
<input type="radio" name="*!*age*/!*" value="10">
|
||||
<input type="radio" name="*!*age*/!*" value="20">
|
||||
</form>
|
||||
|
||||
<script>
|
||||
var form = document.forms[0];
|
||||
|
||||
var elems = form.elements.age;
|
||||
|
||||
alert(elems[0].value); // 10, первый input
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
Эти ссылки не зависят от окружающих тегов. Элемент может быть "зарыт" где-то глубоко в форме, но он всё равно доступен через `form.elements`.
|
||||
|
||||
**Свойство `elements` также есть у элементов `<fieldset>`.**
|
||||
Вот пример:
|
||||
|
||||
```html
|
||||
<!--+ run height=80 -->
|
||||
<body>
|
||||
<form>
|
||||
<fieldset name="set"><legend>fieldset</legend>
|
||||
<input name="text" type="text">
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
var form = document.forms[0];
|
||||
|
||||
alert( form.elements.text ); // INPUT
|
||||
*!*
|
||||
alert( form.elements.set.elements.text ); // INPUT
|
||||
*/!*
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
Спецификация: [HTML5 Forms](http://www.w3.org/TR/html5/forms.html).
|
||||
|
||||
[warn header="Доступ `form.name` тоже работает, но с особенностями"]
|
||||
Получить доступ к элементам формы можно не только через `form.elements[name/index]`, но и проще: `form[index/name]`.
|
||||
|
||||
Этот способ короче, так как обладает одной неприятной особенностью: если к элементу обратиться по его `name`, а потом свойство `name` изменить, то он по-прежнему будет доступен под старым именем.
|
||||
|
||||
Звучит странно, поэтому посмотрим на примере.
|
||||
|
||||
```html
|
||||
<!--+ run height=40 -->
|
||||
<form name="myform"> <input name="text"> </form>
|
||||
|
||||
<script>
|
||||
var form = document.forms.myform;
|
||||
|
||||
alert(form.elements.text == form.text); // true, это тот самый INPUT
|
||||
|
||||
form.text.name = "new-name"; // меняем name ему
|
||||
|
||||
// нет больше элемента с таким именем
|
||||
alert(form.elements.text); // undefined
|
||||
|
||||
alert(form.text); // INPUT (а должно быть undefined!)
|
||||
</script>
|
||||
```
|
||||
|
||||
[/warn]
|
||||
|
||||
## Ссылка на форму element.form
|
||||
|
||||
По элементу можно получить его форму, используя свойство `element.form`.
|
||||
|
||||
Пример:
|
||||
|
||||
```html
|
||||
<!--+ run height=40 -->
|
||||
<body>
|
||||
<form>
|
||||
<input type="text" name="*!*surname*/!*">
|
||||
</form>
|
||||
|
||||
<script>
|
||||
var form = document.forms[0];
|
||||
|
||||
var elem = form.elements.surname;
|
||||
|
||||
*!*
|
||||
alert(elem.form == form); // true
|
||||
*/!*
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
Познакомиться с другими свойствами элементов можно в спецификации [HTML5 Forms](http://www.w3.org/TR/html5/forms.html).
|
||||
|
||||
## Элемент label
|
||||
|
||||
Элемент `label` -- один из самых важных в формах.
|
||||
|
||||
**Клик на `label` засчитывается как фокусировка или клик на элементе формы, к которому он относится.**
|
||||
|
||||
Это позволяет посетителям кликать на большой красивой метке, а не на маленьком квадратике `input type=checkbox` (`radio`). Конечно, это очень удобно.
|
||||
|
||||
Есть два способа показать, какой элемент относится к `label`:
|
||||
|
||||
<ol>
|
||||
<li>Дать метке атрибут `for`, равный `id` соответствующего `input`:
|
||||
|
||||
```html
|
||||
<!--+ autorun -->
|
||||
<table>
|
||||
<tr>
|
||||
<td><label for="agree">Согласен с правилами</label></td>
|
||||
<td><input id="agree" type="checkbox"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="not-a-robot">Я не робот</label></td>
|
||||
<td><input id="not-a-robot" type="checkbox"></td>
|
||||
</tr>
|
||||
</table>
|
||||
```
|
||||
|
||||
</li>
|
||||
<li>Завернуть элемент в `label`. В этом случае можно обойтись без дополнительных атрибутов:
|
||||
|
||||
```html
|
||||
<!--+ autorun -->
|
||||
<label>Кликни меня <input type="checkbox"></label>
|
||||
```
|
||||
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
## Элементы input и textarea
|
||||
|
||||
Для большинства типов `input` значение ставится/читается через свойство `value`.
|
||||
|
||||
```js
|
||||
input.value = "Новое значение";
|
||||
textarea.value = "Новый текст";
|
||||
```
|
||||
|
||||
[warn header="Не используйте `textarea.innerHTML`"]
|
||||
Для элементов `textarea` также доступно свойство `innerHTML`, но лучше им не пользоваться: оно хранит только HTML, изначально присутствовавший в элементе, и не меняется при изменении значения.
|
||||
[/warn]
|
||||
|
||||
Исключения -- `input type="checkbox"` и `input type="radio"`
|
||||
|
||||
**Текущее "отмеченное" состояние для `checkbox` и `radio` находится в свойстве `checked` (`true/false`).**
|
||||
|
||||
```js
|
||||
if (input.checked) {
|
||||
alert("Чекбокс выбран");
|
||||
}
|
||||
```
|
||||
|
||||
## Элементы select и option
|
||||
|
||||
Селект в JavaScript можно установить двумя путями: поставив значение `select.value`, либо установив свойство `select.selectedIndex` в номер нужной опции.:
|
||||
|
||||
```js
|
||||
select.selectedIndex = 0; // первая опция
|
||||
```
|
||||
|
||||
Установка `selectedIndex = -1` очистит выбор.
|
||||
|
||||
**Список элементов-опций доступен через `select.options`.**
|
||||
|
||||
Если `select` допускает множественный выбор (атрибут `multiple`), то значения можно получить/установить, сделав цикл по `select.options`. При этом выбранные опции будут иметь свойство `option.selected = true`.
|
||||
|
||||
Пример:
|
||||
|
||||
```html
|
||||
<!--+ run -->
|
||||
<form name="form">
|
||||
<select name="genre" *!*multiple*/!*>
|
||||
<option value="blues" selected>Мягкий блюз</option>
|
||||
<option value="rock" selected>Жёсткий рок</option>
|
||||
<option value="classic">Классика</option>
|
||||
</select>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
var form = document.forms[0];
|
||||
var select = form.elements.genre;
|
||||
|
||||
for (var i=0; i<select.options.length; i++) {
|
||||
var option = select.options[i];
|
||||
*!*
|
||||
if(option.selected) {
|
||||
alert(option.value);
|
||||
}
|
||||
*/!*
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
Спецификация: <a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-94282980">HTMLSelectElement</a>.
|
||||
|
||||
[smart header="`new Option`"]
|
||||
В стандарте [the Option Element](http://dev.w3.org/html5/spec/the-option-element.html#the-option-element) есть любопытный короткий синтаксис для создания элемента с тегом `option`:
|
||||
|
||||
```js
|
||||
option = new Option( text, value, defaultSelected, selected);
|
||||
```
|
||||
|
||||
Параметры:
|
||||
<ul>
|
||||
<li>`text` -- содержимое,</li>
|
||||
<li>`value` -- значение,</li>
|
||||
<li>`defaultSelected` и `selected` поставьте в `true`, чтобы сделать элемент выбранным.</li>
|
||||
</ul>
|
||||
|
||||
Его можно использовать вместо `document.createElement('option')`, например:
|
||||
|
||||
```js
|
||||
var option = new Option("Текст", "value");
|
||||
// создаст <option value="value">Текст</option>
|
||||
```
|
||||
|
||||
Такой же элемент, но выбранный:
|
||||
|
||||
```js
|
||||
var option = new Option("Текст", "value", true, true);
|
||||
```
|
||||
|
||||
[/smart]
|
||||
|
||||
[smart header="Дополнительные свойства `option`"]
|
||||
|
||||
У элементов `option` также есть особые свойства, которые могут оказаться полезными (см. [The Option Element](http://dev.w3.org/html5/spec/the-option-element.html#the-option-element)):
|
||||
|
||||
<dl>
|
||||
<dt>`selected`</dt>
|
||||
<dd>выбрана ли опция</dd>
|
||||
<dt>`index`</dt>
|
||||
<dd>номер опции в списке селекта</dd>
|
||||
<dt>`text`</dt>
|
||||
<dd>Текстовое содержимое опции (то, что видит посетитель).</dd>
|
||||
</dl>
|
||||
|
||||
[/smart]
|
||||
|
||||
|
||||
## Итого
|
||||
|
||||
Свойства для навигации по формам:
|
||||
|
||||
<dl>
|
||||
<dt>`document.forms`</dt>
|
||||
<dd>Форму можно получить как <code>document.forms[name/index].</dd>
|
||||
<dt>`form.elements`</dt>
|
||||
<dd>Элементы в форме: <code>form.elements[name/index]</code>. Каждый элемент имеет ссылку на форму в свойстве `form`. Свойство `elements` также есть у `<fieldset>`.</dd>
|
||||
</dl>
|
||||
|
||||
Значение элементов читается/ставится через `value` или `checked`.
|
||||
|
||||
Для элемента `select` можно задать опцию по номеру через `select.selectedIndex` и перебрать опции через `select.options`. При этом выбранные опции (в том числе при мультиселекте) будут иметь свойство `option.selected = true`.
|
||||
|
||||
BIN
2-ui/4-forms-controls/1-form-elements/form.png
Executable file
BIN
2-ui/4-forms-controls/1-form-elements/form.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 7 KiB |
Loading…
Add table
Add a link
Reference in a new issue