Input type: : The Input (Form Input) element — HTML: HyperText Markup Language

Leave a Comment / Разное / By /

Теги для создания форм. Часть №2. input.

<input> — тег который мы вкладываем внутрь тега <form>, с помощью него мы будем создавать интерактивные поля для ввода информации пользователем.

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

<input type="text">                             
<input type="number">                           
<input type="email">                            
<input type="tel">                              
<input type="checkbox">                         
<input type="radio">                            
<input type="button" value="Submit">            
<input type="submit" value="Submit">            
<input type="color">                            
<input type="date">                             
<input type="time">                             
<input type="file">                             
<input type="hidden">                           
<input type="password">                         
<input type="range">                            
<input type="url">

Это основные типы тега <input>, в зависимости от типа тега он может принимать какие-то атрибуты или не принимать их, об этом лучше читать в документации.

* * *

Рассмотрим несколько атрибутов на примере стандартного input для ввода текста.

<input type="text" value="Some text here">

value — позволяет нам определить или предопределить значение тега input

* * *

<input type="text" placeholder="First name">

placeholder — определяет текст, который будет показа пользователь внутри input до того момента пока пользователь не начнет вводить свое значение. Доступен не всем типам input.

* * *

<input type="text" required>

required — определяет, будет ли обязательным этот input в рамках текущего тега 

<form>.

* * *

<input type="text" disabled>

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

* * *

<input type="text" pattern="">

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

* * *

<input type="text" name="first_name">

name — задает имя для нашего input

* * *

<form></form>
<input type="text" form="form_id">

Атрибут form — позволяет связать input с тегом <form>, input лежит вне тега <form>

* * *

Атрибутов <input> существует огромное количество, мы рассмотрели только самые распространенные.

Label

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

input. input и label можно связать с помощью id для input и for для label.

<form action="">
  <h3>Contact form #1</h3>
  <div>
    <label for="first_name">First name:</label>
    <input type="text" placeholder="First name">
  </div>
</form>

Также мы можем положить внутрь <label> тег <input> в таком случае они свяжутся автоматически и нам не нужно указывать атрибуты for и id.

<form action="">
  <h3>Contact form #2</h3>
  <div>
    <label>
      <span>First name</span>
      <input type="text" placeholder="First name">
    </label>
  </div>
</form>

Пример

 <form action="">
  <h3>Contact form #3</h3>
  <div>
    <label for="user_name">First name:</label>
    <input type="text" placeholder="User name">
  </div>
  <div>
    <label>
      <span>User surname:</span>
      <input type="text" placeholder="User surname">
    </label>
  </div>
  <div>
    <input type="submit" value="Submit">
    <input type="reset" value="Reset from">
  </div>
</form>

P.S. Больше уроков у меня на канале.

type атрибут HTML теґа input

  • Головна
  • html
  • теґи
  • <input>
  • type

Атрибут type повідомляє браузеру, до якого типу належить елемент форми.

Без задання використовується тип: text.

Нотатка:

Атрибут type

працює у всіх основних браузерах. Проте, не всі input типи працють у цих браузерах.

Порада:

Це не обов’язковий атрибут, але краще його вказати.

Порада:

Android для типу number не підтримує атрибути step , min і max .

Запропонувати свою пораду чи нотатку

ПорадаНотатка

Синтакс

<input type="button|checkbox|file|hidden|image|password|radio|reset|submit|text">

Атрибут type може отримувати 23 значення :

button

Кнопка.

checkbox

Прапорці. Дозволяють вибрати більше одного варіанту із запропонованих.

color

Віджет для вибору кольору.

date

Поле для вибору календарної дати.

datetime-local

Елемент управління для введення дати і часу без часового поясу.

email

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

file

Поле для введення імені файлу, який пересилається на сервер. Використовуйте атрибут accept, щоб визначити типи файлів, які елемент керування може вибрати.

hidden

Приховане поле. Воно не відображається на веб-сторінці.

image

Поле із зображенням. При натисканні на малюнок дані форми відправляються на сервер.

month

Вибір місяця.

number

Введення чисел.

password

Звичайне текстове поле, але відрізняється від нього тим, що всі символи показуються зірочками. Призначено для того, щоб ніхто не підгледів який ви вводите пароль.

