Содержание

Получаем данные от элементов формы с помощью PHP

В этом уроки мы с помощью функций PHP получим данные, которые будет вводить пользователь в форму.

Первое, что нам нужно — это создать форму:

<form action="app/check.php" method="post">

<p>Имя: <input name="name" type="text"></p>

<p>Фамилия: <input name="surname" type="text"></p>

<p>E-mail: <input name="email" type="text"></p>

<p>Сообщение: <br /><textarea name="message" cols="30" rows="5"></textarea></p>

<p><input type='submit' value='Отправить'></p>

</form>

Обратите внимание на строку action=»app/check.php» — это адрес обработчика формы, сюда будут отправляться данные формы, после нажатия кнопки Отправить. Также, на параметр name у полей формы, мы будем использовать эти имена при написании кода. Передавать данные будем методом — POST.

1. Давайте начнем. Создайте и откройте (через редактор) обработчик app/code.php — сначала, это просто пустая страница. Далее откройте тег PHP — <?php.

2. Нам нужно проверить, была ли отправлена форма, для этого мы будем использовать глобальную переменную $_SERVER и проверять REQUEST_METHOD

<?php
if($_SERVER['REQUEST_METHOD'] == 'POST') {
    // наш код
}
?>

3. Дальше, если форма отправлена, мы можем получить данные от поля «Имя», для этого, какой-нибуть переменной присваиваем полученное значение от этого поля, например:

<?php
$name = $_POST['name']; 
?>

$_POST — переменная, в которой сохраняются данные, если форма была отправлена методом POST.

$_POST['name'] — получаем данные от поля name.

4. Тоже самое делаем и для остальных наших полей:

<?php
$name = $_POST['name'];

$surname = $_POST['surname'];
$email = $_POST['email'];
$message = $_POST['message'];
?>

5. Данные мы получили, теперь мы можем их вывести, для этого в страницу обработчика дописываем код:

<?php
$name = $_POST['name'];

$surname = $_POST['surname'];
$email = $_POST['email'];
$message = $_POST['message']; 

echo $name."<br />".$surname."<br />".$email."<br />".$message."<br />"; 
?>

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

Вот так, можно получать данные введенные в элементы формы.

Посмотреть исходники

Учебник HTML — Типы ввода



В этой главе описываются различные типы HTML кода элемента ввода <input>.

HTML Типы ввода

Вот различные типы ввода, которые вы можете использовать в HTML:

  • <input type="button">
  • <input type="checkbox">
  • <input type="color">
  • <input type="date">
  • <input type="datetime-local">
  • <input type="email">
  • <input type="file">
  • <input type="hidden">
  • <input type="image">
  • <input type="month">
  • <input type="number">
  • <input type="password">
  • <input type="radio">
  • <input type="range">
  • <input type="reset">
  • <input type="search">
  • <input type="submit">
  • <input type="tel">
  • <input type="text">
  • <input type="time">
  • <input type="url">
  • <input type="week">

Тип ввода «text»

<input type="text"> определяет однострочное поле ввода текста:

Пример

<form>
  <label for=»fname»>Имя:</label><br>
  <input type=»text» name=»fname»><br>
  <label for=»lname»>Фамилия:</label><br>

  <input type=»text» name=»lname»>
</form>

Попробуйте сами »

Именно так приведенный выше HTML код будет отображаться в браузере:

Имя:

Фамилия:


Тип ввода «password»

<input type="password"> определяет поле пароля:

Пример

<form>
  <label for=»username»>Имя пользователя:</label><br>
  <input type=»text» id=»username» name=»username»><br>
  <label for=»pwd»>Пароль:</label><br>
  <input type=»password» name=»pwd»>
</form>

Попробуйте сами »

Именно так приведенный выше HTML код будет отображаться в браузере:

Имя пользователя:

Пароль:

Символы в поле пароля маскируются (отображаются в виде звездочек или кружочков).



Тип ввода «submit»

<input type="submit"> определяет кнопку для предоставление данных формы в обработчик форм.

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

Обработчик формы задается в окне формы атрибут action:

Пример

<form action=»/action_page.php»>
  <label for=»fname»>Имя:</label><br>
  <input type=»text» name=»fname» value=»Андрей»><br>
  <label for=»lname»>Фамилия:</label><br>

  <input type=»text» name=»lname» value=»Щипунов»><br><br>
  <input type=»submit» value=»Отправить»>
</form>

Попробуйте сами »

Именно так приведенный выше HTML код будет отображаться в браузере:

Если вы опустите атрибут value кнопки submit, то кнопка получит текст по умолчанию:

Пример

<form action=»/action_page.php»>
  <label for=»fname»>Имя:</label><br>
  <input type=»text» name=»fname» value=»Андрей»><br>
  <label for=»lname»>Фамилия:</label><br>
  <input type=»text» name=»lname» value=»Щипунов»><br><br>

  <input type=»submit»>
</form>

Попробуйте сами »

Тип ввода «reset»

<input type="reset"> определяет кнопку сброса это приведет к сбросу всех значений формы к их значениям по умолчанию:

Пример

<form action=»/action_page.php»>
  <label for=»fname»>Имя:</label><br>
  <input type=»text» name=»fname» value=»Андрей»><br>
  <label for=»lname»>Фамилия:</label><br>
  <input type=»text» name=»lname» value=»Щипунов»><br><br>
  <input type=»submit» value=»Отправить»>
  <input type=»reset»>
</form>

Попробуйте сами »

Именно так приведенный выше HTML код будет отображаться в браузере:

Если вы измените входные значения и затем нажмете кнопку «Сброс», то данные формы будут сброшены до значений по умолчанию.


Тип ввода «radio»

<input type="radio"> определяет переключатель.

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

Пример

<form>
  <input type=»radio» name=»gender» value=»male»>
  <label for=»male»>Мужчина</label><br>
  <input type=»radio» name=»gender» value=»female»>
  <label for=»female»>Женщина</label><br>
  <input type=»radio» name=»gender» value=»other»>

  <label for=»other»>другое</label>
</form>

Попробуйте сами »

Именно так приведенный выше HTML код будет отображаться в браузере:

Мужчина
Женщина
другое

Тип ввода «checkbox»

<input type="checkbox"> определяет флажок.

Флажки позволяют пользователю выбрать ноль или более вариантов из ограниченного числа вариантов.

