Приветствую вас в 5,заключительной части " Базовые знания по html " В будущем будут " Базовые знания по css"
В этой части мы будем проходить теги textarea,checkbox,option, label,select,input.
Начнем с textarea!
Вот как он выглядит
<textarea name="text" placeholder="Введите текст" id="text"></textarea>
Разберем все по порядку.
name - это название textarea. Он обязательный.
placeholder - это то что должно быть написано до ввода текста. id - это название, к которому мы будем обращаться в css.
Нужно заметить, что эту площадь можно увеличить. Справа Снизу.
input
Из input, можно очень много интересного сделать.
Все зависит от type.
Сейчас мы разберём все самые известные!
Первое: type="text"
Это область для заполнения,которую невозможно изменить, в отличии от textarea.
Все остальное не меняется.
Пример находится ниже вас
<input type="text" name="name" id="name" placeholder="Введите имя">
Вот, что мы получим:
Если мы хотим, чтобы человек выбирал тему при отправки сообщения, то нам несомненно нужен тег select/option
Советую использовать тег div, когда используем эти типы.
Пусть мы хотим сделать на нашем сайте форму для отправки сообщений.
Пусть в ней пользователь будет выбирать на какую тему будет отправка сообщений. Отзыв,Вопрос или что-то другое. Мы хотим получить такой окончательный результат.
Сначала мы должны использовать тег label, как показано ниже. Атрибут for - обязательный, мы должны придумать ему название. Пусть будет topic.
<div >
<label for="topic">Выберите Тему</label>
</div>
Это нужно для того, чтобы было понятно, что мы хотим сказать пользователю. Не волнуйтесь, если label и select будут не ровно стоять. Просто у меня наложены специальные css свойства, которых у вас нет.
<div >
<div >
<label for="topic">Выберите Тему</label>
</div>
Дальше мы используем саму форму выбора. В теге select, в атрибуте name мы обращаемся к нашему topic. id советую оставить таким как у меня. В будущем я расскажу вам, что это за атрибут.
В теге select мы вставляем тег option. Каждый option как раз и означает, то, что должен выбрать пользователь.
<div >
<select name="topic" id="topic">
<option value="feedback">Отзыв</option>
<option value="question">Вопрос</option>
<option value="other">Другое</option>
</select>
</div>
И самое последнее это галочка, которую если захочет может выбрать пользователь.
Чтобы сделать такую галочку, type должен быть checkbox.
<input type="checkbox" name="news" id="news" checked> Да,конечно
Вот код, который отвечает за эту галочку.
name and id лучше, чтобы был одинаковым. checked обязателен.
Вот и закончились наши статьи по " Базовые знания по html " Есть еще много интересных тегов, без которых никуда, но мы разобрали базовые. Другие теги мы разберем в статьях " Базовые знания по css"
Удачи вам в развитии!!!