Под текстовыми полями будем понимать элементы формы, предназначенные для ввода информации. Сюда относится непосредственно текстовое поле, поле для ввода пароля и многострочное поле.
Получить значение текстового поля можно через семейство forms. Для первой формы в документе обращение к ее элементам будет document.forms[0].имя поля.value (пример 1). Имя текстового поля задается через параметр name тега INPUT, для удобства работы с элементом формы рекомендуется всегда указывать этот атрибут.
Пример 1. Получение значения текстового поля function getData() {
alert("Вы ввели: " + document.forms[0].textField.value);
}
</script>
</head>
<body>
<form>
<input type=text name=textField size=45> <input type="button"
value="Нажми меня" onClick="getData()">
</form>
</body>
</html>
Результат примера 1 представлен ниже. При нажатии на кнопку выводится сообщение, в котором указано, какой текст был введен в поле.
Можно упростить вызов значения параметра, передавая его непосредственно в функцию getData. Сделать это можно, указав ключевое слово this.form или this.form.имя элемента.value (пример 2).
Пример 2. Обращение к элементу формы<input type=text name=textField size=45> <input type="button" value="Нажми меня" onClick="getData(this.form)">
--------------
<script language="JavaScript">
function getData(f) {
alert("Вы ввели: " + f);
}
</script>
<input type=text name=textField size=45> <input type="button" value="Нажми меня" onClick="getData(this.form.textField.value)">
f - аргумент функции getData, указывающий на форму или ее элемент, имя здесь может быть любое.
Обязательно учитывайте регистр написания имен форм и ее элементов, иначе возникнет ошибка. Имена в коде HTML и скрипте должны быть идентичны.
Данное поле в плане работы с данными ничем не отличается от обычного текстового поля. Единственное различие — результат ввода заменяется звездочками, чтобы нельзя было подглядеть, какой пароль набирается.
В примере 3 результат ввода пароля присваивается текстовому полю. Вызов функции getData происходит при выполнении события onKeyUp, которое в данном случае отслеживает ввод текста с клавиатуры.
Пример 3. Использование поля для пароля function getData(f) {
f.textField.value = f.passField.value
}
</script>
</head>
<body>
<form>
<input type=password name=passField size=25 onKeyUp="getData(this.form)">
<input type=text name=textField size=25 disabled>
</form>
</body>
</html>
Результат примера представлен ниже. Ввод в текстовое поле деактивирован через параметр disabled, чтобы набирать можно было только пароль.
В это поле допустимо вводить не только текст, включая любое количество пробелов, но и делать перевод строк через клавишу Enter (перевод каретки, как это раньше называлось в век печатных машинок). Получить значение многострочного поля можно аналогично однострочному текстовому полю, через семейство forms — document.forms[0].имя поля.value (пример 4).
Пример 4. Получение значения многострочного поля</script>
</head>
<body>
<form>
<textarea name="textField" cols="35" rows="7"></textarea>
<p><input type=button value="Нажми меня" onClick="getData()"></p>
</form>
</body>
</html>
Присвоение значения текстовому полю происходит также через семейство forms:
document.forms[0].имя поля.value = значение
Для перевода строки используется символ \n (пример 5). Применяйте его везде, где требуется создать новую строку.
Пример 5. Добавление текста в поле формыborder = f.border.options[f.border.selectedIndex].text;
padding = f.padding.options[f.padding.selectedIndex].text;
f.codes.value = "<table border="
+ border + " cellspacing=0 cellpadding=" + padding + " bordercolor=black>\n"
+
" <tr>\n" +
" <td>" + f.textField.value + "</td>\n" +
" </tr>\n" +
"</table>";
}
</script>
</head>
<body>
<form>
<p>Толщина рамки:
<select name=border>
<option selected>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<br>Расстояние от рамки до содержимого:
<select name=padding>
<option selected>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<br>Текст <input type=text size=40 name=textField>
<p><input type=button value="Сформировать код" onClick="createCode(this.form)">
<input type=button value="Очистить" onClick="this.form.reset()">
<p><textarea name=codes cols=40 rows=7>Нет кода. Нажмите на кнопку
"Сформировать код" для его создания.</textarea>
</form>
</body>
</html>
Результат действия примера представлен ниже.
После ввода текста и выбора значений из списка, нажмите на кнопку <Сформировать код> и в многострочном текстовом поле появится значение, которое было присвоено f.codes.value функции createCode.