Sobes.tech
Intern

Какви видове input елементи съществуват в HTML?

sobes.tech AI

Отговор от AI

Съществуват следните видове input елементи:

  • text: Едноредово текстово поле.
  • password: Поле за въвеждане на парола, символите са скрити.
  • submit: Бутон за изпращане на формуляра.
  • reset: Бутон за нулиране на формуляра.
  • radio: Превключвател (един от множеството).
  • checkbox: отметка (една или повече от множеството).
  • button: Обикновен бутон.
  • file: Поле за избор на файл.
  • hidden: Скрито поле, невидимо за потребителя, но изпращано с формуляра.
  • image: Бутон-изображение за изпращане на формуляра.

Спецификацията HTML5 добави нови типове:

  • email: Поле за въвеждане на email адрес.
  • url: Поле за въвеждане на URL адрес.
  • number: Поле за въвеждане на число.
  • range: Плъзгач за избор на числова стойност в зададен диапазон.
  • date: Поле за избор на дата.
  • month: Поле за избор на месец и година.
  • week: Поле за избор на седмица и година.
  • time: Поле за избор на време.
  • datetime-local: Поле за избор на дата и време без часови пояс.
  • search: Поле за търсене.
  • color: Поле за избор на цвят.
  • tel: Поле за въвеждане на телефонен номер.

Пример за използване:

<!-- Едноредово текстово поле -->
<input type="text" placeholder="Име">

<!-- Поле за въвеждане на парола -->
<input type="password" placeholder="Парола">

<!-- Бутон за изпращане на формуляра -->
<input type="submit" value="Изпрати">

<!-- Бутон за нулиране на формуляра -->
<input type="reset" value="Нулирай">

<!-- Превключватели -->
<input type="radio" name="пол" value="мъж"> Мъжки
<input type="radio" name="пол" value="жена"> Женски

<!-- Отметки -->
<input type="checkbox" name="интереси" value="музика"> Музика
<input type="checkbox" name="интереси" value="спорт"> Спорт

<!-- Обикновен бутон -->
<input type="button" value="Кликни ме">

<!-- Поле за избор на файл -->
<input type="file">

<!-- Скрито поле -->
<input type="hidden" name="userId" value="123">

<!-- Бутон-изображение -->
<input type="image" src="submit.png" alt="Изпрати">

<!-- Поле за email -->
<input type="email" placeholder="Email">

<!-- Поле за URL -->
<input type="url" placeholder="Уебсайт">

<!-- Поле за число -->
<input type="number" min="1" max="10">

<!-- Плъзгач -->
<input type="range" min="0" max="100">

<!-- Поле за дата -->
<input type="date">

<!-- Поле за месец -->
<input type="month">

<!-- Поле за седмица -->
<input type="week">

<!-- Поле за време -->
<input type="time">

<!-- Поле за дата и време (локално) -->
<input type="datetime-local">

<!-- Поле за търсене -->
<input type="search" placeholder="Търсене">

<!-- Поле за избор на цвят -->
<input type="color">

<!-- Поле за телефонен номер -->
<input type="tel" placeholder="+359 (xxx) xxx-xx-xx">