AInput в HTML: Изчерпателно ръководство с обяснение на всички видове и употреби

Ако се гмуркате в света на уеб разработката, има основен елемент, за който трябва да имате задълбочени познания: <input> в HTML. Този малък, но многофункционален блок от код е отговорен за улесняването на една от най-важните функции на всеки модерен уебсайт: взаимодействието на потребителя с формуляри. От подаване на просто име, избор на дата или качване на файл до валидиране и достъпност, въвеждането прави практически всичко.

Познайте в дълбочина как работи етикетът <input>, неговите различни видове и атрибути, Това е ключово за възможността да манипулираме потребителското изживяване, да събираме информация и да оживяваме нашите уеб проекти.. В тази статия ще обясним всичко ясно и подробно, с примери, така че да не пропуснете важни подробности. Пригответе се да откриете всичко, което трябва да знаете за въвеждането на HTML.

Какъв е етикетът `<input>` в HTML?

Етикетът <input> Това е основен компонент, използван в HTML формуляри. Използва се за улавяне на потребителска информация чрез различни механизми като текстови полета, радио бутони, падащи списъци или качване на файлове. За да научите повече за други важни функции, препоръчваме да прочетете по темата в контекста на функции за въвеждане в HTML.

Всеки тип вход се определя от атрибута type. Този атрибут определя специфичното поведение и външен вид на полето. Ако не е посочено, по подразбиране се интерпретира като text.

Общата му структура е много проста:

<input type="text" name="usuario" placeholder="Escribe tu nombre">

Въпреки че е самостоятелен етикет (не се затваря с </input>), това може да бъде широко персонализирано с други атрибути, които променят неговата стойност, видимост, валидиране и поведение.

Пълен списък с типове входове

HTML5 значително разшири броя на възможните типове за <input>. Ето разбивка на най-често използваните и как работят:

текст: Едноредово текстово поле. Идеален за имена, адреси и др.
парола: Подобно на текст, но скрива въведените знаци. Перфектен за пароли.
имейл: Приема имейл адреси и потвърждава формата преди изпращане.
номер: Позволява ви да въвеждате само числа. Можете да добавите min, max y step.
тел: За въвеждане на телефонни номера без стриктна проверка.
URL адрес: Потвърждава дали е въведен добре оформен уеб адрес.
дата: Изберете дати от интегриран календар.
време: Използвайте часовник, за да изберете час.
datetime-local: Дата и час без часова зона.
месец: Позволява ви да изберете само месец и година.
седмица: Изберете седмицата от годината.
квадратче за отметка: Полета за отметка за множество възможности за избор.
радио: Единичен избор от няколко опции.
файл: Позволява ви да качвате локални файлове.
диапазон: Плъзгач за избор на номер.
цвят: Графичен селектор на цвят.
Търсене: Оптимизирано за търсене поле.
образ: Графичен бутон за изпращане с интегрирано изображение.
изпращам: Бутон, който изпраща формуляра.
нулиране: Нулира стойностите на формуляра.
бутон: Бутон без предварително дефинирано действие. Той се комбинира с JavaScript.
скрит: Невидимо поле, използвано за изпращане на стойности без взаимодействие с потребителя.

Най-често срещаните и полезни атрибути на вход

HTML входовете могат да бъдат придружени от множество атрибути, които контролират поведението си специално. Някои от най-използваните са:

име: Свързва име с въведеното, което ще се използва като ключ при подаване на формуляра.
заместител: Показва указателен текст в полето за въвеждане.
изисква: Принуждава потребителя да попълни полето, преди да изпрати формуляра.
само за четене: Полето се вижда, но не може да се редактира.
хора с увреждания: Неактивно поле, не може да се взаимодейства с него и не се изпраща на сървъра.
стойност: Присвоява стойността по подразбиране на входа.
максимална дължина / минимална дължина: Определя максималната или минималната разрешена дължина.
модел: Използва се за дефиниране на валидиращ регулярен израз.
автоматично довършване: Позволява или не позволява на браузъра да предлага използвани преди това стойности.
автофокус: Автоматично поставя курсора в това поле, когато страницата се зареди.
стъпка: Показва валидните диапазони за цифрови входове. Например: 5, 10, 0.01.
мин./макс.: Минимални и максимални допустими стойности.
множество: Позволява ви да качите повече от един файл или да изберете няколко имейла с type="email".

