Создание формы

Курс: Web программирование

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

Курс: Web программирование 2

 Тег <form>
устанавливает форму на веб-странице. Форма предназначена
для обмена данными между пользователем и сервером.
<form action="URL"> ... </form>
Атрибуты
accept-charset устанавливает кодировку, в которой сервер
может принимать и обрабатывать данные.
action адрес программы или документа, который обрабатывает
данные формы.
autocomplete включает автозаполнение полей формы.
enctype способ кодирования данных формы.
method метод протокола HTTP.
name имя формы.
novalidate отменяет встроенную проверку данных формы на
корректность ввода.
target имя окна или фрейма, куда обработчик будет загружать
возвращаемый результат.
Курс: Web программирование 3
 Атрибут accept-charset
<form action="index.php" accept-charset="windows-1251">
Атрибут action
<form action="index.php">
<form action="mailto:local@i.ua" enctype="text/plain">
Атрибут autocomplete
<form autocomplete="on | off"> значение по умолчанию: on
Атрибут enctype
<form enctype="значение">...</form>
application/x-www-form-urlencoded вместо пробелов ставится +,
символы вроде русских букв кодируются их шестнадцатерич-
ными значениями
multipart/form-data данные не кодируются. Это значение
применяется при отправке файлов.
text/plain пробелы заменяются знаком +, буквы и другие
символы не кодируются.
Курс: Web программирование 4
 Атрибут name
<form name="имя">...</form>
Атрибут method
<form method="get | post">...</form>
get – метод предназначен для получения требуемой
информации и передачи данных в адресной строке. Пары
«имя=значение» присоединяются в этом случае к адресу после
“?” и разделяются между собой символ “&”. Удобство
использования метода get – в том, что адрес со всеми
параметрами можно использовать неоднократно, а также менять
значения параметров прямо в адресной строке.
post – посылает на сервер данные в запросе браузера. Это
позволяет отправлять большее количество данных, чем
доступно методу get, поскольку у него установлено ограничение
в 4 Кб. Большие объемы данных используются в почтовых
службах, заполнении базы данных, при пересылке файлов и др.

Курс: Web программирование 5

 Атрибут novalidate
<form novalidate>...</form>
Отменяет встроенную проверку данных введенных
пользователем в форме на корректность. Такая проверка
осуществляется браузером автоматически при отправке формы
на сервер и происходит для полей <input type="email">,
<input type="url">, а также при наличии атрибута pattern или
required.
<form action="index.php" novalidate>
<p><input required
placeholder="Имя"></p>
<p><input type="email" required
placeholder="Ваш email"></p>
<p><input type="url" required
placeholder="Сайт"></p>
<p><input type="submit"></p>
</form>

Курс: Web программирование 6

 Однострочное текстовое поле
Однострочное текстовое поле предназначено для ввода строки
символов с помощью клавиатуры
<input type="text" name="anketa" maxlength="25" size="40"
value="Вася">
Поле для пароля
<input type="password" атрибуты>
Многострочный текст
<textarea атрибуты> Текст </textarea>
Атрибут Описание
cols Ширина поля в символах
disabled Блокирует доступ и изменение элемента
maxlength Максимальное число символов текста, которое можно ввести
name Имя поля
readonly Устанавливает, что поле не может изменяться пользователем
rows Высота поля в строках текста
wrap Параметры переноса строк
Курс: Web программирование 7
 Кнопки
Кнопку на веб-странице можно создать двумя способами – с
помощью тега <input> и тега <button>
<input type="button" name="name_button" value="text button">
<button атрибуты>Надпись на кнопке</button>
Кнопка Submit
<input type="submit" атрибуты>
<button type="submit">Надпись на кнопке</button>
Кнопка Reset
<input type="reset" атрибуты>
<button type="reset">Надпись на кнопке</button>

Переключатели
<input name="radio_name" type="radio"
value="first" checked> 1 пункт
<input name="radio_name" type="radio"
value="second"> 2 пункт

Курс: Web программирование 8

 Флажки