Пример

<form>
  <input type=»checkbox» name=»vehicle1″ value=»Bike»>
  <label for=»vehicle1″> У меня есть велосипед</label><br>
  <input type=»checkbox» name=»vehicle2″ value=»Car»>
  <label for=»vehicle2″> У меня есть машина</label><br>

  <input type=»checkbox» id=»vehicle3″ name=»vehicle3″ value=»Boat»>
  <label for=»vehicle3″> У меня есть лодка</label>
</form>

Попробуйте сами »

Именно так приведенный выше HTML код будет отображаться в браузере:

У меня есть велосипед
У меня есть машина
У меня есть лодка

Тип ввода «button»

<input type="button"> определяет кнопку:

Именно так приведенный выше HTML код будет отображаться в браузере:


Тип ввода «color»

<input type="color"> используется для полей ввода, которые должны содержать цвет.

В зависимости от поддержки браузера в поле ввода может отображаться палитра цветов.

Пример

<form>
  <label for=»favcolor»>Выберите свой любимый цвет:</label>
  <input type=»color» name=»favcolor»>
</form>

Попробуйте сами »

Тип ввода «date»

<input type="date"> используется для полей ввода, которые должны содержать дату.

В зависимости от поддержки браузера в поле ввода может отображаться средство выбора даты.

Пример

<form>
  <label for=»birthday»>День рождения:</label>
  <input type=»date» name=»birthday»>
</form>

Попробуйте сами »

Вы также можете использовать атрибуты min и max для добавления ограничений к датам:

Пример

<form>
  <label for=»datemax»>Введите дату до 1980-01-01:</label>
  <input type=»date» name=»datemax» max=»1979-12-31″><br><br>
  <label for=»datemin»>Введите дату после 2000-01-01:</label>
  <input type=»date» name=»datemin» min=»2000-01-02″>
</form>

Попробуйте сами »

Тип ввода «datetime-local»

<input type="datetime-local"> задает поле ввода даты и времени без часового пояса.

В зависимости от поддержки браузера в поле ввода может отображаться средство выбора даты.

Пример

<form>
  <label for=»birthdaytime»>День рождения (дата и время):</label>
  <input type=»datetime-local» name=»birthdaytime»>
</form>

Попробуйте сами »

Тип ввода «email»

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

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

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

Пример

<form>
  <label for=»email»>Введите свой адрес электронной почты:</label>
  <input type=»email» name=»email»>
</form>

Попробуйте сами »

Тип ввода «file»

<input type="file"> определяет поле выбор файла в «браузере» и кнопку для загрузки файла.

Пример

<form>
  <label for=»myfile»>Выбрать файл:</label>
  <input type=»file» name=»myfile»>
</form>

Попробуйте сами »

Тип ввода «month»

<input type="month"> позволяет пользователю выбрать месяц и год.

В зависимости от поддержки браузера в поле ввода может отображаться средство выбора даты.

Пример

<form>
  <label for=»bdaymonth»>День рождения (месяц и год):</label>
  <input type=»month» name=»bdaymonth»>
</form>

Попробуйте сами »

Тип ввода «number»

<input type="number"> определяет числовое поле ввода.

Вы также можете установить ограничения на то, какие номера принимаются.

В следующем примере отображается числовое поле ввода, в которое можно ввести значение от 1 до 5:

Пример

<form>
  <label for=»quantity»>Количество (от 1 до 5):</label>
  <input type=»number» name=»quantity» min=»1″ max=»5″>
</form>

Попробуйте сами »

Входные ограничения

Вот список некоторых распространенных ограничений ввода:

Атрибут Описание
checked Указывает, что поле ввода должно быть предварительно выбрано при загрузке страницы (для type=»checkbox» или type=»radio»)
disabled Указывает, что поле ввода должно быть отключено
max Задает максимальное значение для поля ввода
maxlength Задает максимальное количество символов для поля ввода
min Задает минимальное значение для поля ввода
pattern Задает регулярное выражение для проверки входного значения
readonly Указывает, что поле ввода доступно только для чтения (не может быть изменено)
required Указывает, что поле ввода является обязательным (должно быть заполнено)
size Задает ширину (в символах) поля ввода
step Задает допустимые интервалы чисел для поля ввода
value Задает значение по умолчанию для поля ввода

Подробнее об ограничениях на ввод данных вы узнаете в следующей главе.

В следующем примере показано числовое поле ввода, в которое можно ввести значение от 0 до 100 с шагом 10. Значение по умолчанию равно 30:

Пример

<form>
  <label for=»quantity»>Количество:</label>
  <input type=»number» name=»quantity» min=»0″ max=»100″ step=»10″ value=»30″>
</form>

Попробуйте сами »

Тип ввода «range»

<input type="range"> определяет элемент управления для ввода числа, точное значение которого не имеет значения (например, ползунок управления). Диапазон по умолчанию от 0 до 100. Однако вы можете установить ограничения на то, какие номера принимаются с помощью атибутов min, max, и step:

Пример

<form>
  <label for=»vol»>Громкость (от 0 до 50):</label>
  <input type=»range» name=»vol» min=»0″ max=»50″>
</form>

Попробуйте сами »

Тип ввода «search»

<input type="search"> используется для полей поиска (поле поиска ведет себя как обычное текстовое поле).

Пример

<form>
  <label for=»gsearch»>Поиск Google:</label>
  <input type=»search» name=»gsearch»>
</form>

Попробуйте сами »

Тип ввода «tel»

<input type="tel"> используется для полей ввода, которые должны содержать номер телефона.

Пример

<form>
  <label for=»phone»>Введите свой номер телефона:</label>
  <input type=»tel» name=»phone» pattern=»[0-9]{3}-[0-9]{2}-[0-9]{3}»>
</form>

Попробуйте сами »

Тип ввода «time»

<input type="time"> позволяет пользователю выбрать время (без часового пояса).

В зависимости от поддержки браузера в поле ввода может отображаться средство выбора времени.

Пример

<form>
  <label for=»appt»>Выберите время:</label>
  <input type=»time» name=»appt»>
</form>

Попробуйте сами »

Тип ввода «url»

<input type="url"> используется для полей ввода, которые должны содержать URL адрес.

В зависимости от поддержки браузера поле url адреса может быть автоматически проверено при отправке.

