Объекты, соответствующие тегам HTML. (ч.3 )

Объект password

Объект password представляет собой поле ввода, содержимое которого не подлежит просмотру. Вместо каждого символа, введенного в таком поле, отображается символ звездочки (*). В то же время содержимое данного поля сохраняется как обычный текст. Объекты password, в своою очередь являются свойствами объекта form и должны помещаться в контейнере <form> . . . </form>.

Тег, задающий поле ввода пароля имеет вид:

<input type="password" name="passwordName" size=integer [value="textValue"]>

синтаксис этого тега такой же как и у тега задающего поле ввода, однако атрибут type имеет значение "password". Значением данного атрибута для поля ввода всегда является строка "text".
    Атрибут name задает имя поля пароля и соответствует свойству name этого элемента в языке JavaScript, атрибут size определяет размер поля в символах, а атрибут value используется для записи в поле значения по умолчанию. Если и используется этот атрибут, ему обычно присваивают значение взятое из Cookies - об использовании "ключиков" будем говорить позже. Для обращения к свойствам и методам поля пароля применяются выражения вида:
    • passName.propertyName
    • passName.methodName(parameters)
    • formName.elements[i].propertyName
    • formName.elements[i].methodName(parameters)
Здесь passName - значение атрибута name объекта заданного в теге <input>, а formName - либо значение свойства name объекта form, либо определенный элемент в массиве forms, например forms[0]. Переменная i применяется для указания полоожения требуемого элемента в массиве.

Свойства

    Объект password имеет следующие свойства:

    • defaultValue - значение по умолчанию, задаваемое с помощью атрибута value;
    • name - соответствует атрибуту name тега <name>
    • value - соответствует текущему значению объекта password;
    • type - значением этого свойства для всех объектов password является строка "password".

Методы и обработчики событий

    Метод focus() объекта password применяется для установки фокуса в поле ввода пароля, а метод blur() - для его удаления. При помощи метода select() можно выделить данные в поле ввода. Этот метод обычно используется вместе с методом focus().
    Для объекта password обработчики событий не определены.

Объект radio

Объект radio представляет собой селекторную кнопку (radio button), определяемую в HTML-форме. В отличие от контрольных переключателей (checkbox), селекторные кнопки позволяют выбрать только один из предлагаемых вариантов. Объект radio является свойством объекта form, и поэтому должен содержаться в контейнере <form> . . . </form>. В следующем примере показаны три объекта radio.

Пиво "Балтика 1"
Пиво "Очаковское"
Пиво "Бочкарев"
    Синтаксис HTML-тега, определяющего селекторную кнопку, следующий:

<input type="radio" name="radioName" value="buttonValue" [checked] [on Click="handlerText"]> textToDisplay

В атрибуте name задается имя селекторной кнопки. Учтите, что для селекторных кнопок, принадлежащих к одной группе, необходимо указывать одинаковые имена, т.е. одинаковые значения атрибута name. Значение атрибута value возвращается серверу при передаче формы (по умолчанию значение "on"). С помощью атрибута checked можно выбрать селекторную кнопку, которая будет активизирована по умолчанию. Свойство defaultChecked объекта radio имеет значение true, если задан атрибут checked. В качестве значения атрибута onClick указывают обработчик события, связанного с выбором селекторной кнопки. В качестве обработчика события можно задать оператор или функцию языка JavaScript. Селекторная кнопка, как правило, имеет текст, описывающий данный вариант выбора. Этот текст задается в строке textToDisplay. Для обращения к методам и своойствам селекторной кнопки используют выражения:
    • radioName[i].propertyName
    • radioName[i].methodName(parameters)
    • formName.elements[i].propertyName
    • tformName.elements[i].methodName(parameters)
где radioName - значение атрибута name, заданное в соответствующем теге <input>, а formName - либо значение атрибута name объекта form, либо обращение к элементу массива forms. Поскольку селекторные кнопки являются элементами формы, для обращения к ним можно использоовать массив элементов формы elements. Например, к первой селекторной кнопке с именем radio1, принадлежащей первой форме текущего документа, можно обратиться при помощи выражения:

document.forms[0].radioName[0]

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

