javascript
  • Introduction
  • JS Introduction
    • What is Frontend about ?
    • How Web works, basically ?
    • What is Javascript, really ?
  • JS Basics
    • Grammar and types
      • Comments
      • Variables
      • Types
    • Conditional Logic
      • Basics
      • Examples
      • References
    • Equality
      • Basics
      • Examples
      • References
    • Loops
      • For
      • While
      • Do...While
    • Numbers
      • Basics
      • Methods
      • Examples
      • References
    • Strings
      • Basics
      • Methods
      • Examples
      • References
    • Boolean
      • Basics
      • Methods
      • Examples
      • References
    • Objects
      • Basics
      • Methods
      • Examples
      • References
    • Arrays
      • Basics
      • Methods
      • Examples
      • References
    • Null, Undefined
  • Advanced Javascript
    • Scope
    • Closures
      • Practical Use
      • References
    • Context (this)
    • OOP in Javascript
      • Basics
      • Custom objects
    • FP in Javascript
      • Functional elements
      • Functional concepts
    • Inheritance and the prototype chain
      • Basics
      • Prototype chain
    • Event Loop
    • Memory management
  • JS in Browser
    • DOM & BOM
    • Events
    • Controls
  • JS on Server
Powered by GitBook
On this page
  • Псевдомассив form.elements
  • Элемент label
  1. JS in Browser

Controls

PreviousEventsNextJS on Server

Last updated 6 years ago

Элементы управления, такие как<form>,<input>и другие имеют большое количество своих важных свойств и ссылок.

Псевдомассив form.elements

ЭлементыFORMможно получить по имени или номеру, используя свойствоdocument.forms[name/index].

Например:

document.forms.my -- форма с именем 'my'
document.forms[0] -- первая форма в документе

Любой элемент формыformможно получить аналогичным образом, используя свойствоform.elements.

Например:

<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 ); // 1
  </script>
</body>

Может быть несколько элементов с одинаковым именем. В таком случаеform.elements[name]вернет коллекцию элементов, например:

<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>. Вот пример:

<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>

Элемент label

Элементlabel– один из самых важных в формах.

Клик наlabelзасчитывается как фокусировка или клик на элементе формы, к которому он относится.

Это позволяет посетителям кликать на большой красивой метке, а не на маленьком квадратикеinput type=checkbox(radio). Конечно, это очень удобно.

Есть два способа показать, какой элемент относится кlabel:

Дать метке атрибутfor, равныйidсоответствующегоinput:

<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>

Завернуть элемент вlabel. В этом случае можно обойтись без дополнительных атрибутов:

<label>Кликни меня <input type="checkbox"></label>