<form action="index.php"> <p>В каких годах произошли самые
известные извержения вулкана Кракатау?</p>
<input type="checkbox" name="a[]"
value="1417">1417<br>
<input type="checkbox" name="a[]"
value="1680" checked>1680<br>
<input type="checkbox" name="a[]"
value="1883" checked>1883<br>
<input type="checkbox" name="a[]"
value="1934">1934<br>
<input type="checkbox" name="a[]"
value="2010">2010<br>
<input type="submit"
value="Отправить">
</form>

Курс: Web программирование 9

 <select name="select" size="1"> Поле со списком
<option selected value="s1">Чебурашка</option>
<option value="s2">Крокодил Гена</option>
<option value="s3">Шапокляк</option>
<option value="s4">Крыса Лариса</option>
</select> <select name="select" size="3">
<option selected value="s1">Чебурашка</option>
<option value="s2">Крокодил Гена</option>
<option value="s3">Шапокляк</option>
<option value="s4">Крыса Лариса</option>
</select> <select name="select[]" multiple>
<option selected value="s1">Чебурашка</option>
<option value="s2">Крокодил Гена</option>
<option value="s3">Шапокляк</option>
<option value="s4">Крыса Лариса</option>
</select> <select name="select[]" size="2" multiple>
<option selected value="s1">Чебурашка</option>
<option value="s2">Крокодил Гена</option>
<option value="s3">Шапокляк</option>
<option value="s4">Крыса Лариса</option>
</select>
Курс: Web программирование 10
 Группирование элементов списка
<select name="food">
<optgroup label="Русская кухня">
<option value="r1">Закуска Барская</option>
<option value="r2">Раки, фаршированные по-царски</option>
<option value="r3">Биточки в горшочке</option>
</optgroup>
<optgroup label="Украинская кухня">
<option value="u1">Галушки славянские</option>
<option value="u2">Пампушки украинские</option>
<option value="u3">Жаркое по-харьковски</option>
</optgroup>
</select>

Курс: Web программирование 11

Курс: Web программирование 12
 Скрытое поле
<input type="hidden" name="name" value="Vasya">
Поле с изображением
<input type="image" src="URL" alt="альтернативный текст">
Загрузка файлов
<form enctype="multipart/form-data" method="post">
<p>Загрузите ваши фотографии на сервер</p>
<p><input type="file" name="photo" multiple
accept="image/*,image/jpeg">
<input type="submit" value="Отправить"> </p> </form>

Курс: Web программирование 13

 Адрес электронной почты
<input type="email" атрибуты>
Веб-адрес
<input type="url" атрибуты>
Выбор цвета
<input type="color" value="цвет" name="имя">

IE 11

Chrome
Курс: Web программирование 14
 Ввод чисел
<input type="number" size="3" name="num" min="1"
max="10" value="1" step="0.1">

Ползунок
<input type="range" min="0" max="100" step="1"
value="50">

Курс: Web программирование 15

 Календарь

<input type="date" name="calendar">

Курс: Web программирование 16

<input type="month">

Курс: Web программирование 17

<input type="week">

Курс: Web программирование 18

 Поле для поиска
<input type="search" name="q" placeholder="Поиск по
сайту">

Поле для телефона

<p>Телефон в формате 2xxx-xxx:
<input type="tel" name="tel" pattern="2[0-9]{3}-[0-9]
{3}"></p>

Курс: Web программирование 19

 Шаблон ввода данных
Выражение Описание
\d [0-9] Одна цифра от 0 до 9.
\D [^0-9] Любой символ кроме цифры.
\s Пробел.
[A-Z] Только заглавная латинская буква.
[A-Za-z] Только латинская буква в любом регистре.
[А-Яа-яЁё] Только русская буква в любом регистре.
[A-Za-zА-Яа-яЁё] Любая буква русского и латинского алфавита.
[0-9]{3} Три цифры.
[A-Za-z]{6,} Не менее шести латинских букв.
[0-9]{,3} Не более трёх цифр.
[0-9]{5,10} От пяти до десяти цифр.
^[a-zA-Z]+$ Любое слово на латинице.
^[А-Яа-яЁё\s]+$ Любое слово на русском включая пробелы.
^[ 0-9]+$ Любое число.

Курс: Web программирование 20