<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>
<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. Больше уроков у меня на канале.
P.P.S Для тех кто хочет посмотреть код - ссылка на git репозиторий
