Доступ к элементам формы
Как правило, доступ к элементу HTML осуществляется по его идентификатору с помощью метода document.getElementById(). Но для доступа к HTML-формам чаще всего используется свойство document.forms. Свойство document.forms представляет собой массив всех форм на текущей странице. Поэтому если на странице находится лишь одна форма, то она доступна с помощью первого элемента массива document.forms[0]. С другой стороны, форме можно присвоить имя:
...
</form>
Тогда она доступна с помощью элемента массива document.forms["mainForm"].
Обращение ко всем элементам формы также осуществляется по имени, которое служит в качестве индекса массива в свойстве elements формы. Допустим, например, что у первой формы на странице имеется элемент с атрибутом name=”element1″. Тогда доступ к этому элементу осуществляется с помощью следующего кода JavaScript:
Имеется и более краткая форма доступа к информации формы. Например, сокращенная форма доступа к элементу “element1″ формы “mainForm” выглядит так:
Каждый элемент формы поддерживает свойство form, указывающее на ту форму, в которой находится данный элемент. Поэтому выражение this.form часто используется в коде для упрощения доступа к форме на уровне элементов полей данной формы, не прибегая к массиву document.forms.
Доступ к текстовым полям
В HTML поддерживаются три вида текстовых полей.
- Однострочные текстовые поля: <input type=”text” />
- Многострочные текстовые поля: <textarea>…</textarea>
- Поля ввода паролей: <input type=”password” />
Несмотря на то что эти поля действуют по-разному в браузере, доступ к ним в JavaScript осуществляется практически одинаково. Атрибут value каждого из этих полей содержит текст внутри поля. Его можно использовать как для чтения, так и для записи текста в поле.
В приведенном ниже фрагменте кода демонстрируется два следующих приема: доступ к свойству поля и применение выражения this.form для упрощенного доступа к форме данного поля.
function showText(f) {
window.alert(f.elements["textfield"].value);
}
</script>
<form>
<input type="text" name="textfield" />
<input type="button" value="Show text" onclick="showText(this.form);" />
</form>
Доступ к флажкам
Флажок в HTML-форме может находиться в двух состояниях: установленном и сброшенном. Поэтому обращение к флажку их кода JavaScript чаще всего осуществляется для определения его состояния.
Свойство checked флажка возвращает логическое значение true, если флажок установлен, а в противном случае — логическое значение false.
function showStatus(f) {
window.alert("The checkbox is " +
(f.elements["chkbox"].checked ? "checked." : "not checked."));
}
</script>
<form>
<input type="checkbox" name="chkbox" />
<input type="button" value="Show status" onclick="showStatus(this.form);" />
</form>
Оставьте свой отзыв