Newcomposers.ru

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

Form html js

Формы и 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 .

Каждый элемент массива 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)

Читать еще:  Как отправить сообщение html через outlook

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

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

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

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

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

Проверка формы в 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();»».

    Формы в HTML5: JavaScript и API для принудительной валидации форм

    Содержание цикла статей «Формы в HTML 5»:

    Часть 1 Формы в HTML5: Разметка;
    Часть 2 Формы в HTML5: CSS;
    Часть 3 Формы в HTML5: JavaScript и API для принудительной валидации форм.

    В последней из трех статей на тему форм в HTML5 мы обсудим интеграцию JavaScript и constraint validation api . Если вы еще не готовы к этой теме, то вам стоит прочесть статьи Формы в HTML5: Разметка и Формы в HTML5: CSS чтобы вспомнить основы.

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

    • не все браузеры поддерживают абсолютно все типы полей ввода и селекторов CSS ;
    • сообщения об ошибках используют общий текст (« пожалуйста, заполните это поле ») и их сложно типизировать;
    • селекторы :invalid и :required применяются при загрузке страницы до того, как пользователь начнет взаимодействовать с формой.

    Используя JavaScript и Constraint Validation API , мы сможем расширить наши возможности. Имейте в виду, что код получится не сильно прозрачным, если мы будем учитывать большое число браузеров и типов полей ввода.

    Перехватываем данные из формы

    Первая часть валидации, до HTML5 , присоединяет к форме обработчик submit , который будет проверять поля, отображать ошибки и предотвращать событие подтверждения.

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

    Затем, если вы захотите исполнить что-то более сложное, к примеру, отобразить свои сообщения об ошибках, сравнить или заполнить поля автоматически, вам придется выключить встроенную валидацию установив свойство noValidate в значение true :

    Читать еще:  Html поле со списком

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

    Свойство поля .willValidate

    Каждое поле формы имеет свойство .willValidate . Оно возвращает следующие значения:

    • true когда браузер для проверки будет использовать встроенную валидацию;
    • false когда браузер не будет проверять поле;
    • undefined когда браузер не поддерживает встроенную валидацию форм HTML5 , к примеру в IE8 .

    Так как выше мы выключили встроенную валидацию, каждое поле вернет значение false .

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

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

    Оба значения false и undefined — значения ложные, потому вы не сможете их проверить просто с помощью field.willValidate! И еще мы знаем о том, что код из первого блока будет иметь значение, только когда работает встроенная валидация. Однако…

    Поддерживает ли браузер тип полей ввода?

    Если вы помните, в первой части говорилось о том, что фолбэк в случае неподдерживаемых типов полей ввода — поле text . К примеру:

    не имеет встроенной поддержки в Firefox 29 или IE11 . Эти браузеры (фактически) отобразят следующий код:

    Но оба браузера поддерживают встроенную валидацию для типа поля text и потому field.willValidate не вернет значение undefined !

    Поэтому сначала мы должны убедиться в том, что атрибуты type соответствуют свойствам объекта .type — и если это не так, мы должны реализовать проверку для фолбэка, к примеру, такую:

    Метод .checkValidity()

    В случае, когда встроенная валидация возможна, для проверки полей может быть использован метод .checkValidity() . Он вернет значение true , если проблем не обнаружит, или false , в остальных случаях.

    Похожий метод .reportValidity() , который возвращает текущее состояние поля без его повторной проверки. Но он не поддерживается всеми браузерами, потому не столь полезен, как предыдущий.

    Оба метода делают следующее:

    • возвращают свойство объектов .validity , которое поможет детально рассмотреть ошибки;
    • вызывают событие invalid при ошибке валидации. Это можно использовать для отображения ошибок, смены цвета полей и так далее. Обратите внимание, что нет соответствующего события valid , поэтому не забудьте сбросить стили ошибок и сообщений, при необходимости.

    Объект Field .validity

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

    • . valid – возвращает true , если поле без ошибок и false в противном случае;
    • .valueMissing – возвращает true , если значение в поле отсутствует, но оно требуется;
    • .typeMismatch – возвращает true , если значение не соответствует синтаксису, к примеру, не корректно введен адрес электронной почты;
    • .patternMismatch – возвращает true, если значение не соответствует выражению в атрибуте pattern ;
    • .tooLong – возвращает true , если значение превышает допустимую длину maxlength ;.
    • .tooShort – возвращает true , если значение меньше допустимого минимума minlength ;.
    • .rangeUnderFlow – возвращает true , если значение меньше допустимого min ;
    • .rangeOverflow – возвращает true , если значение больше допустимого max ;
    • .stepMismatch – возвращает true , если значение введено с недопустимым шагом step ;
    • .badInput – возвращает true , если запись не может быть преобразована в значение;
    • .customError – возвращает true , если поле имеет набор ошибок пользователя.

    Не все эти свойства поддерживаются всеми браузерами, потому сильно не увлекайтесь. В большинстве случае достаточно возвращаемых значений от .valid или .checkValidity() для отображения сообщений об ошибках.

    Поддержка объекта .validity устаревшими браузерами

    Эмулировать объект .validity в устаревших браузерах можно вручную, к примеру:

    Этим методом .validity.valid может быть протестирован в любом браузере.

    Метод.setCustomValidity()

    Методу .setCustomValidity() можно передать:

    • пустую строку. Это подразумевает, что поле ввода содержит корректные данные, потому и .checkValidity() и .validity.valid вернет значение true ;
    • строку, содержащую сообщение об ошибке, которое будет показано во всплывающем сообщении (если используется).

    Сообщение пометит поле как поле с ошибочными данными и потому .checkValidity() и .validity.valid возвратят значение false и произойдет событие invalid .

    Обратите внимание, что вы также можете проверить текущее сообщение, используя свойство поля .validationMessage .

    Подведем итоги

    Теперь, у нас есть простая, кроссбраузерная система проверки формы:

    Методу LegacyValidation преднамеренно оставили самое простое; он проверяет регулярные выражения required, minlength, maxlength и pattern , и вам нужно добавить свой код для проверок email , URL , дат, чисел, диапазонов.

    Это приводит к вопросу: если вы пишете код валидации для устаревших браузеров, зачем обращаться за помощью к встроенным API браузера? Отличный вопрос! Код, показанный выше, написан для поддержки валидации форм всеми браузерами, начиная с IE6 и выше. Это ведь не всегда нужно…

    • Вы можете не использовать код JavaScript для проверки простых форм. Пользователи устаревших браузеров в случае фолбэка попадут на валидацию со стороны сервера. И она должна быть всегда предусмотрена;
    • Если вам потребуется использовать более сложные формы, но нужно поддерживать только новейшие браузеры ( Internet Explorer 10 + ), вы можете удалить весь код проверки для устаревших браузеров. Дополнительно вам может потребоваться проверка полей дат, которые в настоящее время не поддерживаются в Firefox и IE ;
    • Даже если вам требуется код для проверки таких полей, как email, numbers и т.п. в IE9 и более ранних версиях, старайтесь не усложнять его и убирайте, как только он перестанет быть необходим. Сейчас требуется немного грязный код, но ситуация со временем улучшится.

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

    Данная публикация представляет собой перевод статьи « HTML5 Forms: JavaScript and the Constraint Validation API » , подготовленной дружной командой проекта Интернет-технологии.ру

    Форма обратной связи html + css + php + jQuery + js

    by Andrej — Category Веб-дизайнеру on 27/11/2018

    Привет всем!
    Хочу поделиться с вами готовой формой обратной связи для сайта, работающей на PHP, jQuery и имеющую некоторые бонусы, такие как встроенная защита от спама и запрет нажатия кнопки. Никаких особых умений вам не потребуется, достаточно будет знания основ html верстки и элементарной логики.

    Так в конечном итоге будет выглядеть форма обратной связи

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

    Структура полей формы обратной связи

    • имя отправителя
    • почтовый адрес
    • телефон
    • компания отправителя
    • сайт отправителя
    • продукт (направление)
    • список необходимых услуг
    • дополнительная информация
    • антиспам / защита от роботов

    Особенности и возможности

    • блокировка кнопки «отправить» до выполнения необходиых условий
    • простой селектор для проверки и защиты от роботов
    • дополнительная кнопка «очистить все поля»

    Что входит в форму обратной связи?

    • HTML разметка (создание макета)
    • Стилизация полей формы на CSS/SCSS
    • jQuery + js
    • PHP обработчик

    Создание HTML разметки

    И так, давайте посмотрим на разметку формы:

    1. Здесь есть три первых поля, у которых указан id и некое js-событие onkeyup=»checkParams()» (они понадобятся нам позднее). Для них будет проводиться обязательная проверка правильности ввода данных. За это отвечает атрибут required . Если вам необходимо убрать или сделать обязательным другое поле, просто удалите/добавьте этот атрибут.
    2. Несколько дополнительных полей, не являющихся обязательными.
    3. Селектор выбора предоставляемых услуг select .
    4. Поле дополнительной информации textarea .
    5. Селектор для проверки на «человечность» — Я работ | Я человек.
    6. Две кнопки: Отправить и Стереть информацию в заполненных полях.
    7. По-хорошему, здесь еще не хватает поля с галочкой, для подтверждения согласия на обработку данных, но ее добавлению, надеюсь, не вызовет у вас трудностей.
    Читать еще:  Задачи по html

    Вроде все. Едем дальше.

    Оформление формы CSS/SCSS

    Все поля формы стилизованы при помощи CSS flexbox (Flexible Box Layout Module) и разбиты на группы дополнительными классами. Разумеется, вы можете создать свои собственные стили. Если вы владеете CSS, то задать оформление для всех элементов формы сможете без проблем, тут даже не потребуется моя помощь.

    Настройка PHP кода

    Теперь переходим к обработчику формы, где все действия начинаются с зависимости от выбранного селектора — Бот/Человек.

    Что здесь есть?

    • header(‘Refresh: 5; URL=https://www.site.ru’); — после заполнения формы ботом, отправляет на страничку с уведомлением и через 5 секунд возвращает на указанную в поле.
    • mail, name, phone, . — настройка соответствия html полей. Здесь вам необходимо указать все соответствующие имена name=»» в форме обратной связи. Таким образом, в поле services вам необходимо указать точно такой же порядок опций, что и в html разметке.
    • $mess — это тело сообщения, которое будет приходить в письме. Вы можете поменять их местами, изменить названия или просто удалить/закомментировать не нужные.
    • $headers — обязательная строка, указывающая кодировку письма. Если вы случайно сотрете или измените charset=utf-8 , то все ваши слова превратятся в иероглифы.
    • header — после успешного нажатия на кнопку, посетитель будет отправлен на страничку уведомления и через 5 секунд произойдет перенаправление на указанную страничку. Или же else < он получит увдомление об ошибке.

    Здесь все. Едем дальше.

    Дополнительные плюшки на js и jQuery

    Ранее мы рассмотрели html шаблон формы, в котором видели добавленные id и функции у трех обязательных полей. Пришло время разобраться, для чего они были добавлены.

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

    Мы вставляем id в необходимые поля и disabled в кнопку для того, чтобы привязать их к данному скрипту. Вы можете изменить их названия и количество, добавив/убрав нужные var-строки. Но, если вы добавите или уберете их, не забудьте изменить условия в строке if (name.length != 0 && email.length >= 6 && phone.length >= 10) < .

    Как работает эта строка?

    Все завязано на количестве символов в указанном поле, т.е. ее длине length .

    • if (name.length != 0 — указывает на то, что поле не должно быть пустым. Читается как — «если в поле число символов не равно нулю, то…»
    • && — объединяет условия (и)
    • email.length >= 6 — кол-во символов должно быть больше или равно 6. Почему шесть? Я указал это число потому, что минимальный почтовый адрес состоит из 6 символов. Проверим? @bk.ru — 6 символов.
    • phone.length >= 10 — больше или равно десяти символам. Почему 10, а не 11 ? При заполнении этого поля, посетитель может указать свой телефон как с +7, так и через 8. Поэтому лучше указывать 10.

    На этом все. Подключайте форму, тестируйте и пользуйтесь.

    Если у вас остались вопросы, пишите в комментариях и не поскупитесь на оценку статьи. Заранее спасибо

    Возможно Вас также заинтересует…

    Представьте, что у вас на странице сайта есть форма обратной связи, для получения сообщений от…

    Введение Это руководство описывает правила для оформления и форматирования HTML и CSS кода. Его цель…

    HTML — аббревиатура от Hyper Text Markup Language (англ.) — это язык разметки гипертекста, принятый…

    Привет, дорогие читатели! Сегодня, я хочу поговорить о JSFiddle и разобрать вместе с вами этот…

    HTML JavaScript

    В современном мире верстальщику, который не знает хотя бы основ JavaScript, будет очень сложно. Совершенно не обязательно быть гуру JavaScript, но основами данного языка владеть необходимо.
    JavaScript — клиентский язык программирования (выполняется не на сервере, а непосредственно в браузере пользователя на его локальном компьютере).
    JavaScript используется для создания веб-приложений и динамических сайтов способных взаимодействовать с пользователем. В этом уроке вы получите лишь общее представление об этом мощном инструменте веб-дизайна, т.к. изучение JavaScript не входит в начальный курс обучения HTML.
    Прежде всего нужно запомнить, что JavaScript является регистрозависимым языком. По этой причине следует запоминать не только названия свойств, методов или ключевых слов JavaScript, но и заглавными или строчными буквами они пишутся.

    Код JavaScript может быть написан либо непосредственно в самом HTML-документе, либо в отдельном файле.

    Для записи JavaScript-кода в HTML-документе используется тег

    В следующем примере код JavaScript написан непосредственно в самом HTML-документе. При загрузке страницы данный код сработает и вызовет всплывающее сообщение:

    Пример HTML:

    Запуск скрипта

    В предыдущем примере скрипт запустился во время загрузки HTML-документа. Но что делать если вы не хотите, чтобы скрипт запускался автоматически? Вы легко можете сделать так, чтобы запуск скрипта осуществлялся только в том случае, если пользователь делает что-то на странице (например, перемещает курсор мыши или кликае ссылку).
    Эти действия называются внутренними событиями (события, для краткости). Есть множество предопределенных внутренних событий, которые осуществляют запуск скрипта. Вы можете использовать обработчики событий, чтобы сообщить браузеру, какое событие должно вызвать тот или иной сценарий. События определяются как атрибуты внутри HTML-тега.
    Допустим, вы хотите, чтобы появлялось сообщение после того, когда пользователь нажимает кнопку. Вы можете использовать обработчик событий onclick() для выполнения действий. В следующем примере будет отображено окно предупреждения JavaScript, содержащее сообщение:

    Пример HTML:

    Подключение внешнего скрипта

    Если предполагается использовать один и тот же сценарий на многих веб-страницах, удобно разместить его в отдельном файле и затем сослаться на этот файл. Это целесообразно сделать даже в том случае, если код будет использован только на одной странице. Например, если сценарий слишком большой и громоздкий, то выделение его в отдельный файл облегчает восприятие и отладку кода веб-страницы.
    JavaScript-код можно записать в отдельном файле с расширением .js , после чего подключать его к HTML-документу примерно так, как мы делали это с CSS-файлами.
    Файл с расширением .js является обычными текстовым файлом, как и другие уже известные нам файлы с расширениями: .css и .html .
    Создадим файл script.js и сохраним в нем небольшую функцию, созданную с помощью Javascript:

    Для подключения JS-файлов также используется тег

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