Все о datalist, fieldset и button в HTML
Привет, в рамках этого урока мы разберемся оставшимися тегами формы, а именно: datalist, fieldset, legend, button. Также разберемся в нюансах и частоте использования этих тегов. Текстовая версия урока в полной версии этой статьи.
Datalist
<datalist> - содержит набор опций (<option>), доступных для выбора. Выбранное значение будет установлено для элемента <input>, с атрибутом list.
Не стоит использовать его вместо тега <select>, но можно использовать как вспомогательный тег для <input>. Причина в том что его сложнее обрабатывать через JavaScript.
<form action="">
<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />
<datalist id="ice-cream-flavors">
<option value="Chocolate">
<option value="Coconut">
<option value="Mint">
<option value="Strawberry">
<option value="Vanilla">
</datalist>
</form>
Fieldset
<fieldset> - существует для группировки <input> внутри тега <form>, а также помогает удобно управлять группой полей.
<form action="#">
<h3>Registration form</h3>
<fieldset>
<div>
<label for="name_input">First name:</label>
<input id="name_input" type="text" placeholder="Email">
</div>
<div>
<label for="surname_input">Surname:</label>
<input id="surname_input" type="text" placeholder="Surname">
</div>
</fieldset>
<br>
<fieldset disabled>
<div>
<label for="email_input">Email:</label>
<input id="email_input" type="text" placeholder="Email">
</div>
<div>
<label for="password_input">Password:</label>
<input id="password_input" type="text" placeholder="Password">
</div>
</fieldset>
</form>
У <fieldset> также есть несколько атрибутов, которые помогают управлять сразу всей группой <input>.
name - задает общее имя для группы
disabled - делает группу недоступной для редактирования
form - если <fieldset> лежит вне тега <form> то этот атрибут позволит вам связать их.
<form action="" id="example_form">
<h3>Example form</h3>
<label>
<input type="text" placeholder="Some example input">
</label>
</form>
<fieldset form="example_form">
<div>
<label for="name_2_input">First name:</label>
<input id="name_2_input" type="text" placeholder="Email">
</div>
<div>
<label for="surname_2_input">Surname:</label>
<input id="surname_2_input" type="text" placeholder="Surname">
</div>
</fieldset>
Legend
<legend> - Является заголовком для группы элементов, сгруппированных через <fieldset>
<form action="">
<h3>Another Example Form</h3>
<fieldset>
<legend>User info</legend>
<div>
<label for="name_3_input">First name:</label>
<input id="name_3_input" type="text" placeholder="Email">
</div>
<div>
<label for="surname_3_input">Surname:</label>
<input id="surname_3_input" type="text" placeholder="Surname">
</div>
</fieldset>
<br>
<fieldset disabled>
<legend>User credentials</legend>
<div>
<label for="email_3_input">Email:</label>
<input id="email_3_input" type="text" placeholder="Email">
</div>
<div>
<label for="password_3_input">Password:</label>
<input id="password_3_input" type="text" placeholder="Password">
</div>
</fieldset>
Button
<button> - Парный тег, который предназначен для создания кнопки, имеет схожие атрибуты с тегом <input>. Может использовать как внутри <form> заменяя собой <input type="button">, так и просто как отдельный элемент на странице.
<form action="">
<h3>Another Example Form</h3>
<fieldset>
<legend>User info</legend>
<div>
<label for="name_3_input">First name:</label>
<input id="name_3_input" type="text" placeholder="Email">
</div>
<div>
<label for="surname_3_input">Surname:</label>
<input id="surname_3_input" type="text" placeholder="Surname">
</div>
</fieldset>
<br>
<fieldset disabled>
<legend>User credentials</legend>
<div>
<label for="email_3_input">Email:</label>
<input id="email_3_input" type="text" placeholder="Email">
</div>
<div>
<label for="password_3_input">Password:</label>
<input id="password_3_input" type="text" placeholder="Password">
</div>
</fieldset>
<fieldset>
<legend>Form Controls</legend>
<button type="submit">Submit</button>
<button type="reset">Clear Form</button>
</fieldset>
</form>
Селекторы CSS - часть 1
Любые стили CSS записываются по одной и той же формуле: название стиля: значение; Чтобы добавить стиль к элементу, необходимо использовать селектор. Он указывает, к какому именно элементу или элементам нужно добавить наши стили. Для примера, изменим цвет шрифта у параграфа который есть у нас в HTML
p {
color: red; /* Изменяем цвет текста */
font-size: 20px; /* Изменяем размер шрифта */
}
p - это селектор, обращаясь к этому селектору мы говорим браузеру чтобы он выбрал все <p> на странице и применил к ним соответствующие стили.
{} - это фигурные скобки, с их помощью мы отделяем селектор от CSS свойств.
Свойства, они находятся всегда внутри фигурных скобок и с их помощью мы описываем внешний вид выбранных по селектору элементов. CSS свойств огромное количество и по мере изучения вы будете узнавать из все больше, но не стоит пытаться выучить их все сразу, это бесполезно, со временем вы их запомните, а также не забывайте обращаться к документации.
P.S. - Больше уроков у меня на канале
P.P.S. - Файлы с урока
В Питере шаверма и мосты, в Казани эчпочмаки и казан. А что в других городах?
Мы постарались сделать каждый город, с которого начинается еженедельный заед в нашей новой игре, по-настоящему уникальным. Оценить можно на странице совместной игры Torero и Пикабу.
Реклама АО «Кордиант», ИНН 7601001509
Циклы в SASS / SCSS ( @each )
Привет, в этом уроке мы разберемся что такое циклы в SASS / SCSS на примерах разберем как перебирать структуры данных List и Map и на примерах разберемся как использовать все эти вещи вместе с интерполяцией для динамической генерации стилей. Приятного просмотра.
P.S. Больше уроков у меня на канале
Урок - Подключение CSS
HTML существует только для разметки контента, но не несет в себе никакой стилизации элементов. За это отвечает язык CSS. Все визуальные отличия тегов друг от друга мы видим только благодаря тому что браузер имеет свою таблицу стилей которая работает по умолчанию. Как вы уже поняли, для того чтобы мы могли стилизовать элементы сами, нам нужно будет использовать язык CSS. Разберемся как его внедрить на нашу страницу.
Способ #1 - inline styles
Одним из общих атрибутов для каждого тега, является атрибут style, внутри которого мы и можем писать наш CSS код.
<h1 style="color: red">Some Title - <a href="#">link</a></h1>
Способ #2 - тег <style>
Внутри тега <style> мы можем писать стили, идентифицируя нужные нам теги по их атрибутам, именам и тд. (селектору тега). Тег <style> должен быть расположен внутри тега <head>.
<head>
<style>
div {
max-width: 1200px;
margin: 0 auto;
background-color: antiquewhite;
padding: 10px 20px;
}
</style>
</head>
Открыть на CodePen
Способ #3 - отдельный файл
Самое лучшее что можно придумать, это подключение отдельного CSS файла к нашему проекту. Делается это через тег <link>, который также должен быть вложен внутрь тега <head>.
Атрибуты:
rel - должен иметь значение stylesheet
href - ссылку или путь к файлу .css
Тег <link> имеет больше атрибутов, на данном этапе их рассматривать не будем.
<link rel="stylesheet" href=".././css/style.css">
Способ #4 - отдельный файл через тег <style>
Не рекомендую вам так делать, лучше старайтесь всегда когда возможно подключать свои .css файлы через тег link. Такой способ практически ничем не отличатся от подключения через <link> кроме синтаксиса, но он читается намного хуже и усложняет понимание.
<style>
@IMPORT '.././css/style2.css';
</style>
Видеоурок - Семантические теги HTML
Привет, в рамках сегодняшнего урока вы узнаете что такое семантика и зачем она нужна для WEB страниц, какие семантические теги бывают и как они работают. На примере рассмотрим каким образом правильно создавать семантическую разметку .
Теги для создания форм. Часть №2. <input>
<input> - тег который мы вкладываем внутрь тега <form>, с помощью него мы будем создавать интерактивные поля для ввода информации пользователем.
Тег <input> можно использовать и вне тега <form>.
Также имеет много атрибутов позволяющих настроить его внешний вид, поведение и работу.
<input type="text">
<input type="number">
<input type="email">
<input type="tel">
<input type="checkbox">
<input type="radio">
<input type="button" value="Submit">
<input type="submit" value="Submit">
<input type="color">
<input type="date">
<input type="time">
<input type="file">
<input type="hidden">
<input type="password">
<input type="range">
<input type="url">
Это основные типы тега <input>, в зависимости от типа тега он может принимать какие-то атрибуты или не принимать их, об этом лучше читать в документации.
Рассмотрим несколько атрибутов на примере стандартного input для ввода текста.
<input type="text" value="Some text here">
value - позволяет нам определить или предопределить значение тега input.
<input type="text" placeholder="First name">
placeholder - определяет текст, который будет показа пользователь внутри input до того момента пока пользователь не начнет вводить свое значение. Доступен не всем типам input.
<input type="text" required>
required - определяет, будет ли обязательным этот input в рамках текущего тега <form>.
<input type="text" disabled>
disabled - определяет, будет ли у пользователя возможность редактировать содержимое input
<input type="text" pattern="">
pattern - в качестве значения принимает регулярное выражение которые будет проверять правильность введенных данных.
<input type="text" name="first_name">
name - задает имя для нашего input
<form id="form_id"></form>Атрибут form - позволяет связать input с тегом <form>, input лежит вне тега <form>.
<input type="text" form="form_id">
Атрибутов <input> существует огромное количество, мы рассмотрели только самые распространенные.
Label - <label>
Это тег позволяющий указывать подпись для элемента, обычно используется вместе с тегом input. input и label можно связать с помощью id для input и for для label.
<form action="">
<h2>Contact form #1</h2>
<div>
<label for="first_name">First name:</label>
<input id="first_name" type="text" placeholder="First name">
</div>
</form>
Также мы можем положить внутрь <label> тег <input> в таком случае они свяжутся автоматически и нам не нужно указывать атрибуты for и id.
<form action="">Пример
<h2>Contact form #2</h2>
<div>
<label>
<span>First name</span>
<input type="text" placeholder="First name">
</label>
</div>
</form>
<form action="">
<h2>Contact form #3</h2>
<div>
<label for="user_name">First name:</label>
<input id="user_name" type="text" placeholder="User name">
</div>
<div>
<label>
<span>User surname:</span>
<input type="text" placeholder="User surname">
</label>
</div>
<div>
<input type="submit" value="Submit">
<input type="reset" value="Reset from">
</div>
</form>
P.S. Больше уроков у меня на канале.
P.P.S Для тех кто хочет посмотреть код - ссылка на git репозиторий
Конкурс для мемоделов: с вас мем — с нас приз
Конкурс мемов объявляется открытым!
Выкручивайте остроумие на максимум и придумайте надпись для стикера из шаблонов ниже. Лучшие идеи войдут в стикерпак, а их авторы получат полугодовую подписку на сервис «Пакет».
Кто сделал и отправил мемас на конкурс — молодец! Результаты конкурса мы объявим уже 3 мая, поделимся лучшими шутками по мнению жюри и ссылкой на стикерпак в телеграме. Полные правила конкурса.
А пока предлагаем посмотреть видео, из которых мы сделали шаблоны для мемов. В главной роли Валентин Выгодный и «Пакет» от Х5 — сервис для выгодных покупок в «Пятёрочке» и «Перекрёстке».
Реклама ООО «Корпоративный центр ИКС 5», ИНН: 7728632689