{"id":3824,"url":"\/distributions\/3824\/click?bit=1&hash=a0d33ab5520cacbcd921c07a49fc8ac5b78623b57936b992ce15c804b99210d4","title":"\u041a\u0430\u043a\u0443\u044e \u0440\u0435\u043a\u043b\u0430\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u0434\u0430\u0442\u044c \u043d\u0430 DTF \u0438 \u043a\u0442\u043e \u0435\u0451 \u0443\u0432\u0438\u0434\u0438\u0442","buttonText":"\u0423\u0437\u043d\u0430\u0442\u044c","imageUuid":"75ec9ef4-cad0-549d-bbed-1482dc44e8ee","isPaidAndBannersEnabled":false}
Vladimir Shaitan

Теги для создания форм. Часть №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 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. Больше уроков у меня на канале.

0
5 комментариев
Alex Astarit

Темная тема iOS в приложении dtf. Не обращай внимание.

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

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

Ответить
Развернуть ветку
Alex Astarit

Вначале хотел уточнить, как получилось поменять цвет текста. Но затем, просто поменял тему ради интереса и.. разочаровался.

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

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

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

не понял (

Ответить
Развернуть ветку
Читать все 5 комментариев
null