Свойства

    Объект radio имеет следующие свойства:

    • checked - содержит булево значение true или false, в зависимсти от того, выбрана или нет данная селекторная кноопка;
    • defaultChecked - сответствует атрибуту checked тега <input type="radio">, а также содержит булево значение;
    • length - представляет кооличество селекторных кнопок в бъекте radio;
    • name - соответствует атрибуту name тега <input>
    • value - сооответствует атрибуту value тега <input>
    • type - для объектов radio значением этого атрибута является строка "radio"

Методы и обработчики событий

    Для выбора селекторной кнопки используется метод click(). Честно говоря я не совсем понимаю зачем он нужен, ведь значение свойства checked, а именно на него может воздействовать этот метод, может задаваться по умолчанию. Не могу представить другое назначение этого метода.
    Объект radio имеет обработчик событий onClick, который используется для обработки событий, связанных с активизацией селекторной кнопки. При этом можно задать выполнение как отдельных оператрв, так и функции. Ну здесь понятно для чего, да? Если изначально можно при помощи свойств проверить значение checked, а если фиксировано начальное значение, то и этого не нужно, то в момент переключения, а переключение производится щелчком мыши, можно использовать это событие для вывода например дополнительных пояснений к выбираемому пункту. Можно получить очень неплохой эффект если поясняющий текст (графику, и то и другое вместе) поместить в контейнеры <div> . . . </div> а контейнеры разместить в разные слои, а потом активизировать (делать видимым) соответствующий слой по событию onClick - каково? На мой взгляд должно получиться круто, не пробовал делать, - сейчас только дошло, - обязательно попробую и приведу пример позже.

Объект reset

    Объект reset отображается в HTML-форме как кнопка перезагрузки, которая возвращает каждый элемент формы к его исходнму состоянию, а значения по умолчанию устанавливаются при помощи атрибута value. Тег имеет синтаксис:

<input type="reset"
        name="resetName"
        value="buttonText"
        [onClick="handlerText"]>

Атрибут name задает имя объекта reset, а атрибут value - текст, отоображаемый на кнопке. Для обращения к методам и свойствам объекта reset используется синтаксис:

    • resetName.propertyName
    • resetName.methodName(parameters)
    • formName.elements[i].propertyName
    • tformName.elements[i].methodName(parameters)
где resetName - имя объекта reset, заданное в атрибуте объекта name, а formName - имя формы, в которой определен объект reset, указанное в атрибуте name тега <form>, или элемент массива forms.

Свойства

    Свойство name сответствует атрибуту name тега <input>, свойство value - атрибуту value, а свойство type - атрибуту type и для объектов reset всегда имеет значение "reset".

Методы и Обработчики событий

    Объект reset имеет метод click(). Вообще все методы Click() и не только для объекта reset, но и для других тоже обычно не используют, - не всегда корректно работает. Ведь можно же задать свой метод (имеется в виду пользовательская функция) по событию onClick и все проблемы будут решены.
    Для объекта reset можно определить обработчик события onClick.
    Примеры, думается приводить не стоит, пример приводился при рассмотрении объекта form. Его использование не должно вызвать затруднений.

Объект select и массив options

    Объект select отображается как простой или ниспадающий список и является элементом формы, определенной в HTML-документе. Элементам списка, заданного в объекте select, соответствует массив options. Объекты select представляют собой свйства объекта form, в то время как массив options является свойством объекта select.

Какое пиво лучше?

Подобные меню можно часто увидеть для навигации по сайту например.

    Синтаксис тега <select>

<select name="selectName"
      [size="integer"]
      [multiple]
      [OnBlur="handlerText"]
      [OnChange="handlerText"]
      [OnFocus="handlerText"]>
      <option value="optionValue" [selected]> textToDisplay
</select>