Качване на файлове с входен файл

Едно от най-практичните приложения е въвеждането на типа file, което позволява на потребителя да качва документи, изображения или произволен локален файл. За повече информация относно този тип функционалност можете да прочетете повече за това как да обработвате входове във вашите формуляри в статията.

Основен пример:

<form action="/subir" method="POST" enctype="multipart/form-data">
  <input type="file" name="documento">
  <input type="submit" value="Subir archivo">
</form>

За да разрешите качването на няколко файла наведнъж, просто добавете атрибута multiple:

<input type="file" name="archivos[]" multiple>

Не забравяйте, че този тип въвеждане работи само с method="POST" и enctype="multipart/form-data".

Освен това можете да дефинирате разрешените типове файлове с помощта на атрибута accept:

<input type="file" accept=".jpg, .png, .pdf">

Плъзгачи или контроли за обхват

Видът range ви позволява да включите плъзгач. Полезно е, когато точната стойност не е от решаващо значение, като например избор на обем, приблизителна възраст или ценови диапазони. Този тип въвеждане може да се разглежда като част от по-широк подход за персонализиране на формуляр, тема, разгледана и в .

<input type="range" min="0" max="100" step="5" value="50">

За да се покаже текущата стойност на плъзгача, се препоръчва да го свържете с етикет <output> и използвайте JavaScript, за да го актуализирате динамично:

<input type="range" id="rango" min="0" max="100" value="50">
<output id="valorRango">50</output>

<script>
  const slider = document.getElementById("rango");
  const output = document.getElementById("valorRango");

  output.textContent = slider.value;
  slider.addEventListener("input", () => output.textContent = slider.value);
</script>

Полета за избор: радио, отметка и избор

За да предостави множество опции на потребителя, HTML предоставя:

Радио: Позволява ви да изберете една опция от група.
Поле за отметка: Позволява ви да изберете няколко опции едновременно.
Изберете: Показва списък с персонализирани опции.

Пример за радио:

<input type="radio" name="color" value="rojo"> Rojo
<input type="radio" name="color" value="azul"> Azul

Пример за квадратче за отметка:

<input type="checkbox" name="intereses[]" value="lectura"> Lectura
<input type="checkbox" name="intereses[]" value="cine"> Cine

Достъпност, съвместимост и добри практики

За да осигурите добро потребителско изживяване, жизненоважно е да вземете предвид някои технически аспекти и аспекти на достъпността, които са от съществено значение при работа с формуляри и въведени данни. Ако се интересувате да научите повече за тези видове препоръки, можете да се консултирате с .

Винаги използвайте етикети <label> за описание на входа и ги асоциирайте с помощта на атрибута for.
Избягвайте използването на въвеждане на типове text за пароли, имейли или дати. Използвайте правилните типове.
Винаги потвърждавайте данните както във фронтенда, така и в бекенда. HTML атрибутите не са достатъчни за предотвратяване на злонамерени изпращания.
Проверете съвместимостта между различни браузъри. Някои видове не са налични във всички (като напр date в Safari).
Включва атрибути като aria-label o aria-describedby ако във входа липсва видим текст.

Прилагайки тези препоръки, вашите формуляри ще бъдат не само по-стабилни, но и приобщаващи и достъпни за всеки тип потребител.

El <input> Това е супер мощен инструмент в HTML, който далеч надхвърля обикновеното текстово поле. От събиране на имейли, улесняване на търсения, разрешаване на качване на файлове или добавяне на проверки на ключове, използването му е от съществено значение.. Като разберете напълно всеки от неговите типове и атрибути, можете да подобрите взаимодействието и да подобрите изживяването. от потребителско до професионално ниво.

Какъв е етикетът <input> в HTML?