radio

Перемикачі. Використовуються, коли слід вибрати один варіант з кількох запропонованих.

range

Повзунок для вибору чисел в зазначеному діапазоні. Елемент управління для введення числа, точне значення якого не має значення. Цей тип управління використовує такі значення за замовчуванням, якщо відповідні атрибути не вказані:

  • min: 0
  • max: 100
  • value: min+ ( max- min) / 2
  • step: 1
reset

Кнопка для повернення даних форми в початкове значення.

search

Поле для пошуку.

submit

Кнопка для відправки даних форми на сервер.

tel

Для телефонних номерів.

text

Текстове поле. Призначене для введення данних за допомогою клавіатури.

time

Для часу.

url

Поле для редагування URL-адреси. Вхідне значення перевіряється на наявність URL-адресу перед поданням на сервер.

week

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

datetime

Визначає дату і час.

Переглядачі

  • Стаціонарні переглядачі
  • Мобільні переглядачі
Переглядач
color

20+

29+

11+

11. 5+

—

14+

datetime

20+

—

—

10.1+

11+

—

type

1+

+

—

10.1+

12+

3+

datetime-local

20+

—

—

10.

1+

11+

—

email

5+

4+

5+

10.1+

10+

11+

month

20+

—

—

10.1+

13

—

range

4+

23+

3.1+

10. 1+

11+

10+

number

6+

29+

5+

10.1+

11+

10+

search

5+

4+

5+

10.1+

11+

10+

tel

5+

4+

5+

10. 1+

11+

10+

time

20+

57+

—

—

13+

—

url

8+

4+

6+

15+

11+

10+

radio

1+

1+

1+

1+

10+

2+

week

20+

—

—

10. 1+

13+

—

date

20+

57+

—

10.1+

13+

—

password

1+

1+

1+

1+

2+

1++

Переглядач
type

1+

1+

1+

1+

Приклади

  • Приклад 1
  • Приклад 2

Найпростіший приклад використання HTML атрибута type теґа <input>

 type_css_in_ua">


  See the Pen 


  input.type_css_in_ua by css.in.ua (@css_in_ua)


  on CodePen.

Приклад використання HTML атрибута type теґа <input>(можливе некоректне спрацювання з мобільних пристроїв)




  See the Pen 


  input.type2_css_in_ua by css.in.ua (@css_in_ua)


  on CodePen.

Різниця між HTML 4.01 та HTML5

У HTML5 з’явилися наступні input типи: color, date, datetime-local, month, week, time, email, number, range, search, tel та url.

Різниця між XHTML та HTML

Немає жодної різниці.

типов мобильного ввода

типов мобильного ввода

Виртуальные клавиатуры — это круто.

Используйте их.

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

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

Твитнуть

Текст

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

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

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

Тел.

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

Номер

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

Пароль

Вы думаете: «Ну, я должен использовать это, когда они вводят пароли». Когда в последний раз вы вводили пароль на своем мобильном телефоне, а кто-то стоял и смотрел вам через плечо? Дело в том, что скрытие символов просто раздражает, потому что пользователи не могут видеть, что они набрали. Так что, если они не входят в систему управления ракетами МИ-6, вам, вероятно, не нужно маскировать персонажей.

Date

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

Дата и время

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

Месяц

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

Поиск

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

Bulma: бесплатная современная CSS-инфраструктура с открытым исходным кодом на основе Flexbox

CSS-класс Bulma input предназначен для HTML-элементов. Поддерживаются следующие атрибуты типа:

  • тип = "текст"
  • тип="пароль"
  • тип = "электронная почта"
  • тип="тел"

Поддерживается несколько модификаторов , которые влияют на:

  • цвет
  • размер
  • состояние

Цвета #

Пример

HTML

Пример

HTML

Пример

HTML

Пример

HTML

Пример

HTML

Пример

HTML

Размеры #

Пример

HTML

Пример

HTML

Пример

HTML

Пример

HTML

Стили #

состояния #

Обычный 
 <дел>
Наведение
Фокус
Загрузка

Вы можете изменить размер счетчика загрузки, добавив is-small , is-medium или is-large в контейнер control .

 <дел>
  <дел>
<дел> <дел>