Атрибут name задает имя объекта select, который имеет одноименное свойство. Значением атрибута size является количествоо стрк, отображаемых в списке, хотя содержаться может больше. С помощью атрибута multiple можно выбрать несколько элементов списка. Для ниспадающих списков атрибуты size и multiple не определяются.
    Контейнер <select> . . . </select> не используется без тегов <option>, поскольку эти эти теги задают элементы списка. Количество элементв в списке не ограничивается. Атрибут value тега <option> представляет значение, которое пересылается серверу при передачи формы. Атрибуту value сооответствует свойство объекта select с таким же именем. Список может содержать элементы, выбранные по умолчанию, что задается при поомощи атрибута selected. В программе на JavaScript элементы, выбранные по умолчанию, определяются значением свойства defaultSelected объекта option. Текст для элементов списка необхдимо задать в строке textToDisplay. Кроме того, каждому элементу списка соответствует конкретноое значение, устанавливаемое в атрибуте value тега <option>. Для обращения к свойствам и методам объекта select используются выражения типа:
    • selectName.propertyName
    • selectName.methodName(parameters)
    • formName.elements[i].propertyName
    • tformName.elements[i].methodName(parameters)
где selectName - имя объекта select, заданное в атрибуте name тега <select>, а formName- имя формы, элементом которой является объект select.
    К отдельным элементам списка, определенного в объекте select, можно обратиться при помощи массива options или массива elements, используя выражения вида:
    • selectName.options[i].propertyName
    • formName.elements[i].options[index].propertyName
где selectName - имя, заданное в атрибуте name тега <select>, а formName - имя формы, в которой определен данный объект select.

Массив options

    Элементам списка, определенным в тегах <option>, в JavaScript соответствуют элементы массива options, массив является свойством объекта select. Если тег <select> с именем beer содержит два тега <option>, в JS им соответствуют элементы beer.options[0] и beer.options[1].
    Массив options, в свою очередь, имеет свойство length. Значение этого свойства - количество тегов <option> в заданном объекте select. Например, выражение beer.options.length будет возвращать значение 2.

Свойства

Объект select имеет свойства:

    • length - количество тегов <option>, заданных в теге <select>
    • name - соответствует атрибуту name тега <select>
    • options - массив значений тегов <option>
    • selectIndex - содержит индекс выбранного элемента, а если выбрано несколько элементов, то индекс первого;
    • type - для списков с возможностью выбора одного элемента содержит значение "select-one", а для списков с возможностью выбора нескольких элементов - значение "select-multiple"
Теперь рассмотрим свойства для массива options:
    • defaultSelected - соответствует первому тегу <option>, определенному с атрибутом selected;
    • index - номер даннго элемента в массиве;
    • length - количество элементов в списке объекта select;
    • selected - не равное нулю, если данный элемент списка выбран
    • selectedIndex - содержит индекс выбранного элемента
    • text - соответствует тексту, который указан в теге <option>
    • value - соответствует атрибуту value тега <option>

Методы и обработчики событий

    Объект select имеет методы focus() и blur().     Для объекта select можно определить обработчики событий, соответствующие атрибутам onBlur и onChange, задавая реакцию объекта на события, связанные с потерей и получением фокуса ввода. Используются не часто, но всеже существуют такие задачи где эти события как раз-то и нужно применить, - будем говорить о событиях в соответствующей главе.

Пример

    Рассмотрим пример приведенный выше:

<script language = "JavaScript">
<!--
function showSelected(a) {
var selNum = a.beer.selectedIndex;
var selText = a.beer.options[selNum].text;
alert("Выбрана ОПЦИЯ: "+ selNum + "\n" +
"Текст выбранной опции: "+ selText);
}
//-->
</script>
<form name ="Мой выбор">
Какое пиво лучше?
<select name = "beer">
<option>Жигулевское
<option selected>Очаковское
<option>Бочкарев
<option>Балтика
</select>
<P>
<input type = "button" value="Смотрим что выбрали" onClick="showSelected(this.form)">
</form>

    Если вы во всем разобрались до этого примера, то комментарии и не понадобятся, но всеже. Объект select, определенный в данном примере содержит четыре элемента. При щелчке мыши на кнопке "Смотрим что выбрали" активизируется функция showSelected(), которая выводит окно сообщения с информацией об выбранном элементе. Для этого используются свойства text и selectedIndex. Функция showSelected() принимает параметр - имя формы. Значение этого параметра возвращается выражением this.form и представляет собой ссылку на текущую форму. Можно было, конечно и не передавать параметр функции если эта функция существует специально для текущей формы, но если кнопка будет находиться в другой форме, то параметр будет необходим. В функции showSelected() переменной selNum присваивается значение свойства selectIndex объекта select, а затем это значение используется при вычислении значения переменной setText для индексации массива options.

