Учим HTML - основу веб-разработки (ч.4)
@honey_and_moneyНастало время всяких полезных и часто используемых тегов и структур в html!
Начнем с создания формы для авторизации. Изучать будем на практике:
Для начала нам нужно добавить на страницу два тега <form> и </form>. Они соответственно обозначают начало и конец формы.
Внутри неё мы и будем работать. Что обычно бывает в форме авторизации? Обычно это поле для логина, пароля и кнопка войти. Давайте приступим:
Забыл вам рассказать важную деталь в написании кода на html: Допустим вы добавили некоторый тег на страницу, потом в этот тег вложили еще один (он получился вложенным). Так вот, все теги не должны идти ровно друг под другом, каждый вложенный тег должен иметь отступ от родительского на 4 пробела или можно просто нажимать Tab. На скриншоте - <form> является родительским тегом, а <input> - дочерним. Отступ перед ним в четыре пробела.
Начнём разбирать код со скриншота:
По поводу <form> я уже всё пояснил, тут все понятно как ясный день
Далее идет вложенный тег <input> - он является одинарным (не требует закрывающего). Этот тег добавляет одно поле в вашу форму. Далее вы это поле конфигурируете с помощью атрибутов в тэге <input>:
type="login" - означает, что тип вводимых данных - логин. Никак не влияет на отображение информации на сайте, пишется просто для стандарта и понятности кода.
placeholder="Your login" - текст, который будет отображаться на фоне поля для ввода логина.
Вот что у вас должно получиться при открытии страницы в браузере:
Добавим еще одно поле:
Тут после первого инпута я добавил тэг <br>, чтобы следующее поле для ввода располагалось на новой строке, а не в одну линию с полем для логина.
Немного поменялись атрибуты:
type="password" - вводится пароль, html это понимает и для дополнительной безопасности данных, когда вы будете вводить свой пароль, будут отображаться точки вместо символов. Такое достигается только с использованием атрибута password.
И соответственно изменили текст для фона поля: placeholder="Your password"
Что осталось? Дело за малым, надо добавить кнопку для входа:
Здесь я опять добавил <br> после второго инпута для переноса кнопки на новую строку.
Кнопка добавляется с помощью тэгов <button> и </button>
type="submit" - говорит о том, что после нажатия на эту кнопку данные нужно передать в функциональную часть сайта (об этом поговорим позже). Основное что надо запомнить - если есть такой атрибут submit, то после нажатия на кнопку все данные из формы будут куда-то отправляться.
Текст, который будет написан на кнопке помещается между открывающим и закрывающим тэгом <button>. В нашем случае это Log In.
Что у нас получилось в итоге:
Помимо тех инпутов, которые я привел вам в пример есть еще несколько типов:
Выглядит вот так:
При таком написании инпутов сейчас можно выбрать одновременно и "Запомнить меня" и "Не запоминать пароль"
Исправим это:
Мы добавили одинаковый name двум инпутам. html поймет, что они относятся к однотипной информации и позволит пользователю выбрать одно из двух: либо первый кружок, либо второй. Третьего не дано.
Попрактикуйтесь с формами, попробуйте добавить больше полей. Сделайте их все различными.
@honey_and_money - Растворись в объятиях математики и кода!