{"id":4093,"url":"\/distributions\/4093\/click?bit=1&hash=572414f048fd940828f35b0d46d6210a2c91bd9267922fbe28005f6aba01f505","title":"\u0417\u0434\u0435\u0441\u044c \u0432\u0441\u0435 \u2014 \u00ab\u0421\u0431\u0435\u0440\u00bb, \u00ab\u042f\u043d\u0434\u0435\u043a\u0441\u00bb, VK \u0438 Kaspersky","buttonText":"","imageUuid":""}
Vladimir Shaitan

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

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

0 показов
221 открытие

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

<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 id="form_id"></form> <input type="text" form="form_id">

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

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

Label - <label>

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

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

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

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

Пример

<form action=""> <h2>Contact form #3</h2> <div> <label for="user_name">First name:</label> <input id="user_name" 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. Больше уроков у меня на канале.

#html #HTML #html5 #HTML5 #htmltags #form #htmlForm #css #CSS #css3 #CSS3 #JS #javascript #web #webdev #вебразработка #programing #program #website #it #IT #frontend #tech

0
5 комментариев
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Vladimir Shaitan
Автор

Даже хз что по этому поводу сказать )

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Al.

А мы тут причем?

Ответить
Развернуть ветку
Vladimir Shaitan
Автор

не понял (

Ответить
Развернуть ветку
Написать комментарий...
-2 комментариев
Раскрывать всегда
null