Учим HTML - основу веб-разработки (ч.4)

Учим 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 - Растворись в объятиях математики и кода!

Report Page