Всем привет! Продолжаем добавлять различные элементы форм html в код нашего сайта-портфолио и создадим некоторое подобие формы для подачи заявки на новый сайт. Итак, начнем с создания нового блока <div> с заголовком <h2> в самом низу нашей страницы c классом заголовка class="section-title" из девятого урока
В этом же блоке <div> создаем тег <form> для формы. Атрибуты формы мы проходили на прошлом уроке, поэтому не буду повторять значение атрибутов action и method. Для action значением будет файл с именем, например, order.php, который у нас как будто есть на сервере (но на самом деле его пока нет, будем создавать его на следующих уроках).
Далее в отдельных блоках <div> (в отдельных чтобы каждое поле было на новой строчке) создаем два поля ввода (инпута) для имени и почты с помощью тега <input>. Плагин emmnet из этого урока по умолчанию создает <input> с атрибутами type (в нашем случае обычный текстовый "text") и name (имя поля нужно чтобы обращаться к нему по этому имени, имя выбираете сами на ваше усмотрение, но как я уже говорил, выбирайте понятное и удобное имя, в нашем случае сlient_name и client_email). К каждому инпуту добавляем тег <label> с атрибутом-обращением for (а вот нам и пригодилось имя поля), чтобы продублировать атрибут-подсказку placeholder, т.к. с момента начала ввода текста подсказка заменяется вводимыми символами.
В новом блоке <div> добавляем выбор пола (мужчина или менщина, все остальные гендеры опустим) с помощью еще одного вида инпута radio, названного так в честь первых радио, у которых кнопки находились в ряд, и при нажатии одной кнопки, выбранная ранее кнопка отщелкивалась. Как и в предыдущем случае добавил лейбл для пояснения. "Ваш пол" заключил в тег <span> для наглядности и удобства, это необязательно: если уберете этот тег ничего не поменяется.
Добавляем четыре новых элемента checkbox (галочка по-простому), который так же является разновидностью тега <input>. Называем лейбл "Дополнительные возможности". К первым двум чекбоксам добавил атрибут checked (его можно добавить и для radio тоже), т.е. галочка будет после загрузки/обновления страницы, но ее можно будет в любой момент убрать.
Добавляем элемент формы <select> (выбор из списка) для выбора типа сайта, который хочет заказчик (посетитель сайта). Синтаксис этого тега слегка отличается от чекбоксов и радиокнопок, т.к. имеет закрывающую пару <option></option>. Атрибут multiple позволяет с помощью кнопки CTRL выбирать сразу несколько вариантов, без него - только один.
Инпут type="file" добавляет кнопку для выбора файла для загрузки с компьютера.
Для поля ввода комментариев используют тег <textarea>, атрибутами которого можно задать высоту, c помощью строк rows, и ширину, с помощью колонок col, плюс можно ограничить максимальное количество символов комментария с помощью maxlength.
В конце добавляем кнопки сброса и отправки, используя два разных тега, которые выполняют одну фукнкцию. Различия лишь в том, у <input> название записывается в значении value, а у <button> - вне скобок. Выбирайте какой вам больше нравится.
Ну вот и все на сегодня. Пишите в комментариях свои вопросы, ставьте лайки и подписывайтесь. До скорого...