HTML
Элементы управления вводом

Вступление

Синтаксис

• <input type="" name="" value="">

параметры

замечания

Флажок и кнопки радио

обзор

Флажки и переключатели написаны с тегом HTML <input> , и их поведение определено в спецификации HTML .

Простейшие кнопки флажка или радио является <input> элемента с type атрибутом checkbox или radio , соответственно:

<input type="checkbox">
<input type="radio">

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

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

Пример:

<input type="radio" name="color" id="red" value="#F00">
<input type="radio" name="color" id="green" value="#0F0">
<input type="radio" name="color" id="blue" value="#00F">

При просмотре радиокнопки отображаются в виде круга (непроверенный) или заполненного круга (отмечен). Флажки отображаются как квадратные (непроверенные) или заполненные квадраты (отмеченные). В зависимости от браузера и операционной системы квадрат иногда имеет закругленные углы.

Атрибуты

флажки и переключатели имеют ряд атрибутов для управления их поведением:

value

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

checked

Атрибут checked указывает начальное состояние флажка или переключателя. Это логический атрибут и может быть опущен.

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

<input checked>
<input checked="">
<input checked="checked">
<input checked="ChEcKeD">

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

<input type="radio">
<input type="checkbox">

При сбросе <form> , флажки и переключатели возвращаются к состоянию их checked атрибута.

доступность

Этикетки

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

Пример:

<label>
  <input type="radio" name="color" value="#F00">
  Red
</label>

или с элементом <label> с атрибутом for заданным для атрибута id кнопки:

<input type="checkbox" name="color" value="#F00" id="red">
<label for="red">Red</label>

Группы кнопок

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

Чтобы предоставить ярлык для всей группы, радиокнопки должны быть включены в элемент <fieldset> элементом <legend> внутри него.

Пример:

<fieldset>
  <legend>Theme color:</legend>
  <p>
    <input type="radio" name="color" id="red" value="#F00">
    <label for="red">Red</label>
  </p>
  <p>
    <input type="radio" name="color" id="green" value="#0F0">
    <label for="green">Green</label>
  </p>
  <p>
    <input type="radio" name="color" id="blue" value="#00F">
    <label for="blue">Blue</label>
  </p>
</fieldset>

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

скрытый

<input type="hidden" name="inputName" value="inputValue">  

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

пароль

<input type="password" name="password">

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

<input type="password" name="password" placeholder="Password">

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

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

Отправить

<input type="submit" value="Submit">

Ввод ввода создает кнопку, которая отправляет форму, находящуюся внутри, при нажатии.

Вы также можете использовать элемент <button> если вам нужна кнопка отправки, которую можно более легко стилизовать или содержать другие элементы:

<button type="submit">
  <img src="submit-icon.jpg" /> Submit
</button>

файл

<input type="file" name="fileSubmission">

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

В следующем примере пользователи могут использовать входной file для выбора файла из своей файловой системы и загрузить этот файл в сценарий на сервере с именем upload_file.php .

<form action="upload_file.php" method="post" enctype="multipart/form-data">
    Select file to upload:
    <input type="file" name="fileSubmission" id="fileSubmission">
    <input type="submit" value="Upload your file" name="submit">
</form>

Несколько файлов

Добавив multiple атрибутов, пользователь сможет выбрать несколько файлов:

<input type="file" name="fileSubmission" id="fileSubmission" multiple>

Принять файлы

Атрибут Accept определяет типы файлов, которые пользователь может выбрать. Например .png , .gif , .jpeg .

<input type="file" name="fileSubmission" accept="image/x-png,image/gif,image/jpeg" />

Проверка ввода

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

Некоторые новые типы ввода (например, email , url , tel , date и многие другие) автоматически проверяются и не требуют собственных ограничений проверки.

<input required>

Минимальная / максимальная длина

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

<input minlength="3">
<input maxlength="15">
<input minlength="3" maxlength="15">

Указание диапазона

Используйте атрибуты min и max чтобы ограничить диапазон чисел, которые пользователь может ввести во вход типа number или range

Marks: <input type="number" size="6" name="marks" min="0" max="100" />
Subject Feedback: <input type="range" size="2" name="feedback" min="1" max="5" />

<input pattern="\d*" title="Numbers only, please.">

<input type="file" accept="image/*" title="Only images are allowed">

<input type="file" accept="image/*,.rar,application/zip">

