Теги для создания форм. Часть №2. <input>
<input> - тег который мы вкладываем внутрь тега <form>, с помощью него мы будем создавать интерактивные поля для ввода информации пользователем.
Тег <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>Атрибут form - позволяет связать input с тегом <form>, input лежит вне тега <form>.
<input type="text" form="form_id">
Атрибутов <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. Больше уроков у меня на канале.
P.P.S Для тех кто хочет посмотреть код - ссылка на git репозиторий
Web-технологии
535 постов5.8K подписчиков
Правила сообщества
1. Не оскорблять других пользователей
2. Не пытаться продвигать свои услуги под видом тематических постов
3. Не заниматься рекламой
4. Никакой табличной верстки
5. Тег сообщества(не обязателен) pikaweb