Некоторые смартфоны распознают тип URL адреса, и добавляют, «.com» на клавиатуре, чтобы соответствовать ввода URL адреса.

Пример

<form>
  <label for=»homepage»>Добавьте свою домашнюю страницу:</label>
  <input type=»url» name=»homepage»>
</form>

Попробуйте сами »

Тип ввода «week»

<input type="week"> позволяет пользователю выбрать неделю и год.

В зависимости от поддержки браузера в поле ввода может отображаться средство выбора даты.

Пример

<form>
  <label for=»week»>Выберите неделю:</label>
  <input type=»week» name=»week»>
</form>

Попробуйте сами »

HTML Упражнения

Проверьте себя с помощью упражнений

Упражнение:

В приведенной ниже форме добавьте поле ввода текста с именем «username» .

<form action=»/action_page.php»>
<>
</form>


Отправить ответ »

Начните упражнение


HTML Атрибут типа ввода

Тег Описание
<input type=»»> Указывает тип ввода для отображения

PHP форма

PHP $ _GET и $ _POST переменные используются для получения информации в виде, например, ввод данных пользователем.


PHP обработки формы

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

примеров

Следующий пример содержит HTML-форму с двумя полями ввода и кнопку отправки.

form.html код файла выглядит следующим образом :

<html>
<head>
<meta charset="utf-8">
<title>本教程(w3big.com)</title>
</head>
<body>

<form action="welcome.php" method="post">
名字: <input type="text" name="fname">
年龄: <input type="text" name="age">
<input type="submit" value="提交">
</form>

</body>
</html>

Когда пользователь заполнить форму выше и нажмите кнопку отправки, данные формы будут отправлены в файл PHP с именем «welcome.php» из:

welcome.php файлы следующим образом:

欢迎 <?php echo $_POST["fname"]; ?>!<br>
你的年龄是 <?php echo $_POST["age"]; ?>  岁。

Демо доступ через браузер следующим образом:

Мы объясним в PHP $ _GET и $ _POST переменных в следующей главе.


Аутентификация с помощью форм

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

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

HTML-форм


Элемент

HTML-формы используются для сбора пользовательского ввода.

Элемент определяет форму HTML:

<форма>
.
элементы формы
.

HTML-форм содержат элементов формы .

Элементы формы — это различные типы элементов ввода, флажки, радио кнопки, кнопки отправки и многое другое.


Элемент

Элемент является самой важной формой элемент .

Элемент имеет много вариантов, в зависимости от типа атрибут.

Вот типы, используемые в этой главе:

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

Ввод текста

определяет однострочное поле ввода для ввод текста :

Пример

<форма>
Имя:

 

Фамилия:

 

Попробуй сам »

Вот как это будет выглядеть в браузере:

Имя:

Фамилия:

Примечание: Сама форма не видна.Также обратите внимание, что ширина по умолчанию текстового поля составляет 20 символов.


Ввод радиокнопки

определяет переключатель .

Радиокнопки позволяют пользователю выбрать ОДИН из ограниченного числа вариантов:

Пример


  Мужской

Женский

Другое

Попробуй сам »

Вот как приведенный выше HTML-код будет отображаться в браузере:

Мужской
Женский
Другое


Кнопка отправки

определяет кнопку для отправка форма в обработчик формы .

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

Обработчик формы указан в действии формы атрибут:

Пример


  Имя:

 

  Фамилия:

 


 

Попробуй сам »

Вот как приведенный выше HTML-код будет отображаться в браузере:


Атрибут действия

Атрибут действия определяет действие, которое должно быть выполнено, когда форма отправлена.

Обычный способ отправить форму на сервер — использовать кнопку отправки.

Обычно форма отправляется на веб-страницу на веб-сервере.

В приведенном выше примере для обработки отправленная форма:

<форма action=»action_page.php «>

Если атрибут действия опущен, действие устанавливается на текущую страницу.


Атрибут метода

Атрибут метода указывает метод HTTP ( GET или POST ) для использования при отправке форм:

метод=»получить» >

или:

method=»post» >


Когда использовать GET?

Вы можете использовать GET (метод по умолчанию):

Если отправка формы является пассивной (например, запрос поисковой системы) и без конфиденциальная информация.

При использовании GET данные формы будут видны по адресу страницы:

action_page.php?firstname=Микки&lastname=Мышь

GET лучше всего подходит для небольших объемов данных.Ограничения по размеру установлены в вашем браузер.

Когда использовать POST?

Вы должны использовать POST:

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

POST обеспечивает лучшую безопасность, поскольку отправленные данные не видны в адрес страницы.


Атрибут имени

Для правильной отправки каждое поле ввода должно иметь атрибут имени.

Этот пример будет отправьте только поле ввода «Фамилия»:

Пример


  Имя:

 

  Фамилия:

 


 

Попробуй сам »

Группировка данных формы с помощью

Элемент

группирует связанные данные в форме.

Элемент определяет заголовок для

элемент.

Пример


 

    Личное информация:
    Имя:

   

    Фамилия:





 

Попробуй сам »

Вот как приведенный выше HTML-код будет отображаться в браузере:


Атрибуты формы HTML

HTML-элемент со всеми возможными установленными атрибутами будет выглядеть так: это:

enctype=»application/x-www-form-urlencoded» autocomplete=»off» novalidate>
.
элементы формы
.


Проверьте себя с помощью упражнений!

Упражнение 1 » Упражнение 2 » Упражнение 3 » Упражнение 4 »


Вот список атрибутов :

Атрибут Описание
принять кодировку Указывает кодировку, используемую в отправленной форме (по умолчанию: страница кодировка).
действие Указывает адрес (url), куда отправить форму (по умолчанию: отправка страницы).
автозаполнение Указывает, должен ли браузер автоматически заполнять форму (по умолчанию: включено).
enctype Указывает кодировку отправляемых данных (по умолчанию: в кодировке URL).
метод Указывает метод HTTP, используемый при отправке формы (по умолчанию: GET).
имя Указывает имя, используемое для идентификации формы (для использования DOM: документ.формы.имя).
повторная проверка Указывает, что браузер не должен проверять форму.
цель Указывает цель адреса в атрибуте действия (по умолчанию: _себя).
Вы узнаете больше об атрибутах в следующих главах.

Дополнительные примеры

Отправить электронное письмо из формы
Как отправить письмо из формы.


типов ввода HTML

