Сбор сбора данных форм и форм в HTML

Здесь мы представим знание элементов форм и подчинения формы.

Интерфейс DOM элемента формы - HTMLFormElement , который наследует от HTMLElement , поэтому он имеет те же атрибуты по умолчанию, что и другие элементы HTML, но он имеет несколько уникальных атрибутов и методов: сама: сама: это: сама: это: сама: сама: сама: сама: сама: это: сама: сама: сама: сама: сама: сама: сама: сама: сама: сама: сама: это.

Входной элемент является очень широко используемым элементом формы.

Текст ввода <input type = text name =>

Отправить вход <input type = отправить>

Входной кнопку <input type = radio name = должно иметь одинаковое значение имени = значение заполнения лучше всего соответствовать>

Введите <input type = fackbox name = одно и то же значение имени = разные соответствующие значения>

Цифровой вход <входной тип = номер min = max => поле ввода может ввести только номера и может установить максимальное значение и минимальное значение.

Входной диапазон <вход <вход = диапазон min = max => аналогично номеру, но он показывает скользящую панель вместо блока ввода.

Цветовой вход <input type = color> будет всплыть селектор цвета.

Дата ввода <input type = date> будет всплыть селектор даты.

Ввод электронной почты <input type = email> отображается в виде блока текста, и появится пользовательская клавиатура.

TEL INPUT <Вход тип = Тел> Аналогично вводу электронной почты

URL -вход <input type = url> Аналогично вводу электронной почты, также появится настраиваемая клавиатура.

Элементы Textarea могут создавать многочисленную текстовую область.

<textarea name = id = color = 30 Rows = 10> </textarea>

Значения атрибута Cols и Row представляют ширину и высоту текстовой области.

Выберите элементы и элементы опции могут использоваться для создания меню «Drop -Down».

<select name = id => <option value => </option> <option value => </option> <voip value => </oplct>

Как группа?

пример:

<input type = radio name = love value = play game> play games

<input type = radio name = Любимое значение = код записи> Код записи

<input type = radio name = sex value = man> мужчина

<input type = radio name = sex value = женщина> женщина, женщина,

Это две группы радио

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

Подсказка будет отображаться, когда поле ввода будет пустым, и оно исчезнет, ​​когда поле будет сосредоточено.

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

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

Добавьте кнопку отправки, чтобы позволить пользователям отправлять формы.

Следующие три кнопки могут запустить событие отправки формы при нажатии:

 <input type = Opport /> <button Type = Opport> < /button> <input type = image />

Тип значения по умолчанию элемента кнопки в спецификации отправляется, но значение медитации составляет кнопку под IE678, поэтому необходимо вручную добавить свойство Type = отправить в элемент кнопки из совместимости.

Первоначальный человек может подумать, что представление формы запускается с помощью Click Cool кнопки.

 Form.addeventlistener ('propect', function (e) {if (valid ()) {...} e.preventdefault ()})

Когда в элементе формы нет ни одной из трех кнопок, упомянутых выше, пользователь не сможет отправить форму (клавиша Enter также недействительна submit() . submit()

 if (value ()) {form.submit ()}

Основываясь на текущей популярной технологии Ajax+Cross -Odmain Post (CORS), мы, вероятно, не будем использовать элемент формы для непосредственного отправки данных на сервер. Хотя это возможно, в большинстве случаев существует феномен деградации.

JavaScript можно использовать для проверки этих входных данных в форме HTML до отправки данных на сервер.

Эти типичные данные формы, проверенные JavaScript:

Заполнил ли пользователь необходимые элементы в форме?

Почтовый адрес введен пользователем, является законным?

Пользователь ввел дату юридической деятельности?

Пользователи вводят текст в цифровом поле?

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

 Function value_required (field, alerttxt) {with (field) {if (value == null || value ==) {alerttxt);

Ниже приведен код с формой HTML:

 <html> <Head> <script type = text/javascript> function value_required (field, alerttxt) {with (field) {if (value == null || value ==) {alert (alert lerttxt); {Return true}} function value_form (this) {with (this) {if (value_required (электронная почта, электронная почта должна быть заполнена!) {Email.foc us (); return false}}} < /script> < /head> <body> <form action = postrage.htm onsubmit = return validate_form (this) method = post> email: <input type = text name = 30> <input type = pospodate = propect> </form> </body> < /html>

Следующие функции проверяют, соответствуют ли входные данные основному синтаксису адреса электронной почты.

Это означает, что входные данные должны содержать@ символы и числа точек (.). В то же время,@ не первый персонаж адреса электронной почты, и по крайней мере один номер точки после@ 同时:

 Function value_email (field, alerttxt) {with (field) {apos = value.indexof (@) dotpos = value.lastindexof (.) If (apos <1 || dotpos-apos <2) lert (alerttxt); Else {return true}}}

Ниже приведен полный код с формой HTML:

 <html> <Head> <script type = text/javascript> function value_email (field, alerttxt) {with (field) {apos = value.indexof (@) dotpos = value .lastindexof (.) if (apos <1 || dotpos-apos <2) {alert (alerttxt); = False) {email.focus (); Текстовое имя = размер электронной почты = 30> <input type = отправить значение = отправить> </form> </body> </html>

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

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

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

См.

Форма элемента и подачи формы