Различия

Показаны различия между двумя версиями страницы.

--- html_tegi [2023/10/05 17:27]
tro
+++ html_tegi [2023/10/28 18:49] (текущий)
tro
@@ Строка 212: / Строка 212: @@
   * тобі просто потрібен загальний контейнер для оформлення;
   * не виходить дати групі тегів окреме ім'я, що повністю описує вміст.
+===== Aria-label =====
+помогает присвоить компоненту заголовок, который видим исключительно программам чтения с экрана (скринридерам). Например, вы разместили в интерфейсе кнопку редактирования с иконкой карандаша.
 ===== form =====
 Для створення форм і т.д.
@@ Строка 233: / Строка 235: @@
   * __placeholder__ - підказка що потрібно вводити в інпут.Щоб змінити стилі саме плейс-холдера - то у нього є всевдоєлемент для css __.modal-input::placeholder__
   * __type__ - існує багато типів інпутів - для емаіл, для цифр або телефонів і т.д. Треба використовувати правильні типи
+  - text
+  - checkbox
+  - radio
   * __required__ - робить поле обовязкове для заповнення
   * __maxlenght__ - вказує максимальну кількість символів
   * __value__ - вже заповнює цією інформацією інпути
+  * __step="0.5"__ - дає можливість вводити цифри з кроком
 ===== label =====
@@ Строка 324: / Строка 331: @@
   <option value="l">Large</option>
 </select>
+</code>
+**Групування опцій**
+<code>
+<select name="month">
+  <optgroup label="Summer">
+    <option value="s6">June</option>
+    <option value="s7">July</option>
+    <option value="s8">August</option>
+  </optgroup>
+  <optgroup label="Autumn">
+    <option value="s9">September</option>
+    <option value="s10">October</option>
+    <option value="s11">November</option>
+  </optgroup>
+</select>
+</code>
+====== Селектор X + Y ======
+Може використовуватися для стилізації вибраних елементів.
+Для цього потрібно використовувати селектор X + Y. Цей селектор вибирає тільки той елемент Y, який в HTML-розмітці слідує відразу ж за X.
+<code>
+<input type="checkbox" name="hobby" value="music" id="music" />
+<label for="music">Music</label>
+input[type="checkbox"]:checked + label {
+  color: blue;
+}
+</code>
+===== fieldset  =====
+це контейнер для групування декількох пов'язаних елементів у формі, а вкладений legend виконує роль заголовка групи. Пов'язані радіокнопки та чек-бокси завжди повинні бути згруповані. Інші типи полів групуються за потребою.
+<code>
+<form>
+  <fieldset>
+    <legend>Заголовок групи</legend>
+    <!-- Група інтерактивних елементів -->
+  </fieldset>
+  <fieldset>
+    <legend>Заголовок групи</legend>
+    !-- Група інтерактивних елементів -->
+  </fieldset>
+  <button type="submit">Submit</button>
+</form>
 </code>