Типы ввода HTML

В этой главе рассматриваются типы ввода, принадлежащие элементу .

Символы, присутствующие в поле пароля, остаются замаскированными (показаны звездочками или кружками).

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

Форма-обработчик фактически представляет собой серверную страницу со скриптом, который используется для обработки входных данных.

Обработчик формы упоминается в атрибуте действия формы:

Пример


  Имя:

 

  Фамилия:

 


 

Попробуй сам

Вот как приведенный выше HTML-код будет отображаться в браузере:

Если вы опустите атрибут значения кнопки отправки, кнопка получит текст по умолчанию:

Пример


  Имя:

 

  Фамилия:

 


 

Попробуй сам

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

Пример


  Имя:

 

  Фамилия:

 


 
 

Попробуй сам

Вот как приведенный выше HTML-код будет отображаться в браузере:

Если вы изменяете входные значения, а затем нажимаете кнопку «Сброс», данные формы будут изменены на значения по умолчанию.

определяет кнопку :

Пример

Попробуй сам

Вот как приведенный выше HTML-код будет отображаться в браузере:

В HTML5 добавлено несколько новых типов ввода:

  • цвет
  • дата
  • дата и время
  • дата-время-местный
  • электронная почта
  • месяц
  • номер
  • диапазон
  • поиск
  • тел
  • время
  • адрес
  • неделя

Типы ввода, которые не поддерживаются старыми веб-браузерами, будут вести себя как тип ввода текста.

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

Вы можете установить ограничения для номеров.

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

Пример

<форма>
Количество (от 1 до 5):
 

Попробуй сам

Ниже приведен список нескольких общих ограничений ввода (некоторые из них являются новыми в HTML5):

.
Атрибут Описание
отключен Указывает, что поле ввода должно быть отключено
макс. Указывает максимальное значение для поля ввода
максимальная длина Указывает максимальное количество символов для поля ввода
мин Указывает минимальное значение для поля ввода
узор Задает регулярное выражение для проверки входного значения на соответствие
только чтение Указывает, что поле ввода доступно только для чтения (не может быть изменено)
требуется Указывает, что поле ввода является обязательным (должно быть заполнено)
размер Указывает ширину (в символах) поля ввода
шаг Указывает допустимые интервалы чисел для поля ввода
значение Указывает значение по умолчанию для поля ввода

Более подробно об ограничениях ввода вы узнаете в следующей главе.

Пример

<форма>
  Количество:

Попробуй сам

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

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

Пример

<форма>
День рождения:
 

Попробуй сам

Ограничения также могут быть добавлены к вводу:

Пример


  Введите дату до 1980-01-01:
 

  Введите дату после 01.01.2000:
 

Попробуй сам

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

В зависимости от поддержки браузера в поле ввода может отображаться палитра цветов.

Пример

<форма>
Выберите свой любимый цвет:
 

Попробуй сам

можно использовать для предоставления полей ввода, которые должны иметь значение в пределах диапазона.

В зависимости от поддержки браузера отображаемое поле ввода может также отображаться как ползунок.

Пример

<форма>

Попробуй сам

Для указания ограничений можно использовать следующие атрибуты: min, max, step, value.

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

В зависимости от поддержки браузера в поле ввода может отображаться средство выбора даты.

Пример

<форма>
День рождения (месяц и год):
 

Попробуй сам

позволит пользователю выбрать неделю и год.

В зависимости от поддержки браузера в поле ввода может отображаться средство выбора даты.

Пример

<форма>
Выберите неделю:
 

Попробуй сам

позволит пользователю выбрать время (без часового пояса).

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

Пример

<форма>
Выберите время:
 

Попробуй сам

Тип ввода: datetime-local

используется для разрешения пользователю выбирать дату и время (без часового пояса).

В зависимости от поддержки браузера в поле ввода может отображаться средство выбора даты.

Пример

<форма>
День рождения (дата и время):
 

Попробуй сам

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

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

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

Пример

<форма>
Электронная почта:
 

Попробуй сам

можно использовать для полей поиска (поле поиска действует как обычное текстовое поле).

Пример

<форма>
Поиск в Google:
 

Попробуй сам

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

В настоящее время тип tel поддерживается только в Safari 8.

Пример

<форма>
Телефон:
 

Попробуй сам

используется для предоставления полей ввода, которые должны содержать URL-адрес.

на основе поддержки браузера поле URL-адреса во время отправки может быть проверено автоматически.

Некоторые смартфоны определяют тип URL-адреса, а также добавляют «.com» на клавиатуру для сопоставления введенного URL-адреса.

Пример

<форма>
Добавьте свою домашнюю страницу:
 

Попробуй сам

Проверьте себя с помощью упражнений

Правильное использование в коде »

Раскрытие информации: Ваша поддержка помогает сайту работать! Мы зарабатываем комиссионные за некоторые услуги, которые мы рекомендуем на этой странице.Узнайте больше
Значение
Как определить тип ввода в HTML (все значения и атрибуты)
Что делает Скрытое поле HTML: правильное использование в коде ?
Определяет поле в форме, невидимое для пользователя.

Пример кода

  

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

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

Зачем прятать поле?

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

Например, если пользователь заполняет форму запроса, мы можем захотеть получить его IP-адрес с помощью фрагмента кода PHP. Мы также можем захотеть получить URL-адрес ссылающейся страницы.Вы можете увидеть это в действии в нашем примере кода; форма фиксирует информацию, но не отображает ее.

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

Клэр — опытный технический писатель, редактор и энтузиаст HTML. Она пишет для HTML.com и управляет контент-агентством Red Robot Media.

Браузер Поддержка скрытых

Все значения типа

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

Все атрибуты ввода

