HTML + Разработка

Привет, в рамках этого урока мы познакомимся с тегом input, разберем типы input-ов, рассмотрим атрибуты этого тега, а также познакомимся с тегом label. Больше уроков у меня на канале.

Этот видео-урок является дополнением к посту о input - ссылка на пост

Привет, в рамках этого урока мы познакомимся с тегом form и его атрибутами, разберемся что нужно в него вкладывать и как использовать. Больше уроков у меня на канале

<form> - Обычно этот тег оборачивает элементы с которыми пользователь может взаимодействовать. Это могут быть поля для ввода текста, выпадающие списки, заголовки полей. Всех их мы разберем далее. <form> имеет достаточно много атрибутов, мы разберем самые распространенные. Элемент <form> интерактивный, при правильном его описании мы можем отправлять данные которые расположены внутри нее, на сервер.

<form></form>
<form action="https://some-server-url.com/send-email"
method="get"
target="_blank"
></form>

method - определяет метод http с помощью которого будут отправляться данные.

target - определяет в каком окне будет производиться отправка, в новом или текущем.

Также есть еще много атрибутов у тега <form>, о них читайте в документации.

Селекторы - это достаточно мощный инструмент который позволяет нам выбирать элементы не только по тегу но и по различным атрибутам, будь то id, class или любой атрибут, а также выбирать элементы по наведению мышки, четные или нечетные и многое другое.

Рассмотрим самые распространенные селекторы:

1. Селектор по тегу - самый простой селектор который помогает нам выбрать элементы по названию их тега, для этого нам нужно только указать название тега без скобок.

p {
color: red;
}

2. Селектор по классу. Если мы хотим привязывать стили только к определенным элементам мы можем использовать селекторы по классу, для этого нам необходимо задать атрибут class с для тега html с логическим значением. Для того чтобы добраться к элементу по классу нам нужно перед значением атрибута class нужного нам элемента поставить '.' точку.

.block {
text-decoration: underline;
color: blue;
}

3. Селектор по атрибуту. Работает абсолютно аналогично селектору по классу, но имеет другой синтаксис [имя-атрибута="значение атрибута"]

[href="#"] {
color: blue;
font-weight: bold;
font-size: 30px;
}

[href] {
text-transform: uppercase;
}

4. Селектор по идентификатору. Этот селектор похож на селектор выборки элементов по классу но ключевое отличие состоит в том что для использования такого селектора вам необходимо давать html тегам атрибут id, а значение этого атрибута в свою очередь должно быть уникально в рамках всей страницы. Из-за этих ограничений вы не можете создавать одинаковые атрибуты id на всех тегах, так как это будет ошибкой.

Пример выбора элемента по id:

#main-title {
font-weight: bold;
text-decoration: line-through;
}

P.P.S. - Файлы с урока

Любые стили CSS записываются по одной и той же формуле: название стиля: значение; Чтобы добавить стиль к элементу, необходимо использовать селектор. Он указывает, к какому именно элементу или элементам нужно добавить наши стили. Для примера, изменим цвет шрифта у параграфа который есть у нас в HTML

p {
color: red; /* Изменяем цвет текста */
font-size: 20px; /* Изменяем размер шрифта */
}

p - это селектор, обращаясь к этому селектору мы говорим браузеру чтобы он выбрал все <p> на странице и применил к ним соответствующие стили.

{} - это фигурные скобки, с их помощью мы отделяем селектор от CSS свойств.

Свойства, они находятся всегда внутри фигурных скобок и с их помощью мы описываем внешний вид выбранных по селектору элементов. CSS свойств огромное количество и по мере изучения вы будете узнавать из все больше, но не стоит пытаться выучить их все сразу, это бесполезно, со временем вы их запомните, а также не забывайте обращаться к документации.

P.S. - Больше уроков у меня на канале

P.P.S. - Файлы с урока