Объект submit

    Объект submit отображается как кнопка в фотме HTML. Ее нажатие вызывает передачу текущей формы на сервер, имя которго задано при помощи атрибута action тега <form>. Объект submit является свойством объекта form. Обычно он представляет собой последнее поле формы, хотя его можно указывать в любом месте контейнера <form> . . . </form>. При активации кнопки данные пересылаются на сервер. Мы уже пользовались этим объектом ранее, когда рассматривали объект form.
    Синтаксис:

<input type="submit"
    name="submitName"
    value="buttonText"
    [onClick="handlerText"]>

С помощью атрибута name задается имя объекта submit, которое является значением одноименного свойства объекта в языке JS. В качестве значения атрибута value используется строка текста, отображаемая на кнопке. Атрибуту value в языке JS соответствует свйство value объекта submit. Для обращения к методам и свойствам объекта submit применяются выражения:

    • submitName.propertyName
    • submitName.methodName(parameters)
    • formName.elements[i].propertyName
    • tformName.elements[i].methodName(parameters)

где submitName - значение атрибута name объекта submit, а formName - либо значение атрибута name объекта form, свойством которого является данный объект submit, либо элемент массива forms, например forms[0] для первой формы в текущем документе. Не правда ли все похоже на объект reset, рассматриваемый ранее, только назначение их разноое. Они и применяются зачастую вместе. Свойства, методы и обработчики событий тоже похожи.

Методы и Обработчики событий

    Объект submit имеет метод click(). Вообще метод Click() обычно не используют, - не всегда корректно работает - если я это говорю уже не в пятнадцатый раз :).
    Для объекта submit можно определить только один обработчик события onClick.

Объект text

    Объект text - это поле ввода, определяемое в теге <input type="text"> и предоставляющее пользователю возможность вводить текстовые данные. Объект text является свойством объекта form и должен размещаться в контейнере <form> . . . </form>. Объекты text содержат данные, которые можно и читать, и динамически изменять в JS-прграммах.

Пример:
Синтаксис тега:

<input [type="text"]
    name="textName"
    value="textValue"
    size=integer
    [onBlur="handlerText"]
    [onChange="handlerText"]
    [onFocus="handlerText"]
    [onSelect="handlerText"]>

С помощью атрибута name задается имя объекта text, которое можно использовать в JS-прграммах. Этому атрибуту в языке JS соответствует свойство name объекта text. Значение атрибута value определяет содержимое поля по умолчанию. Атрибуту value тега <input> соответствует свойство value объекта text, а также свойство defaultValue, значение которого сохраняет содержимое текстового поля, заданное по умолчанию. Присвоив нужное значение атрибуту size, можно установить размер поля в символах. По умолчанию значением атрибута type для объектов text является строка "text", т.е. если атрибут type в определении тега <input> опустить, то создаваемый элемент формы будет полем ввода. Для обращения к методам и свойствам объекта text используют выражения вида:

    • textName.propertyName
    • textName.methodName(parameters)
    • formName.elements[i].propertyName
    • tformName.elements[i].methodName(parameters)
типичные для всех элементоов формы. Строка textName - имя объекта text, заданное с помощью атрибута name в теге <input>, а стрка formName - соответственно имя формы, в которой и определен данный объект.

Свойства

    Свойство defaultValue соответствует атрибуту value. Значением свойства value является текущее значение объекта text. Свойство name соответствует атрибуту name объекта text, а свойство type - атрибуту type и содержит в данноом случае значение "text".

Методы и обработчики событий

    Объект text имеет три метода: focus(), blur() и select().     Для объектов text можно определить четыре обработчика событий: onBlur, onChange, onFocus и onSelect. Более подробно мы будем рассматривать обработчики событий позже отдельно, а сейчас пока будем пользоваться в примерах без лишних комментариев. Назначение некоторых ясно из их названия.

Пример

    Рассмотрим пример приведенный выше:

<form>
<B>Пример:</B>
<input type="text"
name="exeName"
value="Это поле ввода"
size=20
onFocus="this.select()">
</form>