Имя атрибута Значения Примечания
Шаг
Шаг 9004 Задает интервал между допустимыми значениями ввода.
required Указывает, что поле ввода является обязательным; запрещает отправку формы и предупреждает пользователя, если обязательное поле пусто.
только для чтения Запрещает пользователю редактировать значение ввода.
заполнитель Задает текст-заполнитель в текстовом вводе.
шаблон Указывает регулярное выражение, по которому проверяется значение ввода.
несколько Позволяет пользователю вводить несколько значений при загрузке файла или вводе по электронной почте.
мин. Указывает минимальное значение для полей ввода чисел и дат.
max Задает максимальное значение для полей ввода чисел и дат.
список Указывает идентификатор элемента , который предоставляет список предложений автозаполнения для поля ввода.
height Определяет высоту входного изображения.
formtarget Указывает контекст просмотра, в котором открывается ответ сервера после отправки формы.Для использования только с типами ввода «отправить» или «изображение».
formmethod Указывает метод HTTP (GET или POST), который будет использоваться при отправке данных формы на сервер. Только для использования с типами ввода «отправить» или «изображение».
formenctype Указывает, как данные формы должны быть отправлены на сервер. Только для использования с типами ввода «отправить» и «изображение».
formaction Указывает URL-адрес для отправки формы.Может использоваться только для type=»submit» и type=»image».
форма Указывает форму, которой принадлежит поле ввода.
автофокус Указывает, что поле ввода должно быть в фокусе сразу после загрузки страницы.
ключ доступа Определяет сочетание клавиш для элемента.
autocomplete Указывает, должен ли браузер пытаться автоматически завершать ввод на основе данных, введенных пользователем в аналогичные поля.
граница Используется для указания границы ввода. Устарело. Вместо этого используйте CSS.
checked Указывает, следует ли по умолчанию отмечать ввод флажка или переключателя формы.
отключено Отключает поле ввода.
maxlength Указывает максимальное количество символов, которые можно ввести в текстовый ввод.
язык Используется для указания языка сценариев, используемого для событий, запускаемых вводом.
имя Указывает имя элемента ввода. Имя и значение каждого элемента ввода включаются в HTTP-запрос при отправке формы.
размер Указывает ширину ввода в символах.
src Определяет URL-адрес источника для входного изображения.
тип кнопка
флажок
файл
скрытый
изображение
пароль
радио
сброс
отправка
текст
Определяет тип ввода.
значение Определяет начальное значение или выбор по умолчанию для поля ввода.

элемент ввода (тип=неделя)

Специальные атрибуты

автофокус

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

Пример

  

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

отключен

Логическое значение, указывающее, отключен элемент управления или нет. Если атрибут принимает значение «отключено» или пустую строку («»), или если он просто присутствует, элемент управления будет отключен.

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

Пример

  

Начало:

форма

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

Этот атрибут является новым в HTML 5 и помогает определить релевантность элементов управления во вложенных или удаленных формах.

Пример

  

Отправление:

список

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

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

Значения, предоставленные элементом datalist , должны соответствовать требованиям недельных строк.

Пример

  <форма действие="../../form-result.php" method="post" target="_blank">
  

Приключение начинается:

<список данных> <параметр значение="2015-W30"> <параметр значение="2015-W31"> <параметр значение="2016-W01"> <параметр значение="2016-W02">
максимум

Максимальная неделя, которую может выбрать пользователь.Поддерживающие браузеры должны запрещать выбор любой даты, превышающей дату, указанную в этом атрибуте.

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

Пример

  
  

Остановить предупреждения до:

мин

Минимальная неделя, которую пользователь может выбрать.Поддерживающие браузеры должны запрещать выбор любой недели меньше указанной в этом атрибуте.

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

Пример

  
  

Отправка сообщений из:

имя

Имя элемента управления.Это имя будет отправлено браузером агенту обработки вместе с содержимым атрибута value . Оба атрибута вместе будут соответствовать паре имя-значение, которая будет использоваться для обработки данных формы.

В настоящее время значение isindex , ранее использовавшееся особым образом некоторыми браузерами и включенное в стандарт HTML , не разрешено в этом атрибуте.

Пример

  <форма действие="../../form-result.php" method="post" target="_blank">
  

Неделя выпускных вечеров:

только для чтения

Логическое значение, указывающее браузеру запретить пользователю изменять значение элемента управления. Если этот атрибут имеет значение «только для чтения» или пустую строку («»), или если он просто присутствует, пользователю не будет разрешено изменять значение в элементе управления.

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

Пример

  
  

Подписан с:

требуется

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

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

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

Пример

  
  

Участник с:

шаг

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

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

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

Пример

  
  

Последние отпуска:

тип

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

.
  • hidden: скрытый элемент управления, используемый для отправки информации на сервер, обычно управляемый сценариями.
  • текст: элемент управления, используемый для ввода однострочного фрагмента текста.
  • поиск: то же, что текст, но для целей поиска.
  • тел: элемент управления, используемый для предоставления номера телефона.
  • URL-адрес
  • : текстовое поле, используемое для ввода единственного и абсолютного URL-адреса .
  • Электронная почта
  • : элемент управления, предназначенный для редактирования одного или нескольких адресов электронной почты.
  • пароль: текстовое поле для редактирования паролей, где символы представлены точками.
  • date: элемент управления для ввода конкретной даты.
  • месяц: элемент управления для ввода определенного месяца.
  • неделя: элемент управления для ввода конкретной недели.
  • время: элемент управления для ввода определенного времени.
  • datetime-local: элемент управления для ввода конкретной локальной даты и времени.
  • число: элемент управления для ввода числа.
  • Диапазон
  • : элемент управления для ввода одного или двух чисел внутри диапазона.
  • color: элемент управления для ввода цвета.
  • флажок: элемент управления для ввода логического значения (истина/ложь).
  • Радио
  • : элемент управления, используемый для выбора одного варианта из многих.
  • Файл
  • : элемент управления, используемый для загрузки файлов на сервер.
  • submit: кнопка, используемая для отправки формы.
  • Изображение
  • : то же, что и submit, но с возможностью отображения в виде изображения вместо использования внешнего вида кнопки по умолчанию.
  • сброс: кнопка, используемая для сброса элементов управления формы к их значениям по умолчанию.
  • Кнопка
  • : кнопка, не связанная с действием по умолчанию.

Если этот атрибут отсутствует, элемент ведет себя так, как если бы он имел значение «текст».

Пример

  
  
значение

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

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

Пример

  
  

Отправлять мне оповещения:

Доступ к данным формы из PHP

Винси.Последнее изменение: 2 июня 2021 г.

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

Используя эти поля, пользователь может вводить данные и отправлять их в файл PHP на стороне сервера. Имя файла PHP, которое будет вызываться в событии отправки, будет указано с помощью атрибута for action .

Значения полей формы добавляются в глобальный массив PHP на основе типа запроса, указанного в форме, с использованием атрибута метода .Если метод формы — GET, то значения полей формы сохраняются в массиве $_GET.

