Что такое input в HTML5? Онлайн справочник на itProger
Справочники HTML5 inputHTML тег <input> позволяет создавать различные поля ввода или же выбора значения для html-форм. При использовании тега input без дополнительных атрибутов будет создано простейшее текстовое поле. Закрывающий тег не требуется.
При помощи атрибута type вы можете указать каким полем будет этот input, к примеру:
password— создание поля для ввода пароля;text— создания простейшего текстового поля;email— создания поля для ввода email;hidden— создания скрытого поля;checkbox— создания поля для проставления галочки;radio— создания поля с возможностью выбрать вариант;button— создание кнопки;submit— создание кнопки с перезагрузкой страницы;reset— создание кнопки для очистки формы;file— создание кнопки выбора файла с компьютера;color— создание поля для выбора цвета;time— создание поля для выбора даты;image— создание поля с изображением;
Это лишь часть тех возможных значений атрибута type, которые вы можете применить на своем сайте.
Атрибуты:
- type — задает значение (тип) поля;
- form — нужен для связки поля с формой по id;
- checked — устанавливает поставлена ли галочка или же выбрана radio кнопка по умолчанию;
- disabled — отключает поле для ввода или любой другой взаимосвязи с ним;
- placeholder — текст подсказки прямиком в поле;
- readonly — возможно указать что поле не будет возможным для редактирования пользователем;
- required — устанавливает обязательное ли это поле или нет;
- value — устанавливается значение поля.
Пример:
<h3>Форма с полями</h3> <form> <input type="text" name="name" placeholder="Ваше имя"><br> <label for="maleFemale">Выберите ваш пол</label><br> <input type="radio" name="maleFemale" value="male"> <label>Мужчина</label> <input type="radio" name="maleFemale" value="female"> <label>Женщина</label><br> <label>Ваш любимый цвет</label><br> <input type="color"><br> <input type="submit" value="Отправить"> <input type="reset" value="Очистить"> </form>
Результат:
Выберите ваш пол
Мужчина Женщина
Ваш любимый цвет
Мы используем файлы cookie, чтобы улучшить работу и повысить эффективность сайта.
Продолжая пользование данным сайтом, вы соглашаетесь с использованием файлов cookie.
Хорошо
Настройки
Новые возможности input в HTML5
Знакомый тег input в HTML5 приобрёл новые возможности. Теперь можно задавать такие значения, как number, date, time, color, range и др. Лучше один увидеть, чем долго рассказывать.
Information- Имя (text)
- Шкала (range)
- Числа (number)
- Дата (date)
- Время (time)
- Электронная почта (email)
- Веб-адрес (url)
- Цвет (color)
Исходник примера.
<form method="post" action="test.php">
<fieldset>
<legend>Information</legend>
<ol>
<li>
<label for="name">Имя (text)</label>
<input type="text" name="name" />
</li>
<li>
<label for="priority">Шкала (range)</label>
<input type="range" min="0" max="10" name="priority" value="0" />
</li>
<li>
<label for="number">Числа (number)</label>
<input type="number" name="number" min="0" max="12" />
</li>
<li>
<label for="date">Дата (date)</label>
<input type="date" name="date" value="2016-08-09" />
</li>
<li>
<label for="time">Время (time)</label>
<input type="time" name="time" />
</li>
<li>
<label for="email">Электронная почта (email)</label>
<input type="email" name="email" />
</li>
<li>
<label for="url">Веб-адрес (url)</label>
<input type="url" name="url" />
</li>
<li>
<label for="color">Цвет (color)</label>
<input type="color" name="color" />
</li>
<li>
<input type="submit" value="Send" />
</li>
</ol>
</fieldset>
</form>
number
В поле счетчика по умолчанию разрешен прямой ввод с клавиатуры.
Как и в случае с ползунками, для поля можно задать минимальное и максимальное значение. Однако эти значения не распространяются на значения, непосредственно введённые в поле, так что ввод придется ограничить при помощи сценариев или средствами проверки данных HTML5. Также обратите внимание на возможность управления приращением, которое определяется параметром step. По умолчанию приращение равно 1, но ему также можно присвоить любое числовое значение.
<input type="number" name="number" step="2" min="4" max="12" />
В этом примере мы ограничили ввод чисел от 4 до 12, а числа увеличиваются на две единицы. Напоминаю, только при работе с стрелками в элементе управления.
Также стоит отметить, что поле ввода числа, как и некоторые другие поля, которые будут рассмотрены дальше, по-особому ведёт себя в мобильных браузерах: например, при фокусе на такое поле появляется клавиатура, позволяющая вводить соответствующие символы.
range
Тип range имеет те же атрибуты.
При нажатии кнопки Send в адресной строке вы сможете увидеть выбранное значение под именем priority.
search
Это поле почти не отличается от обычного текстового поля. В некоторых браузерах внутри него появляется крестик для сброса введённого значения.
<input type="search">
datetime-local/datetime
Кроме отдельных элементов date и time есть ещё совмещённый элемент datetime-local без учета временной зоны и datetime c учетом временной зоны.
month/week
Также есть элемент month для выбора месяца и week для выбора недели.
Поля email приносят особенно заметную пользу на мобильных устройствах, на которых раскладка виртуальной клавиатуры изменяется для удобства ввода адресов электронной почты. Обратите внимание на присутствие символа @ в клавиатурах iPhone и Android.
url
url особенно удобен, если ваши посетители просматривают сайт с устройств iPhone или Android — устройство отображает совершенно иную раскладку клавиатуры с кнопками для ускоренного ввода веб-адресов (по аналогии с клавиатурой, отображаемой при вводе URL-адреса в адресной строке мобильного браузера).
datalist
Выбор готовых слов можно организовать при помощи datalist, в который заносятся нужные слова, а затем пользователь может либо набирать слово в текстовом поле или выбрать через выпадающий список.
Связывание текстового поля и списка осуществляется при помощи атрибута list у тега input — его значение должно совпадать со значением атрибута id у списка.
<form> <input type="text" name="search" placeholder="Поиск" list="search"><br><br> <datalist> <option value="Васька" /> <option value="Мурзик" /> <option value="Рыжик" /> <option value="Барсик" /> </datalist> </form>
Если тег input имеет специфический тип, например email или другие, то в списке отображаются только корректные для данного типа значения.
fieldset/legend
Когда формы становятся очень большими, возникает потребность зрительно отделить одни поля от других. Для группировки полей используется тег fieldset.
По умолчанию браузеры отображают результат в виде рамки вокруг этой группы полей, но при помощи CSS можно изменить его внешний вид.
Также для каждой группы можно добавить её заголовок. Для этого внутрь тега fieldset надо поместить тег legend:
Заголовок группыРеклама
Что делают `id` и `name` для входного тега? — HTML FAQ
tag1724286361 1
Какой смысл добавлять и name=»», если это не имеет отношения к самой функции? Например, в разделе «Как вы хотите приготовить котлету?» ввод следующий:
Однако, уберите эти 2, и вы все равно получите ту же самую функциональность в меню. Ввод может выглядеть так:
Таким образом, имя и идентификатор в этом сценарии просто для данных, которые мы извлекаем.
?
МТФ 2
Идентификатор может быть ловушкой для некоторого правила селектора CSS, он может быть ловушкой для узла элемента JS для захвата событий или может быть связан с меткой. Если ни один из них не подходит, то он не нужен. Что касается имя , которое используется для идентификации пользовательского ввода в POSTDATA при отправке.
21 лайк
3
По какой-то причине элемент формы не был запрограммирован на использование значений id для идентификации пользовательского ввода в POSTDATA?
МТФ 4
Обратная совместимость. Атрибут name был здесь задолго до появления CSS. Идея итерации версий редко заключается в том, чтобы избавиться от того, что работает, а скорее в том, чтобы улучшить рабочий процесс. id — это глобальный атрибут, который позволяет нам перехватывать фрагменты страниц. Он был представлен в CSS 1.
1 Нравится
гига4696568018 5
В предыдущем типе ввода в учебнике указано, что метка и ввод связаны, и, например, если вы нажмете на часть метки, вы увидите, как курсор появится в поле ввода (или даже просто наведите указатель мыши на поле ввода). метка заметно активирует поле ввода.) «Сколько пирожков вы хотите?» лейбл незадолго до этого был хорошим примером этого.
В примере, о котором вы спрашивали, id=»готовность» также используется меткой. Вы упомянули раздел «Как вы хотите, чтобы ваш пирожок был приготовлен», но этот текст на самом деле не является разделом, это метка для ввода, а открывающий тег метки имеет атрибут for = «готовность», который зависит от идентификатора входного тега .
Этот ввод, однако, является не полем ввода, а скорее ползунком, чем-то, что пользователь выбирает из набора возможных вариантов (например, флажки и переключатели), и я полагаю, что это не лучший способ показать эту связь. на тех. (Например, курсора нет.) Но вы все равно хотели бы, чтобы метка была связана с вводом для согласованности с другими типами ввода при применении таблицы стилей CSS или, как упоминалось в mtf, некоторой обработки javascript позже в разработке.
1 Нравится
6
Атрибут ID помогает определить метку для этого входа. Таким образом, программное обеспечение для рендеринга кода будет понимать, какая метка для какого ввода или наоборот.
Атрибут Имя является идентификатором текстового атрибута. Когда форма отправляется, значение идентификатора, т. е. атрибута имени, объединяется с тем, что пользователь вводит и отправляет.
данные4397115474 7
у пользователя есть его имя, электронная почта, номер телефона и многое другое, так что все идет в этом атрибуте «имя»?
МТФ 8
имя — это один атрибут, который может иметь все элементы формы, им просто присваиваются соответствующие значения, скажем, «имя пользователя», «электронная почта», «телефон» и т.
д. Мы даже можем использовать, name="name" , но это может запутать читателя. Это не будет путать браузер.
1 Нравится
Мутации и типы ввода | GraphQL
Если у вас есть конечная точка API, которая изменяет данные, например вставляет данные в базу данных или изменяет данные, уже находящиеся в базе данных, вы должны сделать эту конечную точку Mutation , а не Query . Это так же просто, как сделать конечную точку API частью типа Mutation верхнего уровня вместо верхнего уровня 9.0007 Тип запроса .
Допустим, у нас есть сервер «сообщения дня», где каждый может обновить сообщение дня, и любой может прочитать текущее. The GraphQL schema for this is simply:
type Mutation { setMessage(message: String): String } type Query { getMessage: String }
It’s often convenient иметь мутацию, которая сопоставляется с операцией создания или обновления базы данных, например setMessage , вернуть то же самое, что сохранил сервер.
Таким образом, если вы измените данные на сервере, клиент сможет узнать об этих изменениях.
И мутации, и запросы могут обрабатываться корневыми преобразователями, поэтому корнем, реализующим эту схему, может быть просто:
var fakeDatabase = {} var root = { setMessage: ({ message }) = > { fakeDatabase.message = сообщение ответное сообщение }, getMessage: () => { return fakeDatabase.message }, }
Для реализации мутаций больше ничего не нужно. Но во многих случаях вы обнаружите ряд различных мутаций, которые принимают одни и те же входные параметры. Типичным примером является то, что создание объекта в базе данных и обновление объекта в базе данных часто используют одни и те же параметры. Чтобы упростить вашу схему, вы можете использовать для этого «типы ввода», используя введите ключевое слово вместо ключевого слова введите ключевое слово .
Например, вместо одного сообщения дня, предположим, что у нас есть много сообщений, проиндексированных в базе данных по полю id , и каждое сообщение имеет строку содержания и строку автора . Нам нужен API мутации как для создания нового сообщения, так и для обновления старого сообщения. Мы могли бы использовать схему:
input MessageInput { content: String автор: String } type Message { id: ID! Контент: строка Автор: String } Тип запроса { GetMessage (ID: ID!): Сообщение } Тип мутации { CreateMessage (вход: MessageInput): сообщение (id: ID!, input: MessageInput): Message }
Здесь мутации возвращают тип Message , чтобы клиент мог получить больше информации о недавно измененном Сообщение в том же запросе, что и запрос, который его изменяет.
Типы ввода не могут иметь поля, являющиеся другими объектами, только базовые скалярные типы, типы списков и другие типы ввода.
Именование входных типов с Input в конце является полезным соглашением, потому что вам часто потребуется, чтобы и тип ввода, и тип вывода немного различались для одного концептуального объекта.
Вот исполняемый код, который реализует эту схему, сохраняя данные в памяти:
var express = require("express") var { graphqlHTTP } = require("express-graphql") var { buildSchema } = require("graphql") // Создание схемы, Использование языка схемы GraphQL var schema = buildschema (` Input MessageInput { Содержание: Строка Автор: строка } Тип Сообщение { ID: ID! : Строка Автор: Автор: Автор: Автор: Автор: Автор: Автор: Автор: Автор: Автор: Автор: Автор: Автор: Автор: Автор: Автор: Автор: ID! Строка } type Query { getMessage(id: ID!): Message } type Mutation { createMessage(input: MessageInput): Message updateMessage(id: ID!, input) : Message } `) // Если бы в Message были сложные поля, мы бы поместили их в этот объект. класс Сообщение { конструктор (id, { контент, автор }) { this.id = id this.content = контент this.author = author } } // Сопоставляет имя пользователя с содержимым var fakeDatabase = {} var root = { getMessage: ({ id 0002) 0 => 9 !fakeDatabase[id]) { throw new Error("сообщение с id не существует" + id) } return new Message(id, fakeDatabase[id]) }, createMessage: ({ input }) => { // Создаем случайный идентификатор для нашей "базы данных". var id = require («crypto»). id, input }) => { if (!fakeDatabase[id]) { throw new Error("сообщение с id не существует" + id) } // Это заменяет все старые данные, но некоторые приложениям может потребоваться частичное обновление. fakeDatabase[id] = ввод возврат нового сообщения (id, ввод) }, } var app = express () app. "/graphql", Graphqlhttp ({ Schema: Schema, rootvalue: root, Grape }) ) app.listen(4000, () => { console.log("Запуск сервера GraphQL API на локальном хосте: 4000/graphql") })
use (9
мутация перед запросом GraphQL. Чтобы передать тип ввода, предоставьте данные, записанные так, как если бы это был объект JSON. Например, с сервером, определенным выше, вы можете создать новое сообщение и вернуть id нового сообщения с этой операцией: мутация { createMessage(input: { автор: "andy", content: "надежда - это хорошо", }) { id } }
Вы можете использовать переменные для упрощения логики клиента мутации точно так же, как и с запросами. Например, некоторый код JavaScript, который вызывает сервер для выполнения этой мутации:
var author = "andy" var content = "надежда - это хорошо" var query = `mutation CreateMessage($input: MessageInput) { createMessage(input: $input) { id } }` fetch("/graphql", { метод: "POST", заголовки: { "Content-Type": "application/json", Accept: "application/json ", }, тело: JSON. 