Sdscompany.ru

Компьютерный журнал
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Form name javascript

Проверка формы в JavaScript

Очень часто возникает необходимость добавления формы на сайт, ведь форма — это самый популярный способ общения пользователя с сайтом, и очень важно, чтобы данные, ведённые пользователем были корректными. И чтобы форма была отправлена с верными данными необходимо её перед этим проверить. И вот проверкой формы в JavaScript мы и займёмся в этой статье.

Давайте для начала создадим форму, которую потом будем проверять:

Вот такая форма. Надеюсь, что с HTML Вы знакомы и объяснять, думаю, ничего не стоит. Если что-то непонятно, то посмотрите на работу этого кода в браузере.

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

То есть сначала обращаемся к объекту Document, затем к его свойству Form (через имя формы), потом к имени поля данной формы, и, наконец, к значению поля. Давайте выведем все поля, которые подчиняются этому общему виду:

var form = document.form1;
document.write(form.firstname.value + «
«);
document.write(form.pass.value + «
«);
document.write(form.number.value + «
«);
document.write(form.message.value + «
«);
document.write(form.rules.value + «
«);
document.write(form.hidefield.value + «
«);
document.write(form.fileupload.value + «
«);
document.write(form.sub.value + «
«);
document.write(form.but.value + «
«);

Это все поля, которые имеют свойство value, и к которым можно получить доступ таким образом.

Теперь поговорим об одном особенном элементе формы — radio. Получим доступ к значению radio:

var sex = (document.form1.sex[0].checked)?
document.form1.sex[0].value : document.form1.sex[1].value;

Обратите внимание, что у нас есть два элемента radio, которые находятся в массиве sex. Индексы у них и 1. В данном скрипте мы проверяем, если у нас первый элемент включён (checked), то присваиваем значение первого элемента, иначе присваиваем значение второго элемента. Кстати, если кто не понял, то это такая конструкция оператора условия IF. Разумеется, можно было бы написать и так:

var sex;
if (document.form1.sex[0].checked) sex = document.form1.sex[0].value;
else sex = document.form1.sex[1].value;

Теперь, когда мы получили доступ ко всем полям, давайте с Вами, наконец, сделаем проверку формы. Но сначала давайте добавим в тег атрибут «onSubmit» со значением «return check();«. Данный атрибут будет делать следующее: перед отправкой формы вызывать функцию, которая должна будет вернуть либо true, либо false. Если она вернёт true, то форма отправится на сервер, а если false, то форма не будет отправлена.

Теперь создадим функцию check(), которая должна, во-первых, проверять полностью форму, сообщать пользователю об ошибках, а также возвращать true (если форма полностью правильная), либо false (если форма содержит ошибки).