Если это POST, то значения отправляются с помощью массива $_POST. В файле PHP массив запросов $_GET или $_POST используется для доступа и обработки пользовательского ввода, отправленного через форму.

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

Посмотреть демонстрацию

На следующем снимке экрана показан вывод HTML-формы после отправки пользовательских данных. Он заполняет отправленные значения с помощью кода PHP.

HTML-форма и предварительно заполненные значения

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

Поскольку атрибут action   пуст, отправка формы будет обрабатывать ту же страницу и выполнять код PHP для доступа к данным формы.

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

Например, если пользователь отметил несколько элементов из группы флажков, мы проверяем каждый элемент флажка, если он находится в массиве $_POST.

 

<граница таблицы="0" выравнивание="центр">

Заголовок
Описание
Категория
<выбрать имя="категория">

Посмотреть демоСкачать

↑ Наверх

Проверка ввода формы с использованием только HTML5 и регулярных выражений

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

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

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

Элемент ввода формы

Всякий раз, когда вы хотите получить какие-либо данные от своих пользователей, вы, скорее всего, будете использовать элемент HTML input  . Неважно, хотите ли вы узнать их имя, фамилию, адрес электронной почты, город, в котором они сейчас живут, их номер телефона или их любимую спортивную команду. Элемент input  – это очень удобный способ получения информации от наших посетителей.

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

Обе эти проблемы можно очень легко решить, используя некоторые атрибуты HTML5 с элементами формы.

Атрибут типа

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

Это нормально, если вы хотите, чтобы пользователи вводили свои имена. Однако, если вы хотите, чтобы они ввели свой адрес электронной почты или числа, такие как возраст и вес, гораздо лучше установить значение атрибута типа на что-то подходящее.

Вот несколько значений, которые вы можете выбрать:

  • электронная почта :  Пользователям будет предложено ввести свой адрес электронной почты в допустимом формате.Например, они не могут просто написать myemail.com или или @something.com . Им нужно будет ввести значение, подобное  . Конечно, они все еще могут вводить несуществующие электронные письма, но это уже другой вопрос!
  • номер : это гарантирует, что допустимыми входными данными будут считаться только числа. Например, когда вы спрашиваете кого-то о возрасте в форме, он не сможет ввести картофель или тридцать шесть в качестве входных данных.Им нужно будет написать реальный номер, например 36 или 15 .
  • url : для атрибута type можно установить значение url , если вы хотите, чтобы пользователи вводили действительный URL-адрес в элемент ввода. Это не позволит им ввести что-то вроде tutsplus . Однако tutsplus.com также будет считаться недействительным — пользователям нужно будет ввести полный URL-адрес, например https://tutsplus.com .
  • тел : Использование этого значения не так полезно, как другие, потому что формат телефонного номера различается по всему миру.Просто не существует стандартного шаблона, который браузеры могли бы сопоставить с вводом, чтобы определить, является ли число действительным. Однако установка типа tel может оказаться полезной на более позднем этапе, когда вы будете выполнять собственную пользовательскую проверку.

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

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

Атрибуты минимальной и максимальной длины

Еще один способ ограничить допустимые входные данные для элемента — использовать атрибуты minlength и maxlength . Они устанавливают минимальное и максимальное количество символов, которые необходимо ввести в элемент ввода, чтобы сделать его действительным.

Правильные значения для обоих этих атрибутов будут различаться в каждом конкретном случае. Например, некоторые веб-сайты могут требовать, чтобы длина имени пользователя составляла от 4 до 15 символов, в то время как другие могут ограничивать максимальную длину до 12.Точно так же люди в некоторых странах будут иметь необычно короткие или длинные имена по сравнению с другими.

Использование регулярных выражений для проверки формы

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

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

Вот несколько примеров использования регулярного выражения с атрибутом шаблона .

  

Приведенный выше шаблон будет постоянно проверять, что все имена пользователей содержат только символы от a-z, A-Z или 0-9. Например, monty42 , 42monty , MON42ty и mon42ty являются допустимыми именами пользователей в этом случае, но monty_42 недопустимы.

Атрибуты minlength и maxlength гарантируют, что имя пользователя не будет слишком маленьким или слишком большим.

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

  

Теперь каждое имя пользователя, которое не начинается с _ и содержит любые символы, кроме a-z, A-Z или 0-9 после этого, будет считаться недействительным.

Я надеюсь, что это поможет прояснить, как мы можем использовать атрибут шаблона и некоторое регулярное выражение, чтобы ограничить то, что считается допустимым вводом, даже если для атрибута type установлено значение text .

Расширенная проверка с помощью шаблонов регулярных выражений

Вы также можете использовать атрибут шаблона вместе с другими типами элементов ввода, такими как электронная почта и URL , чтобы ограничить то, что считается действительным. Предположим, вы хотите, чтобы пользователи вводили только URL, который является субдоменом tutsplus.ком . Вы можете просто установить для атрибута шаблона значение https://.*\.tutsplus.com . Теперь любой ввод, например https://google.com или https://envato.com , будет считаться недействительным. Даже если вы используете URL-адрес tutsplus.com , начинающийся с https:// , это будет недействительным, поскольку URL-адрес должен начинаться с https:// .

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

  

Если указанный выше элемент ввода используется в форме, пользователи смогут ввести только адрес электронной почты, оканчивающийся на tutsplus.com или envato.com . Это означает, что или будут недействительными.

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

  • Регулярные выражения

    Шпаргалка по регулярным выражениям JavaScript

    Monty Shokeen

Обязательные поля и текст-заполнитель

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

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

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

Атрибут -заполнитель также помогает сделать форму более удобной для пользователя.Например, если вы не сообщите пользователям, что они должны вводить URL-адреса, которые начинаются с https:// и являются поддоменами tutsplus.com , они могут просто сдаться после неудачного заполнения поля URL с . something.com  или  code.tutsplus.com .

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

 <форма>
  
  
  


Часто используемые регулярные выражения

Регулярное выражение для проверки действительного имени пользователя

Имена пользователей представляют собой простые буквенно-цифровые строки, иногда разрешенные и _  , в зависимости от создателей веб-сайта.Вы можете использовать следующее регулярное выражение, чтобы определить, должно ли имя пользователя состоять только из буквенно-цифровых символов, - и _ [a-zA-Z0-9-_]{4, 24} . Числа внутри фигурных скобок ограничивают допустимую длину имени пользователя от 4 до 24 символов.