Примечание: добавление атрибута novalidate к элементу form или formnovalidate к кнопке отправки, предотвращает проверку элементов формы. Например:

<form>
    <input type="text" name="name" required>
    <input type="email" name="email" required>
    <input pattern="\d*" name="number" required>

    <input type="submit" value="Publish"> <!-- form will be validated -->
    <input type="submit" value="Save" formnovalidate> <!-- form will NOT be validated -->
</form>

Форма имеет поля, которые необходимы для «публикации» проекта, но не требуются для «сохранения» проекта.

Сброс

<input type="reset" value="Reset">

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

• Текст в поле ввода будет сброшен до пустого или его значения по умолчанию (указанного с использованием атрибута value ).
• Любая опция (ы) в меню выбора будет отменена, если у них нет selected атрибута.
• Все флажки и радиокнопки будут отменены, если у них нет атрибута checked .

Примечание. Кнопка сброса должна быть внутри или прикреплена (через атрибут form ) к элементу <form> , чтобы иметь какой-либо эффект. Кнопка только сбросит элементы в этой форме.

Число

<input type="number" value="0" name="quantity">

телефон

<input type="tel" value="+8400000000">

Элемент ввода с атрибутом type, значение которого является tel представляет собой однострочный текстовый редактор для ввода номера телефона.

Эл. адрес

<form>
  <label>E-mail: <label>
  <input type="email" name="email">
</form>

кнопка

<input type="button" value="Button Text">

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

<button type="button">Button Text</button>

Кнопки обычно используются с событием «onclick»:

<input type="button" onclick="alert('hello world!')" value="Click Me">

или же

<button type="button" onclick="alert('hello world!')">Click Me</button>

Атрибуты

[name]

name кнопки, которая отправляется с данными формы.

[type]

type кнопки.

Возможные значения:

submit : кнопка передает данные формы на сервер. Это значение по умолчанию, если атрибут не указан, или если атрибут динамически изменен на пустое или недопустимое значение.

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

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

menu : кнопка открывает всплывающее меню, определенное через назначенный элемент.

[value]

Начальное значение кнопки.

цвет

<input type="color" name="favcolor" value="#ff0000">

Веб-сайт

<input type="url" name="Homepage">

Дата

<input type="date" />

DateTime-Local

<input type="datetime-local" />

Образ

<input type="image" src="img.png" alt="image_name" height="50px" width="50px"/>

Картинка. Вы должны использовать атрибут src для определения источника изображения и атрибута alt для определения альтернативного текста. Вы можете использовать атрибуты height и width для определения размера изображения в пикселях.

Спектр

<input type="range" min="" max="" step="" />

Месяц

<input type="month" />

Время

<input type="time" />

19:04:39
08:20:39.04

Неделю

<input type="week" />

Текст

Самый основной тип ввода и ввод по умолчанию, если не указан type . Этот тип ввода определяет однострочное текстовое поле с автоматическим удалением строк из входного значения. Все остальные символы могут быть введены в это. Элементы <input> используются в элементе <form> для объявления элементов управления вводами, которые позволяют пользователям вводить данные.

Синтаксис

<input type="text">

или (без указания type , используя атрибут по умолчанию):

<input>

По умолчанию ширина ввода текстового поля составляет 20 символов. Это можно изменить, указав значение атрибута size следующим образом:

<input type="text" size="50">

Атрибут size явно отличается от установки ширины с помощью CSS. Использование ширины определяет конкретное значение (в количестве пикселей, процентах от родительского элемента и т. Д.), Что вход всегда должен быть широким. Использование size вычисляет величину ширины для распределения на основе используемого шрифта и как широки символы обычно.

Примечание. Использование атрибута size не ограничивает количество символов, которые могут быть введены в поле, а только то, насколько широко отображается окно. Для ограничения длины см. « Проверка ввода» .

Поле ввода допускает только одну строку текста. Если вам нужен многострочный текстовый ввод для значительного объема текста, используйте вместо него элемент <textarea> .

Поиск

<input type="search" name="googlesearch">

DateTime (Глобальный)

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

<fieldset>
   <p><label>Meeting time: <input type=datetime name="meeting.start"></label>
</fieldset>

Разрешенные атрибуты:

• глобальные атрибуты
• название
• отключен
• форма
• тип
• автозаполнения
• автофокусировка
• список
• мин Макс
• step (float)
• только для чтения
• требуемое значение