В данном примере обработчик события, связанного с получением фокуса ввода, onFocus применяется для выделения текста в поле ввода. Для самого выделения используется метод select(), а обращение к полю ввода осуществляется при помощи оператора this.

Объект textarea

    Объект textarea соответствует области текста, определенной в форме. Объекты textarea являются свойствами объекта form и должны быть помещены в контейнер <form> . . . </form>. Элементы этого типа используются для ввода нескольких строк текста в свободном формате. Также его часто используют для вывода примеров текста например JS-программы, сформированнго текста предлагаемого для размещения например баннера и др.

Измените этот текст и перейдите в другое поле формы:

    Тег, задающий область текста, имеет синтаксис:

< textarea name="textareaName"
rows="integer"
cols="integer"
[onBlur="handlerText"]
[onChange="handlerText"]
[onFocus="handlerText"]
[onSelect="handlerText"]>
[textToDisplay]
[wrap="hand | soft"]
</textarea>

Атрибут name определяет имя области текста, и ему соответствует свойство name объекта textarea. Атрибуты rows и cols задают размеры пля области в симвоолах. Строка textToDisplay представляет собой необязательный текст, помещенный в область текста при первом отображении на экране. Эта строка является значением свойства defaultValue объекта textarea в языке JavaScript. Форматирование в этй строке и происходит обычным способом, тоесть без тегов <br> и других, а также теги отображаются здесь как они написаны, тоесть теги в этой строке не работают. Значение атрибута wrap определяет, каким образом введенный в поле текст разбивается на строки. Так, значение soft задает отображение строк в области текста полностью. В противном случае текст между двумя символами конца строки (Enter) размещается в одной строке.
    Для обращения к методам и свойствам объекта textarea применяются типичные для элементов формы выражения:

    • textareaName.propertyName
    • textareaName.methodName(parameters)
    • formName.elements[i].propertyName
    • formName.elements[i].methodName(parameters)

где textareaName - это значение атрибута name тега <textarea>, а formName - имя формы, в котрой определен объект textarea.
    Содержимое объектов textarea в JS-программах может динамически изменяться путем присваивания нового значения их свойству value. Например:
document.forms[0].myArea.value = "Новый текст"

Свойства

    Объекты textarea имеют свойства:
    • defaultValue - значение содержит текст, помещенный в контейнер <textarea> . . . </textarea>
    • name - соответствует атрибуту name тега <textarea>
    • value - соответствует текущему значению объекта textarea т.е. текущему содержимому области текста;
    • type - для объекта textarea всегда содержит значение "textarea".

Методы

    Метод focus() используется для помещения фокуса ввода в область текста, а метод blur() - для его удаления из области текста. Метод select() применяется для выделения информации в области текста. Очень удобный метод, когда нужно выделить большой по объему текст.

Обработчики событий

    В теге <textarea> можно определить четыре атрибута, задающие обработку событий, связанных с объектом textarea. С помощью атрибута onBlur определяется реакция объекта на удаление фокуса ввода из области текста, а с помощью атрибута onChange - реакция объекта на изменение содержимого области текста. Атрибуты onFocus и onSelect активизируют обработку событий, связанных соответственно с получением фокуса ввода и с выделением данных в области текста.

Пример

    Разберем пример. Выше приведена его действующая модель:

<script language = "JavaScript">
<!--
function sCange() {
alert ("Содержимое текстовой области изменено");
}
//-->
</script>
<form>
Измените этот текст и перейдите в другое поле формы:<BR>
<textarea name="tarea" rews=5 cols=40 onChange="sCange()">
Это объект textarea
Пример текста по умолчанию
</textarea>
<P>
<input type="text" size=35 name="stxt">
</form>

    Здесь содержится два поля. Первое поле является областью текста (textarea). При изменении содержимого текстовой области активизируется функция sCange(), которая выводит окно сообщения, информирующее о том, что текст изменялся. Второе поле является обычным полем ввода, я его разместил для того, чтобы было куда переместить фокус.

    На этом закончим рассмотрение объектов соответствующих тегам HTML.


[<<Назад] [В начало] [Следущий>>]
Hosted by uCoz