Вы можете использовать [a-zA-Z][a-zA-Z0-9-_]{4,24}  , чтобы заставить пользователей использовать букву в качестве первого символа их имени пользователя.

Регулярное выражение для проверки действительных телефонных номеров

Телефонные номера обычно состоят из 10 цифр.Регулярное выражение для проверки того, что кто-то ввел действительный номер телефона, может быть просто  \d{10} .

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

.
 123-456-7890
123 456 7890
123.456.7890
(123) 456 7890 

Вы можете использовать  \(?(\d{3})\)?[-\.\s]?(\d{3})[-\.\s]?(\d{4})  для соответствуют всем приведенным выше шаблонам телефонных номеров.Используя  ? указывает браузеру искать 0 или 1 вхождение предшествующего символа. Цифры разделены на группы по 3 и 4, используя \d{3}  и  \d{4} .

Регулярное выражение для проверки действительного адреса электронной почты

Адреса электронной почты обычно имеют вид Любой адрес электронной почты, соответствующий указанному выше шаблону, можно сопоставить с помощью  (\w\.?)[\w\.-]+\.\w{2,4} .

Первоначально длина TLD составляла от 2 до 4 символов, но теперь они могут содержать гораздо больше символов, поэтому вы можете изменить часть проверки TLD, чтобы разместить все новые более длинные TLD со следующим регулярным выражением: (\w\.?)[\w\.-]+\.\w{2,} .

Регулярное выражение для проверки действительного URL-адреса

Вы можете использовать  [(http(s)?):\/\/(www\.)?\w-/=#%&\.\?]{2,}\.[az]{2,} ([\w-/=#%&\.\?]*) для соответствия наиболее допустимым URL-адресам. Шаблоны регулярных выражений становятся все более и более сложными в зависимости от того, какую точность вы ищете в совпадении. В этом конкретном случае мы проверяем необязательные http или www , а затем набор других символов. Приведенное выше регулярное выражение также будет обрабатывать параметры запроса и фрагменты URL.

Вы также можете прочитать больше о распространенных регулярных выражениях.

  • Веб-разработка

    8 регулярных выражений, которые вы должны знать

    Василий

Заключительные мысли

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

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

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

  • JavaScript

    лучших форм JavaScript 2019 года

    Монти Шокин

  • JavaScript

    Простая проверка формы с помощью jQuery

    Монти Шокин

HTML5 для мобильного Интернета — формы и типы ввода

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

Типы ввода HTML5

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

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

Цвет типа ввода

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

Использование:

  

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

 
Ввод цвета, реализованный в Opera Mobile и браузерах Chrome на Android

Поддержка браузера и запасные варианты

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

Тип ввода даты

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

Использование:

  

Попробуйте:

 
Тип ввода даты, реализованный в Opera Mobile для Android и iOS 7

Обратите внимание, что тип ввода date , а также варианты datetime и datetime-local предлагают полезные атрибуты, такие как min и max , которые могут ограничивать и проверять вводимые пользователем данные.Мы подробнее рассмотрим это в разделе ниже, посвященном проверке формы.

Поддержка браузера и запасные варианты

Хотя реализации на разных платформах мобильных ОС различаются, поддержка довольно широко распространена, за исключением стандартного браузера Android.

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

В настольных браузерах этот тип ввода также широко поддерживается, за исключением Safari, Internet Explorer и Firefox. Однако IE Edge поддерживает типы ввода date , и он находится в стадии разработки в Firefox (и доступен в сборках Firefox Nightly).

Тип ввода datetime и datetime-local

Эти типы ввода позволяют пользователю вводить информацию как о времени, так и о дате.Когда поддерживается, взаимодействие с полем с использованием этого типа ввода будет отображать виджет выбора даты, похожий на собственный, и виджет времени под датой. Разница между datetime и datetime-local заключается в том, что первый относится к времени UTC, а последний вообще не несет никакой информации о часовом поясе.

Использование:

  

Попробуйте:


Локальный ввод даты и времени, реализованный в браузере Chrome для Android

Поддержка браузера и запасные варианты

На момент написания статьи мобильные браузеры больше поддерживали datetime-local , чем datetime .Например, Chrome и Firefox для Android поддерживают datetime-local , но не поддерживают datetime . На самом деле выбор поля datetime в Firefox (v24.0) привел к сбою браузера в нашем тестировании. Таким образом, если нет специального требования включать информацию о часовом поясе при отправке формы, вероятно, безопаснее придерживаться datetime-local .

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

Тип ввода электронная почта

Это не требует особого обсуждения. Там, где это поддерживается, ввод будет ограничен браузером действительными адресами электронной почты. При отправке неверного адреса электронной почты браузер отобразит сообщение об ошибке, как показано на изображении ниже. Браузер также может отображать модифицированную клавиатуру с символом «@», чтобы упростить ввод адреса электронной почты.

Использование:

  

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


Тип ввода электронной почты в браузере Chrome для Android с отображением сообщения — обратите внимание на продвижение символа «@», необходимого для ввода электронной почты

Поддержка браузера и запасные варианты

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

Номер типа ввода

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

Использование:

  

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

 
Тип ввода числа, отображаемый в Chrome для Android (слева) и iOS 7 (справа).Обратите внимание на цифровую клавиатуру на обоих

Поддержка браузера и запасные варианты

Несмотря на то, что поверхностно поддерживается довольно широко отображение цифровой клавиатуры, существует смешанная поддержка фактической числовой проверки, поэтому любая желаемая проверка должна быть реализована каким-либо другим способом (JavaScript/на стороне сервера для высокопроизводительных и на стороне сервера для низкоуровневых). конечные устройства). Элементы управления увеличением и уменьшением обычно отображаются только в настольных браузерах. Существует смешанная поддержка атрибутов min и max с поддержкой Firefox, Chrome и Opera, а в стандартном Android — нет.Поэтому большинство мобильных браузеров указаны в приведенной выше таблице как имеющие лишь частичную поддержку.

Тип ввода тел

Тип ввода тел очень похож на тип ввода номер . Основное отличие заключается в цифровой клавиатуре, которая отображается в некоторых браузерах. Для номер отображается простая цифровая клавиатура, а для tel пользователю предоставляется виртуальная телефонная клавиатура с буквенно-цифровыми клавишами.

