Отправляет email-рассылки с помощью сервиса Sendsay

Рецепты HTML

  Все выпуски  

Рецепты HTML # 113


Информационный Канал Subscribe.Ru

 | Руководство | Дизайн и юзабилити | Графика | Создание и раскрутка сайта |
| Справочная информация | Инструментарий | Шаблоны | Все статьи | Форум |  

Добрый день.

Спасибо всем, кто прислал мне поздравления с годовщиной сайта и заранее тем, кто собирается еще это сделать. Очень приятно получать от вас письма с благодарностями за информацию сайта и необходимость ресурса. Буду и дальше пополнять сайт полезными материалами. Сейчас пока расширяется раздел про JavaScript.

RunWeb.Ru - хостинг с широкими возможностями!
Хостинг от RunWeb.Ru - это уникальные тарифные планы, высочайший сервис и обслуживание. У нас Вы найдете удобную панель управления сайтом, отзывчивую поддержку и действительно индивидуальный подход. Доверьте свой сайт профессионалам!
RunWeb.Ru - Узнайте подробности

Выложены две новые интересные статьи от создателей сайта lar.ru

Проблема кнопки "Back" и проблема кнопки "Refresh"
Во всех современных браузерах есть кнопки "Back" (Назад) и "Refresh" (Обновить). Эти две кнопки предназначены для удобства пользователя, но иногда после нажатия на одну из них пользователь вместо страницы, которую он ожидал, видит совсем другую. Эта статья была написана для того, чтобы объяснить, почему это происходит и как этого избежать.

Как поисковые системы могут помочь в вашем бизнесе
Важно лишь сделать так, чтобы поданная вами информация, во-первых, была привлекательна, а во-вторых, легко находилась в Сети. В рамках данной статьи мы постараемся дать ответ на вопрос, как достичь второй цели, то есть, повысить видимость вашего ресурса в сети.


Сегодня снова речь пойдет про JavaScript - как получать введенные данные формы. Адрес статьи на сайте - www.htmlbook.ru/content/?id=194.

Обращение к данным формы

С помощью JavaScript можно отправить данные формы на сервер, очистить ее, а также получить доступ к любому элементу формы для изменения его значений.

Существует несколько способов обращения к формам с использованием объектной модели.


Семейство forms

При создании формы, доступ к ней осуществляется через семейство forms. Для этого требуется либо указать номер формы, соответствующий элементу автоматически создаваемого массива, либо указать имя формы, заданное параметром name.

<html>
<body>

<form name=data>
...
</form>

<script language="JavaScript">

alert(document.forms.length) // Получаем общее количество форм на странице
alert(document.forms[0].name) // Узнаем имя первой формы через массив forms
alert(document.forms.data.length) // Определяем количество элементов в форме с именем data
alert(document.forms["data"].length) // То же самое

</script>
</body>
</html>

Нумерация элементов массива всегда начинается с нуля, поэтому обращение к первой форме будет document.forms[0], ко второй — document.forms[1]. Вместо индекса массива можно указывать имя формы, в данном случае используется data — document.forms["data"]. Поскольку удобней всегда обращаться к форме по имени, рекомендуется всегда его задавать


Семейство all

Семейство all является характерным для браузера Internet Explorer, но также поддерживается многими браузерами, кроме Netscape версии 6 и выше. Обращение к форме происходит как к элементу массива с именем, совпадающим с именем формы — document.all["data"] или напрямую — document.all.data.

<html>
<body>
<form name=data>
...
</form>

<script language="JavaScript">

alert(document.all["data"].length)
alert(document.all.data.name)

</script>
</body>
</html>

Internet Explorer поддерживает еще один способ обращения к формам — через семейство getElemetById. Пример — document.getElementById("data").length, где data является именем формы.


Получение значений элементов формы

Обращение к элементам формы осуществляется посредством семейства elements или напрямую по имени элемента.

<html>
<body>
<form name=data>
<input type=text name=userName value="Введите ваше имя">
</form>

<script language="JavaScript">

alert(document.forms.data.elements.length) // Общее число элементов в форме
alert(document.forms[0].elements[0].value) // Значение первого элемента
alert(document.forms["data"].userName.value) // Значение элемента с именем userName

</script>
</body>
</html>

Нумерация массива, как и в случае с семейством forms ведется с нуля, поэтому обращение к первому элементу формы будет elements[0]. Для большого количество данных в форме, значения элементов лучше получать по их имени. Здесь важна чувствительность к регистру, поэтому имя элемента, указанное параметром name, должно быть написано точно так же и при обращении к нему из JavaScript. Если в примере указать username вместо userName, ошибка не возникнет, но и нужные данные не получим.


Резюме

Обращаться к элементам форм лучше всего через семейство forms, оно наиболее универсально и поддерживается всеми браузерами. При большом количестве разных форм на странице им удобнее задавать свои собственные имена и адресоваться к ним по их имени. Разницы в том, как использовать форму — косвенно, как массив или прямо, как свойство семейства, нет. Приведенные записи идентичны по результату.

document.forms["htmlField"].length
document.forms.htmlField.length

Значения элементов форм также удобно получать, обращаясь к ним по их имени, которое задается параметром name.

document.forms["имя формы"].имя элемента.value или
document.forms.имя формы.имя элемента.value

JavaScript чувствителен к регистру, поэтому имена в коде HTML и скрипте должны быть идентичны.

Использовать семейство elements целесообразно при однотипной обработке многих данных. Тогда можно использовать циклы, где в качестве счетчика будет выступать номер элемента формы.



border-bottom


Браузер Internet Explorer Netscape Navigator Opera
Платформа Windows Macintosh Все платформы Все платформы

Версия

4.0 5.0 5.5 6.0 4.0 5.0 4.x 6.0 7.0 3.5 5.0 7.0
Поддерживается Частично Частично Да Да Частично Да Нет Да Да Да Да Да

Описание
Параметр позволяет одновременно установить толщину, стиль и цвет границы внизу элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту.

Синтаксис
border-bottom: border-width || border-style || color

Аргументы
Значение border-width определяет толщину рамки. Для управления видом рамки предоставляется восемь значений параметра border-style. Их названия и результат действия представлен на рис. 1.

Стили
Рис.1. Стили рамок

Первые два стиля — dotted и dashed поддерживаются браузером Netscape, начиная с шестой версии, а браузером Internet Explorer с версии 5.5.
Аргумент color устанавливает цвет рамки, значение может быть в любом допустимом для CSS формате.

Значение по умолчанию
Нет.

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
<html>
<body>

<div style="""border-bottom: 2px solid black; background: #fc3; padding: 10px">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

<body>
</html>

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID").style.borderBottom

Примечание
Internet Explorer 4/5 не применяет рамку к встроенным элементам.

Copyright 2002, 2003 Влад Мержевич, e-mail: vlad@htmlbook.ru
Материалы данного сайта охраняются законом об авторском праве.
Вы можете свободно использовать и распространять любые статьи с указанием автора и ссылки на сайт.


http://subscribe.ru/
E-mail: ask@subscribe.ru
Отписаться
Убрать рекламу

В избранное