function check(form) <
var firstname = form.firstname.value;
var pass = form.pass.value;
var message = form.message.value;
var rules = form.rules.value;
var file = form.fileupload.value;
var bad = «»;
if (firstname.length 32)
bad += «Имя слишком длинное» + «n»;
if (pass.length 32)
bad += «Пароль слишком длинный» + «n»;
if (message.length

В данном скрипте мы сначала получаем все данные, нуждающиеся в проверке, и записываем их в переменные. Затем создаём переменную bad, в которую записываем все некорректные данные. Затем идёт целый набор IF, которые проверяют поля в форме и записывают все ошибки в переменную bad. Затем, если переменная bad не пустая (то есть были ошибки), то выводим окно (alert()) с ошибками. И возвращаем false, чтобы форма не была отправлена. Если переменная bad пустая, то дальше просто возвращаем true, чтобы форма была отправлена уже на обработку в «handler.php«.

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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 51 ):

    Напиши пожалуйста отрывок кода, чтобы ясно было что и куда, связанный вот с этой строчкой «давайте добавим в тег атрибут «onSubmit» со значением «return check();»».

    Формы и javascript. FORM

    Содержание:


    Работа с формами

    Сейчас мы поговорим о различных приемах работы сценариев JavaScript с HTML-формами.

    Если в HTML-документе определена форма, то она доступна сценарию JavaScript как объект, входящий в объект document с именем, заданным атрибутом NAME тега FORM .

    Свойства форм

    Форма имеет два набора свойств, состав одного из которых фиксированный, а состав другого зависит от того, какие элементы определены в форме.

    Свойства первого набора

    • action. Значение атрибута ACTION тега FORM .
    • encoding. Значение атрибута ENCTYPE тега FORM .
    • method. Значение атрибута METHOD тега FORM .
    • target. Значение атрибута TARGET тега FORM .
    • elements. Массив всех элементов формы.
    • length. Размер массива elements.

    Большинство свойств первого набора просто отражает значение соответствующих атрибутов тега FORM . Что же касается массива elements , то в нем находятся объекты, соответствующие элементам, определенным в форме. Эти объекты образуют второй набор свойств формы. Адресоваться к этим объектам можно как к элементам массива elements , причем первому элементу формы будет соответствовать элемент с индексом 0, второму — с индексом 1 и т.д. Однако удобнее обращаться к элементам формы по их именам, заданным атрибутом NAME .

    Элементы форм


    Кнопки (BUTTON, RESET, SUBMIT)


    Свойства

    • name. Имя объекта.
    • value. Надпись на кнопке.

    Метод

    • click( ). Вызов этого метода тождественен щелчку мышкой по кнопке.

    Пример


    Нажатие кнопки


    Флажок (CHECKBOX)


    Свойства

    • name. Имя объекта.
    • value. Надпись на кнопке.
    • checked. Состояние флажка: true — флажок установлен, false — флажок не установлен.
    • defaultChecked. Отражает наличие атрибута CHECKED : true — есть, false — нет.

    Метод

    • click( ). Вызов этого метода меняет состояние флажка.

    Пример


    Метод click флажка


    Переключатель (RADIO)


    Свойства

    • name. Имя объекта.
    • value. Надпись на кнопке.
    • length. Количество переключателей в группе.
    • checked. Состояние переключателя: true — переключатель включен, false — выключен.
    • defaultChecked. Отражает наличие атрибута CHECKED : true — есть, false — нет.

    Метод

    • click( ). Вызов этого метода включает переключатель.

    Так как группа переключателей имеет одно имя NAME , то к переключателям надо адресоваться как к элементам массива.

    Пример


    Метод click группы переключателей


    Список (SELECT)


    Свойства

    • name. Имя объекта.
    • selectedIndex. Номер выбранного элемента или первого среди выбранных (если указан атрибут MULTIPLE ).
    • length. Количество элементов (строк) в списке.
    • options. Массив элементов списка, заданных тегами OPTION .
    Читать еще:  Структура языка java

    Каждый элемент массива options является объектом со следующими свойствами:

    • value. Значение атрибута VALUE .
    • text. Текст, указанный после тега OPTION .
    • index. Индекс элемента списка.
    • selected. Присвоив этому свойству значение true , можно выбрать данный элемент.
    • defaultSelected. Отражает наличие атрибута SELECTED : true — есть, false — нет.

    Методы

    • focus( ). Передает списку фокус ввода.
    • blur( ). Отбирает у списка фокус ввода.

    Пример


    Работа с готовым списком

    Кроме работы с готовыми списками JavaScript может заполнять список динамически. Для записи нового элемента списка используется конструктор Option c четырьмя параметрами, первый из которых задает текст, отображаемый в списке, второй — значение элемента списка, соответствующее значению атрибута VALUE , третий соответствует свойству defaultSelected , четвертый — свойству selected .

    Пример


    Динамическое заполнение списка


    Поле ввода (TEXT)


    Свойства

    • name. Имя объекта.
    • defaultValue. Начальное содержимое поля.
    • value. Текущее содержимое поля.

    Методы

    • focus( ). Передает полю фокус ввода.
    • blur( ). Отбирает у поля фокус ввода.
    • select( ). Выделяет содержимое поля.

    Пример


    Заполните анкету

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

    Текстовая область (TEXTAREA)


    Свойства

    • name. Имя объекта.
    • defaultValue. Начальное содержимое области.
    • value. Текущее содержимое области.

    Методы

    • focus( ). Передает области фокус ввода.
    • blur( ). Отбирает у области фокус ввода.
    • select( ). Выделяет содержимое области.

    Пример


    Отправьте телеграмму

    Для установки курсора в определенное место textarea-области используйте следующую кросбраузерную функцию:

    Поле ввода пароля (PASSWORD)


    Свойства

    • name. Имя объекта.
    • defaultValue. Начальное содержимое поля.
    • value. Текущее содержимое поля.

    Методы

    • focus( ). Передает полю фокус ввода.
    • blur( ). Отбирает у поля фокус ввода.
    • select( ). Выделяет содержимое поля.

    Пример


    Регистрация


    Как я могу использовать select box как навигационное меню?

    При использовании простого JavaScript, вы можете использовать select box для передвижения по сайту. Рассмотрите этот пример: Когда нажимается любая кнопка, форма инициируется и координаты x/y щелчка мыши на кнопке загружаются в объект запроса. Например, если пользователь выбрал Cancel!, объект запроса будет содержать переменные cancel.x и cancel.y. Точно так же щелчок на Continue привел бы к переменным continue.x и continue.y.

    Здесь важно отметить, что элементы .x и .y — не переменные объектов continue или cancel, а фактически часть имени «continue.x». Следовательно, нельзя использовать типичный метод для определения существования одного из дочерних объектов запроса: Тем не менее рассмотрите это: Благодаря названным массивам JavaScript, можно проверить какая картинка инициировала форму.

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

    Передача данных между формами на различных страницах

    В качестве простого примера, предположите, что ваша «домашняя» страница запрашивает имя пользователя, затем использует это имя, чтобы обратиться к пользователю на следующих страницах. Вы можете взять имя, используя форму, затем использовать JavaScript для передачи имени пользователя в следующую страницу, используя URL. Последующая страница могла бы затем анализировать имя пользователя из URL, используя информацию в document.search.

    Почему document.formName.selectObject.value не отражает значение выбранного пункта в списке?

    Потому что объект работает не таким образом. Правильный и полный синтаксис для доступа к VALUE только что выбранным полем в списке — это: Для доступак тексту элемента используйте свойство text:

    Как мне получить значение выбранной в данный момент radio button в radio group или группе checkboxes?

    Существует свойство, созданное в объекте form для каждой radio buttons или checkboxes с тем же самым именем. Например, следующий HTML код: приводит к созданию 3-х элементов массива, вызываемых с помощью document.theForm.gender. Чтобы определить значение выбранной кнопки (или checkbox’а), вам нужно проверить свойство checked каждого из элементов. Например:

    Для получения и установки значения radio button value на javascript можно использовать следующие функции:

    Как мне получить форму, чтобы инициировать процесс запуска клавишей Enter?

    Форма отправляется, если нажата клавиша enter, в то время как единственный входной текстовый элемент формы имеет фокус. Вы можете вызывать подобное поведение в форме, имеющей более одного элемента, разбивая форму на ряд отдельных форм, так, чтобы каждая форма имела только один текстовый элемент. Используйте обработчик события onSubmit (или action=»javascript:myFunction();«) для накопления данных из других форм в вашей странице и инициируйте их все сразу.

    Как я могу отключить поле текстового ввода?

    Используйте обработчик onfocus для вызова функции blur(): Если вы хотите динамически отключать/включать поле, используйте функцию skip (e)

    Как сделать загрузку страницы при выборе флажка?

    Используйте обработчик OnChange для вызова функции submit():

    Сохранение данных в локальное хранилище браузера:

    sessionStorage — запоминает результат пока открыт сайт во вкладке(окне), можно свободно перемещаться по сайту, обновлять страницы, но не закрывать окно браузера(вкладку).

    localStorage — запоминает результат на очень долгое время, пока пользователь не очистит локальное хранилище браузера. Можно через несколько дней зайти на сайт и увидеть ранее заполненную форму.

    Form name javascript

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

    В наиболее общем виде оператор

    Параметр NAME задает имя формы. Это имя нужно для адресации формы как свойства объекта Document.

    С помощью параметра ACTION указывается адрес URL загрузочного файла программы CGI, а также передаваемые расширению параметры. В том случае, когда форма предназначена для передачи данных расширению сервера Web, параметр ACTION является обязательным. Но если данные, введенные в форме, обрабатываются сценарием JavaScript локально и не передаются серверу Web, этот параметр можно опустить.

    Параметр METHOD задает метод передачи данных из формы расширению сервера Web и может принимать значения GET или POST. Если данные из полей формы обрабатываются сценарием JavaScript локально, параметр METHOD задавать не нужно.

    Параметр ENCTYPE задает тип MIME передаваемых данных и используется очень редко. Если форма предназначена для передачи текстовых данных (как это обычно бывает), этот параметр по умолчанию имеет значение application/x-www-form-urlencoded. В этом случае для передаваемых данных используется так называемая кодировка URL. Тип данных multipart/form-data позволяет передавать как текстовые, так и двоичные данные. При локальной обработке данных сценарием JavaScript параметр ENCTYPE не задается.

    Помимо параметров, для формы можно определить обработчик события, связанный с кнопкой типа SUBMIT. Такая кнопка предназначена для посылки данных из заполненной формы расширению сервера Web. Назначив обработчик события, сценарий JavaScript может управлять этим процессом.

    Читать еще:  Java msi installer

    Свойства объекта form

    Объект form имеет два набора свойств, состав одного из которых является фиксированным, а состав другого зависит от того, какие поля и органы управления определены в форме. Первый набор свойств приведен ниже:

    Большинство свойств первого набора просто отражает значения соответствующих параметров оператора

    Переключатель checkbox

    Переключатели checkbox обычно применяются для выбора каких-либо независимых друг от друга параметров или возможностей. В форме переключатель checkbox создается с помощью оператора с параметром TYPE, равным строке «checkbox»:

    Параметр NAME задает имя переключателя. Это имя можно использовать для определения состояния этого переключателя в сценарии JavaScript.

    С помощью параметра VALUE вы можете определить строку, которая передается расширению сервера при посылке заполненной формы, если переключатель находится во включенном состоянии. Если этот параметр не указан, то по умолчанию посылается строка «on». Сценарий JavaScript также может получить значение параметра VALUE.

    Необязательный параметр CHECKED указывается в том случае, если при начальном отображении формы переключатель должен отображаться во включенном состоянии.

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

    Свойства объекта checkbox

    Объект checkbox имеет несколько свойств, отражающих значения соответствующих параметров оператора :

    Методы объекта checkbox

    Для объекта checkbox определен один метод click, не имеющий параметров:

    При вызове этого метода переключатель устанавливается во включенное состояние.

    Переключатель radio

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

    Назначение параметров NAME, VALUE и CHECKED переключателя radio такое же как и назначение аналогичных параметров переключателя checkbox. Отличие заключается в том, что все переключатели radio, принадлежащие к одной группе, должны иметь одинаковые имена, определенные параметром NAME. Что же касается переключателей checkbox, то если их несколько, то все они должны называться по-разному. Для того чтобы расширение сервера Web или сценарий JavaScript, обрабатывающие форму, могли узнать, какой же из переключателей radio группы находится во включенном состоянии, все такие переключатели должны иметь различные значения VALUE. Кроме того, только один из переключателей radio может быть определен с параметром CHECKED.

    Свойства объекта radio

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

    Методы объекта radio

    Для объекта radio определен метод click, не имеющий параметров:

    При вызове этого метода переключатель выбирается для работы.

    Пример формы с переключателями

    В этом разделе приведен исходный текст документа HTML со сценарием, предназначенным для динамического создания новой страницы при помощи сценария JavaScript. Параметры этой страницы определяются состоянием переключателей типа checkbox и radio, расположенными в этом документе.

    Наш документ содержит одну форму, в которой есть три переключателя с независимой фиксацией типа checkbox (расположенные в группе Page elements), три переключателя с зависимой фиксацией (образующие группу Text color), и две кнопки — Create Page и Reset.

    Если включен переключатель Show title, создаваемый сценарием JavaScript документ HTML будет снабжен заголовком. При включении переключателя Show horizontal lines информация о состоянии переключателей, отображаемая в документе, будет выделена сверху и снизу горизонтальными разделительными линиями. Переключатель Table view влияет на способ отображения информации. Если он включен, информация будет показана в табличном виде, а если выключен — в виде списка.

    Переключатели с зависимой фиксацией группы Text color, расположенные в исходном документе HTML, задают цвет строк при отображении информации в виде списка или цвет названий переключателей при табличном отображении. В нижней части формы находятся две кнопки с надписями Create Page и Reset. Если нажать на первую из этих кнопок, будет вызвана функция JavaScript, которая определит текущее состояние переключателей и сформирует новый документ HTML. Этот документ появится в окне браузера вместо исходного. С помощью кнопки Reset можно установить начальное состояние переключателей. Текст документа HTML со сценарием, выполняющим все описанные выше действия, представлен в листинге 3.2.

    Листинг 3.2.

    Список select

    С помощью оператора

    Все параметры оператора необязательные, однако для того чтобы сценарий JavaScript мог работать со списком, необходимо указать по крайней мере параметр NAME, определяющий имя списка.

    Параметр SIZE задает размер видимой части списка в строках.

    Если указан необязательный параметр MULTIPLE, объект select является списком просмотра, а не списком выбора.

    Для определения элементов списка предназначен оператор . Оператор может иметь два параметра — VALUE и SELECTED. Параметр VALUE определяет значение, которое передается расширению сервера Web. С помощью параметра SELECTED отмечается строка списка, выделенная по умолчанию при начальном отображении формы. После оператора следует текст, отображаемый в строках списка.

    Свойства объекта select

    Ниже перечислены свойства объекта select, доступные сценарию JavaScript:

    Работа с элементами страницы в JavaScript

    Учебник JavaScript

    Практика

    Работа с DOM

    Практика

    Некоторые продвинутые вещи

    Рекомендованное ES6

    Некоторые видео могут забегать вперед, тк к этому месту учебника мы прошли еще не весь ES6. Просто пропускайте такие видео, посмотрите потом.

    Регулярки

    Разное

    Работа с канвасом

    Практика

    • урок исключен (мало материала), по аяксу скоро будет отдельный учебник (много материала)

    Контекст

    Drag-and-Drop

    • Урок №
      Введение
      в ООП в стиле ES6
    • Урок №
      Основы
      работы с ООП
    • Урок №
      Наследование
      классов в JavaScript
    • Урок №
      Применение
      ООП при работе с DOM
    • Урок №
      Практика
      по ООП в JavaScript
    • Тут скоро будут еще уроки
      по функциональному и прототипному
      стилю ООП.

    Практика по ООП

    Ваша задача: посмотрите, попробуйте повторить.

    Практика

    Promise ES6

    Библиотека jQuery

    Тк. jQuery устаревает, объявляю эти уроки не обязательными и выношу в конец учебника (так по уровню уроки середины учебника, если что). В перспективе переедет в отдельный учебник по jq.

    В данном уроке мы разберем работу с элементами страницы на языке JavaScript.

    Работа с innerHTML, outerHTML

    В прошлом уроке мы с вами учились считывать и записывать значения атрибутов, а теперь будем делать тоже самое, но уже со внутренним содержимым тегов. Это делается с помощью свойства innerHTML, которое можно считывать и перезаписывать, меняя тем самым содержимое тегов.

    В примере ниже у нас есть абзац. Давайте сменим ему текст с помощью свойства innerHTML. Для этого получим ссылку на этот абзац с помощью getElementById в переменную elem. Затем таким образом — elem.innerHTML = ‘Новый текст’ — запишем в него новый текст:

    HTML код станет выглядеть так:

    Можно записывать не только текст, но и теги и они будут работать (в нашем случае текст станет жирным):

    Читать еще:  Javascript try catch

    HTML код станет выглядеть так:

    Кроме свойства innerHTML существует также свойство outerHTML, которое перезаписывает не только внутренний текст тега, но и сам тег. Смотрите пример:

    HTML код станет выглядеть так:

    Как вы видите, наш абзац исчез и заменился на тег b.

    Работа с getElementsByTagName

    Во всех примерах выше мы с вами работали с методом getElementById, который получал только одно свойство по его атрибуту id. Однако существуют и другие способы получения свойств, к примеру, с помощью метода getElementsByTagName, который получает группу тегов по их имени. Например, можно получить все абзацы p или все заголовки h2.

    Учтите только один нюанс — наш метод возвращает не одно свойство, а массив свойств. Получим, к примеру, все абзацы в переменную elems:

    В переменной elems теперь лежит массив свойств, это значит, что elems[0] — это первый абзац, elems[1] — второй и так далее (нумерация с нуля).

    Мы можем убедится в этом, если сделаем так: elems[0].innerHTML = ‘!’ — в этом случае первый абзац сменит свой текст.

    Давайте поменяем текст всех трех абзацев:

    HTML код станет выглядеть так:

    Учтите, что менять одновременно все свойства как-нибудь так elems.innerHTML = ‘!’ не получится (потому что elems — массив). Необходимо или вручную перебрать все свойства, как это сделано в примере выше, или воспользоваться циклом.

    В следующем примере мы сменим содержимое всех абзацев на страницы на ‘!’, воспользовавшись для этого циклом for:

    HTML код станет выглядеть так:

    Обращение к свойствам через свойства document

    Некоторые теги страницы можно не получать методами типа getElementById, а обратиться к ним как свойствам объекта document. К примеру, к тегу можно обратиться так: document.body, а к тегу — вот так: document.head. Такое работает не для всех тегов, а только для избранных.

    Учтите, что нельзя получить доступ к тому свойству, которого еще не существует в момент выполнения скрипта. Поэтому, если скрипт находится в , то в нем недоступен document.body.

    В следующем примере первый alert выведет null:

    Работа с формами

    Можно получить все HTML формы на странице через document.forms. В результате мы получим массив форм, будто он был получен с помощью getElementsByTagName (точнее это будет не массив, а псевдомассив (или коллекция) свойств).

    Мы можем, к примеру, обратиться к любой форме, как к энному свойству массива, например, к форме с номером 0:

    HTML код станет выглядеть так:

    А можем перебрать все формы с помощью цикла:

    HTML код станет выглядеть так:

    Следующем образом — document.forms[i].elements — можно найти общее количество форм на странице.

    Кроме того, к формам можно обращаться по имени вместо номера. Это имя задается в атрибуте name тега

    • Главная &nbsp / &nbspУроки &nbsp / &nbspУроки JavaScript &nbsp / &nbspГлава 8. Работа с формами &nbsp / &nbsp
    • Свойства элементов формы

    Свойства элементов формы

    Здравствуйте! В этом уроке мы с вами рассмотрим элементы формы и навигацию по форме в JavaScript. Надо сказать, что элементы form имею довольно много свойств, которые мы сегодня и разберем. Да если вдруг забыли что такое HTML форма, то почитайте здесь.

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

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

    Вот так например:

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

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

    Эти ссылки не зависят от окружающих их тегов. Элемент может быть где-то глубоко в форме, но он всё равно доступен через form.elements.
    Свойство elements также есть у элементов . Вот пример:

    Получить доступ к элементам формы можно не только через form.elements[name/index], но и проще: form[index/name].

    Этот способ конечно короче, но обладает одной неприятной особенностью: если к элементу обратиться по его атрибуту name, а потом атрибут name изменить, то он по-прежнему будет доступен под старым именем.

    Звучит конечно странно, поэтому вот пример.

    Ссылка на форму element.form

    По элементу можно получить его форму, используя свойство element.form.

    Элемент label

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

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

    Это позволяет посетителям кликать на большой красивой метке, а не на маленьком квадратике. Конечно, это довольно очень удобно.

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

    1. Дать метке атрибут for, равный id соответствующего input:
    • Завернуть элемент в label. В этом случае можно обойтись без дополнительных атрибутов:

      Элементы input и textarea

      Для большинства типов элемента input значение ставится/читается через свойство value.

      Для элементов textarea также доступно и свойство innerHTML, но лучше им не пользоваться: поскольку оно хранит только HTML, изначально присутствовавший в элементе, и не меняется при изменении значения.
      Исключения составляют кнопки-переключатели – input type=»checkbox» и input type=»radio»
      Текущее «отмеченное» состояние для checkbox и radio находится в свойстве checked (true/false).

      Элементы select и option

      Селект в JavaScript можно установить двумя путями: поставив значение select.value, либо установив свойство select.selectedIndex в номер нужной опции:

      Установка selectedIndex = -1 очистит выбор.
      Список элементов-опций доступен через select.options.

      Если список select допускает множественный выбор (атрибут multiple), то значения можно получить/установить, сделав цикл по select.options. При этом выбранные опции будут иметь свойство option.selected = true.

      Создание нового элемента списка

      В стандарте есть очень любопытный короткий синтаксис для создания элемента с тегом option:

      • text – содержимое,
      • value – значение,
      • defaultSelected и selected поставьте в true, если чтобы сделать элемент выбранным.

      Его можно использовать вместо document.createElement(‘option’), например:

      Такой же элемент, но выбранный:

      Итого

      Свойства для перемещения по формам:

      document.forms Форму можно получить как document.forms[name/index]. form.elements Элементы в форме: form.elements[name/index]. Каждый элемент имеет ссылку на форму в свойстве form. Свойство elements также есть у .

      Значение элементов читается/ставится через value или checked.

      Для элемента select можно задать опцию по номеру через select.selectedIndex и перебрать опции через select.options. При этом выбранные опции (в том числе при мультиселекте) будут иметь свойство option.selected = true.

      Задачи

      Добавьте пункт в список

      При помощи JavaScript:

      1. Выведите значение и текст текущей выбранной опции.
      2. Добавьте опцию: .
      3. Сделайте её выбранной.

      Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

    Ссылка на основную публикацию
    Adblock
    detector