Использование:

Попробуйте:

 
Тип ввода Tel, отрендеренный в Firefox для Android (слева) и iOS7 (справа).Обратите внимание на буквенно-цифровую клавиатуру набора номера в обоих

Поддержка браузера и запасные варианты

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

Поиск типа ввода

Назначение этого типа — указать, что поле является полем поиска.На первый взгляд, это не так уж сильно отличается от типа ввода текста на момент написания. Для большинства браузеров поле этого типа неотличимо от типа ввода текста. Однако, если немного покопаться, есть некоторые тонкости. Например, если добавлен атрибут результатов (т. е. что-то вроде

), то, по крайней мере, некоторые браузеры WebKit (например, Chrome для мобильных и настольных компьютеров, но не стандартный Android) будут отображать небольшой значок увеличительного стекла в поле поиска, как показано ниже.

Кроме того, как только вы начнете печатать, многие браузеры будут отображать маленький «x» справа от текстового поля, чтобы легко удалить любой напечатанный текст. Контекстная клавиатура также отображается в большинстве поддерживаемых браузеров: клавиатура iOS показывает Search вместо обычного Go ; аналогично Android отображает значок увеличительного стекла на кнопке отправки на виртуальной клавиатуре.

Использование:

  

Попробуйте:
В зависимости от вашего браузера вы можете заметить маленькое увеличительное стекло в текстовом поле ниже, и вы можете увидеть маленький «x» справа от поля, как только вы начнете печатать.Никаких специальных ограничений или проверок не выполняется.


Поиск типа ввода, отображаемый в браузере Chrome для Android

Поддержка браузера и запасные варианты

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

Диапазон типов ввода

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

Использование:

  

Диапазон по умолчанию в большинстве браузеров составляет от 0 до 100. То есть крайнее левое положение ползунка соответствует 0, а крайнее правое — 100. Можно изменить диапазон, используя атрибуты min и max . Мы также можем указать значение шага, используя атрибут step .Итак, чтобы указать диапазон от 5 до 50 с размером шага 5, мы будем использовать:

  

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


Тип ввода диапазона, отображаемый в браузере Chrome для Android

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

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

Обязательный атрибут

Требование заполнения поля перед отправкой так же просто, как добавление обязательного атрибута:

  

Тогда на поддерживаемых устройствах браузер не позволит отправить форму без заполнения поля.Обычно в этой ситуации отображается какое-то уведомление, см., например, Chrome на Android и Safari на iOS на изображении ниже:


Обязательное поле ввода в Firefox для Android

Попробуйте:
В форму ниже необходимо ввести данные. Попробуйте отправить без ввода, чтобы увидеть сообщение об ошибке HTML5.

Минимальные, максимальные и ступенчатые атрибуты
Атрибуты

Min и max в основном используются для числовых типов ввода, таких как число и диапазон .Мы кратко видели их при обсуждении типа ввода диапазона выше. Атрибуты min и max имеют ожидаемый от них эффект, ограничивая ввод минимальными и максимальными значениями. Если значение выходит за пределы указанного диапазона, браузер выдает сообщение об ошибке. Атрибут step ограничивает ввод только определенными значениями в диапазоне. Например, шаг 5 означает, что допустимо только каждое пятое значение в фактическом диапазоне.

Попробуйте:
Форма ниже принимает значения от 5 до 50 с шагом в пять — введите значение вне этих значений, чтобы увидеть ошибку проверки.

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

будет принимать только даты после 2013-10-01.

Регулярные выражения

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

  

Попробуйте:

Без проверки

Если вам вообще не нужна проверка формы на стороне клиента — скажем, вам нужна оптимизированная клавиатура для определенного типа ввода, но вам не нужна проверка, которая идет вместе с ней, то этого можно добиться с помощью novalidate . атрибут.Этот атрибут применяется к элементу формы , а не к отдельному полю ввода, поэтому при использовании этого атрибута проверка выполняется по принципу «все или ничего». Форма ниже не будет подтверждать ввод адреса электронной почты, но будет отображать оптимизированную для электронной почты виртуальную клавиатуру на поддерживаемых устройствах.

  

    

  

Пользовательские сообщения проверки

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

Удобно, что настраиваемые сообщения проверки возможны с помощью метода JavaScript HTML5 setCustomValidity .Выше мы видели пример, где требовалось поле электронной почты, а Chrome на Android отображал сообщение Пожалуйста, введите адрес электронной почты . Давайте посмотрим, как мы изменим это сообщение на Электронная почта, йоу! .

Сначала мы начнем с простой формы с полем электронной почты, как указано выше:

  

    Электронная почта:

    

  

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

Далее нам нужно найти интересующее нас поле ввода в DOM. В данном случае это элемент с id email. Мы можем получить ссылку на этот элемент с помощью

переменная электронная почта = document.getElementById(«электронная почта»);

.

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

  email.oninvalid = function(e) {

    e.target.setCustomValidity(«»);

    if (!e.target.validity.valid) {

      e.target.setCustomValidity(«Email, yo!»);

    }

  }

В функции-обработчике мы проверяем допустимость элемента с помощью

, а когда оно недопустимо, мы используем свойство

.

для применения нашего пользовательского сообщения.

Наконец, мы можем добавить немного щегольства, используя псевдокласс CSS :valid , чтобы применить визуальную подсказку к достоверности ввода по мере его ввода. Здесь мы устанавливаем зеленый фон для действительного ввода:

  :valid {

    background: #98FB98;

  }

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

Поддержка браузера проверки формы

Проверка формы HTML5 широко поддерживается как настольными, так и мобильными браузерами. Существует несколько исключений. До версии 10.1 Safari для настольных ПК предоставлял только частичную поддержку в том, что WebKit не поддерживал интерактивную проверку формы HTML , которая происходит при отправке формы. Это произойдет в версии 10.1, хотя для Safari Mobile пока нет ожидаемого времени прибытия.

Совместимость с браузером и резервные копии

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

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

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

Ссылки

Обновлено: 02.08.2017 Обновлено с учетом улучшенной поддержки Safari для проверки форм и улучшенной поддержки формата даты

Спасибо Paddy O’Reilly @paddy2k за помощь с некоторыми скриншотами

.

Добавить комментарий

Ваш адрес email не будет опубликован.