<input>
<input>
является одним из разносторонних элементов формы и позволяет создавать разные части интерфейса и обеспечивать взаимодействие с пользователем. Главным образом <input>
предназначен для создания текстовых полей, различных кнопок, переключателей и флажков. Хотя элемент <input>
не требуется помещать внутрь контейнера <form>
, определяющего форму, но если введенные пользователем данные должны быть отправлены на сервер, где их обрабатывает серверная программа, то указывать <form>
обязательно. То же самое обстоит и в случае обработки данных с помощью клиентских приложений, например, скриптов на языке JavaScript.
Основной атрибут <input>
, определяющий вид элемента — type. Он позволяет задавать следующие элементы формы: текстовое поле (text), поле с паролем (password), переключатель (radio), флажок (checkbox), скрытое поле (hidden), кнопка (button), кнопка для отправки формы (submit), кнопка для очистки формы (reset), поле для отправки файла (file), кнопка с изображением (image) и др. Для каждого элемента существует свой список атрибутов, которые определяют его вид и характеристики. Кроме того, в HTML5 добавлено еще более десятка новых элементов.
accept - Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов.
<input type="file" accept="image/jpeg,image/png,image/gif">
align - Определяет выравнивание изображения.
alt - Альтернативный текст для кнопки с изображением.
<input src="home/web.gif" type="image" alt="Отправить форму на сервер">
autocomplete - Включает или отключает автозаполнение.
<input type="password" autocomplete="on">
autofocus - Устанавливает фокус в поле формы.
<input type="text" size="40" autofocus>
border - Толщина рамки вокруг изображения.
checked - Предварительно активированный переключатель или флажок.
disabled - Блокирует доступ и изменение элемента.
<input type="submit" value="Отправить" disabled>
form - Связывает поле с формой по её идентификатору.
<input type="submit" value="Отправить" form="data">
formaction - Определяет адрес обработчика формы.
<input type="submit" value="Отправить" formaction="web.php">
formenctype - Устанавливает способ кодирования данных формы при их отправке на сервер.
<input type="submit" value="Отправить" formenctype="multipart/form-data">
formmethod - Сообщает браузеру каким методом следует передавать данные формы на сервер.
<input type="submit" value="Отправить" formmethod="post">
formnovalidate - Отменяет встроенную проверку данных на корректность.
<input type="submit" formnovalidate value="Отправить">
formtarget - Определяет окно или фрейм в которое будет загружаться результат, возвращаемый обработчиком формы.
<input type="submit" value="Отправить" fortarget="_self">
list - Указывает на список вариантов, которые можно выбирать при вводе текста.
<input list="names"> <datalist id="names"> <option value="Екатерина"> <option value="Дмитрий"> </datalist>
max - Верхнее значение для ввода числа или даты.
<input type="number" min="10" max="50">
maxlength - Максимальное количество символов разрешённых в тексте.
<input type="text" size="40" maxlenght="20">
min - Нижнее значение для ввода числа или даты.
<input type="number" min="10" max="50">
multiple - Позволяет загрузить несколько файлов одновременно.
<input type="email" name="email" required multiple>
name - Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
<input type="text" name="comment">
pattern - Устанавливает шаблон ввода.
<input type="age" pattern="[0-9]{1-2}">
placeholder - Выводит подсказывающий текст.
<input type="text" size="40" placeholder="Введите ваше имя">
readonly - Устанавливает, что поле не может изменяться пользователем.
<input type="text" name="comment" size="40" value="Информация о себе" readonly>
required - Обязательное для заполнения поле.
<input type="text" size="40" required>
size - Ширина текстового поля.
<input type="text" size="40">
src - Адрес графического файла для поля с изображением.
<input type="image" src="/home/web.jpg">
step - Шаг приращения для числовых полей.
<input type="age" pattern="[0-9]{1-2}" step="1">
type - Сообщает браузеру, к какому типу относится элемент формы.
<input type="radio" name="age" value="20">
value - Значение элемента.
<input type="submit" value="Отправить">
Также для этого элемента доступны универсальные атрибуты и события.
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> тег <input> </title> </head> <body> <center><h3>Регистрация на сайте http://weblecture.ru</h3></center><br> <form name="test" method="post" action="input1.php"> <p><b>Ваше имя:</b><br> <input type="text" size="40"> </p> <p><b>Ваш пол:</b><Br> <input type="radio" name="sex" value="m"> Мужской<Br> <input type="radio" name="sex" value="fm"> Женский<Br> </p> <p><b>Ваш возраст:</b><Br> <input type="radio" name="age" value="20"> 10-20<Br> <input type="radio" name="age" value="30"> 20-30<Br> <input type="radio" name="age" value="40"> 30-40<Br> <input type="radio" name="age" value="50"> 40-50<Br> </p> <p>Коротко о себе:<Br> <textarea name="comment" cols="40" rows="3"></textarea></p> <p><input type="submit" value="Отправить"></p> </form> </body> </html>