Редкие теги в HTML: details, dialog, menu
Привет, Привет, в рамках этого урока мы познакомимся в очень редкими тегами в HTML которые практически невозможно встретить, а именно: details, dialog, menu. Текстовая версия урок в полной версии статьи.
Details
<details> - создает интерактивный элемент при нажатии на который пользователю будет показана дополнительная информация. Обычно используется в паре с тегом <summary>. Этот элемент практически не используется так как является стандартным и тяжел для стилизации через CSS. Обычно если нужен элемент с подобным функционалом его создают из базовых тегов используя HTML + CSS + JavaScript.
<details>
<summary>Описание</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, saepe?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, saepe?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, saepe?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, saepe?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, saepe?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, saepe?</p>
</details>
Имеет атрибут open при наличии которого браузер сразу будет показывать скрытый контент
<details open>
<summary>Описание</summary>
<p>content</p>
</details>
Как вы могли заметить текст из тега <summary> стал заголовком <details>
Dialog
<dialog> - создает интерактивный элемент при нажатии на который пользователю будет показано всплывающее окно с контентом. Этот элемент практически не используется так как является стандартным и тяжел для стилизации через CSS.
Обычно если нужен элемент с подобным функционалом его создают из базовых тегов используя HTML + CSS + JavaScript.
В данном случае мы ничего не увидим так как по-умолчанию диалог скрыт
<dialog>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias consequatur cupiditate eos, excepturi inventore iste libero perferendis quibusdam reiciendis soluta vel veritatis voluptate voluptates! Blanditiis laborum quos repellat vero voluptatem?
</dialog>
Для того, чтобы открыть диалог, нам нужно добавить ему атрибут open
<dialog id="favDialog" open> dialog content </dialog>
Menu
Тег <menu> является семантической заменой тега <ul>, на данный момент тег <menu> является экспериментальной технологией и его лучше не использовать, так как не все браузеры его могут поддерживать.
<menu type="context" id="popup-menu">
<menuitem>Action</menuitem>
<menuitem>Another action</menuitem>
<hr/>
<menuitem>Separated action</menuitem>
</menu>
<menu type="toolbar">
<li>
<button type="menu" menu="file-menu">File</button>
<menu type="context" id="file-menu">
<menuitem label="New..." onclick="newFile()"></menuitem>
<menuitem label="Save..." onclick="saveFile()"></menuitem>
</menu>
</li>
<li>
<button type="menu" menu="edit-menu">Edit</button>
<menu type="context" id="edit-menu">
<menuitem label="Cut..." onclick="cutEdit()"></menuitem>
<menuitem label="Copy..." onclick="copyEdit()"></menuitem>
<menuitem label="Paste..." onclick="pasteEdit()"></menuitem>
</menu>
</li>
</menu>
В спецификации HTML4 <menu> работал по другом, но с выходом стандарта HTML5 логика тега <menu> была изменена, но на данный момент его практически не поддерживают никакие браузеры.
Более подробная информация о данных тегах рассказана в видео
Все о 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>
Теги select и textarea в HTML5
Select
<select> - элемент содержащий меню опций <option> или меню групп опций <optgroup>. Имеет схожие с <input> атрибуты, а также атрибуты multiple и size. Обычно select располагается внутри тега <form> или связывается с ним атрибутом form.
<form action="">
<select name="some_list"></select>
</form>
<option> - тег, который используется для определения пункта списка внутри тега <select>, но также его можно встретить и в тегах. Атрибуты: selected - позволяет пред-выбрать элемент. disabled - работает как всегда. и другие.
<form action="">
<label for="select">Select item</label>
<select name="list" id="select">
<option value="item-1">Item #1</option>
<option value="item-2">Item #2</option>
<option value="item-3">Item #3</option>
<option value="item-4">Item #4</option>
</select>
</form>
<optgroup> - позволяет группировать опции внутри <select>. Имеет атрибуты - name и disabled. name - задает имя группы. disabled - исключает возможность выбора элементов из группы. label - Задает имя группы которое видно пользователю.
<form action="">
<label for="select2">Select item</label>
<select name="list" id="select2">
<optgroup label="Veggie">
<option value="item-1" selected>Mushrooms</option>
<option value="item-2">Carrot</option>
</optgroup>
<optgroup label="Meat" disabled>
<option value="item-3">Pork</option>
<option value="item-4">Chicken</option>
</optgroup>
</select>
</form>
Атрибут multiple тега <select> позволяет выбирать не один, а сразу несколько <option> если зажата клавиша CTRL (для windows или linux) или COMMAND (для macOS)
<form action="">
<label for="select3">Select item</label>
<select name="list" id="select3" multiple>
<optgroup label="Veggie">
<option value="item-1" selected>Mushrooms</option>
<option value="item-2">Carrot</option>
</optgroup>
<optgroup label="Meat" disabled>
<option value="item-3">Pork</option>
<option value="item-4">Chicken</option>
</optgroup>
</select>
</form>
Textarea
<textarea> - позволяет добавить поле для ввода большого количества текста, обычно располагается внутри тега <form>. Имеет атрибуты схожие с <input>, а также cols и rows.
cols - определяет ширину <textarea>
rows - определяет высоту <textarea>
<form action="">
<label for="message">Your massage</label>
<textarea
name="user_message"
id="message"
cols="30"
rows="10"
placeholder="Your message..."
></textarea>
</form>
У тега <textarea> нет атрибута value, а если вы ходите установить ему какое-то значение по-умолчанию, нужно писать его между открывающим и закрывающим тегами.
<form action="">
<label for="message2">Your massage</label>
<textarea
name="user_message"
id="message2"
cols="30"
rows="10"
placeholder="Your message..."
>Some predefined data goes here</textarea>
</form>
Файлы с урока
P.S. Подписывайся на мой youtube и telegram каналы чтобы получать больше контента )
Тег input в HTML
Привет, в рамках этого урока мы познакомимся с тегом input, разберем типы input-ов, рассмотрим атрибуты этого тега, а также познакомимся с тегом label. Больше уроков у меня на канале.
Этот видео-урок является дополнением к посту о input - ссылка на пост
Как работает тег <form> в HTML
Привет, в рамках этого урока мы познакомимся с тегом form и его атрибутами, разберемся что нужно в него вкладывать и как использовать. Больше уроков у меня на канале
<form> - Обычно этот тег оборачивает элементы с которыми пользователь может взаимодействовать. Это могут быть поля для ввода текста, выпадающие списки, заголовки полей. Всех их мы разберем далее. <form> имеет достаточно много атрибутов, мы разберем самые распространенные. Элемент <form> интерактивный, при правильном его описании мы можем отправлять данные которые расположены внутри нее, на сервер.
<form></form>action - определяет ссылку на сервер куда будут отправляться данные из <form>.
<form action="https://some-server-url.com/send-email"
method="get"
target="_blank"
></form>
method - определяет метод http с помощью которого будут отправляться данные.
target - определяет в каком окне будет производиться отправка, в новом или текущем.
Также есть еще много атрибутов у тега <form>, о них читайте в документации.
P.S. Больше уроков у меня на канале
Хорошо разбираетесь в звездах и юморе?
Тогда этот вызов для вас! Мы зашифровали звездных капитанов команд нового юмористического шоу, ваша задача — угадать, кто возглавил каждую из них.
Переходите по ссылке и проверьте свою юмористическую интуицию!
Циклы в SASS / SCSS ( @each )
Привет, в этом уроке мы разберемся что такое циклы в SASS / SCSS на примерах разберем как перебирать структуры данных List и Map и на примерах разберемся как использовать все эти вещи вместе с интерполяцией для динамической генерации стилей. Приятного просмотра.
P.S. Больше уроков у меня на канале