Различия

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

--- html_tegi [2023/10/03 17:53]
tro
+++ html_tegi [2023/10/28 18:49] (текущий)
tro
@@ Строка 212: / Строка 212: @@
   * тобі просто потрібен загальний контейнер для оформлення;
   * не виходить дати групі тегів окреме ім'я, що повністю описує вміст.
+===== Aria-label =====
+помогает присвоить компоненту заголовок, который видим исключительно программам чтения с экрана (скринридерам). Например, вы разместили в интерфейсе кнопку редактирования с иконкой карандаша.
 ===== form =====
 Для створення форм і т.д.
 <code>
-<form action=""></form>
+<form name="feedback_form" autocomplete="off" action="" novalidate>
+   <button type="submit">Submit feedback</button>
+</form>
 </code>
-action="" з старого формату для php. Зараз треба стирати бо всим займаєтся JS
+  * action="" з старого формату для php. Зараз треба стирати бо всим займаєтся JS
-==== input ====
+  * name — ім'я форми, що є унікальним на поточній веб-сторінці. Може містити символи англійського алфавіту в будь-якому регістрі, цифри, підкреслення та тире. Не можна використовувати пробіл. Використовується як на сервері, так і на клієнті при роботі з формою.
+  * autocomplete — визначає, чи може браузер автоматично заповнювати значення всіх елементів форми. Має всього два значення off і on.
+  * novalidate — атрибут-прапор, не має значення. Говорить браузеру не перевіряти валідність введених даних під час відправки форми. Якщо атрибут не вказано, виконується вбудована у браузер валідація.
+===== input =====
 форма вводу
 <code>
@@ Строка 228: / Строка 235: @@
   * __placeholder__ - підказка що потрібно вводити в інпут.Щоб змінити стилі саме плейс-холдера - то у нього є всевдоєлемент для css __.modal-input::placeholder__
   * __type__ - існує багато типів інпутів - для емаіл, для цифр або телефонів і т.д. Треба використовувати правильні типи
+  - text
+  - checkbox
+  - radio
   * __required__ - робить поле обовязкове для заповнення
   * __maxlenght__ - вказує максимальну кількість символів
   * __value__ - вже заповнює цією інформацією інпути
+  * __step="0.5"__ - дає можливість вводити цифри з кроком
 ===== label =====
@@ Строка 236: / Строка 248: @@
 <code>
 <label for="user-name">name</label>
+<input
+id: "user-name" />
+</code>
+<code>
+<form>
+  <label for="username">Username</label>
+  <input type="text" name="username" id="username" />
+  <button type="submit">Submit feedback</button>
+</form>
+</code>
+===== placeholder =====
+дозволяє відображати текст-підказку про дані, які необхідно ввести в поле. Текст-підказка відображається, коли елемент input пустий та зникає при введенні тексту від користувача.
+Атрибут placeholder можна використовувати в будь-якому елементі форми, де є текстове введення. Текст-підказка не замінює гарний label, а доповнює його прикладом на зразок даних, які слід вводити.
+<code>
+<form>
+  <label>
+    Username
+    <input type="text" name="username" placeholder="Jacob Mercer" />
+  </label>
+  <button type="submit">Submit feedback</button>
+</form>
+</code>
+===== ::placeholder =====
+Для оформлення тексту підказки використовується псевдоелемент
+<code>
+input::placeholder {
+	color: teal;
+  font-weight: 700;
+}
+</code>
+Змінити стилі тексту підказки при наведенні миші або фокусі поля введення можна селекторами стану.
+<code>
+input:hover::placeholder,
+input:focus::placeholder {
+  color:orange;
+}
+</code>
+===== :placeholder-shown =====
+ застосовується залежно від видимості тексту-підказки та значення атрибута placeholder.
+Він дозволяє налаштовувати властивості поля вводу під час відображення тексту-підказки. Слід пам’ятати, що як тільки користувач ввів хоча б один символ, підказка зникає.
+</code>
+Змінити стилі тексту підказки при наведенні миші або фокусі поля введення можна селекторами стану.
+<code>
+input {
+  border: 1px solid orange;
+}
+input:placeholder-shown {
+  border-color: blue;
+}
+</code>
+===== :focus-within =====
+Застосовується до елемента, щойно він сам або елементи всередині нього отримують фокус. Це дозволяє застосувати стилі на:
+мітку
+форму
+окреме поле форми
+при взаємодії користувача з полями форми.
+<code>
+form:focus-within {
+  border-color: blue;
+}
+</code>
+===== textarea =====
+<code>
+<textarea name="" id="" cols="30" rows="10"></textarea>
+</code>
+  * __cols="30" rows="10"__ - вже краще видаляти
+  * між >< ніколи нічого не ставити
+===== select =====
+випадаюче меню (або, як його ще називають, комбобокс), що дозволяє вибрати одну з декількох опцій (варіантів відповідей).
+<code>
+<select name="size">
+  <option value="xs">Extra Small</option>
+  <option value="s">Small</option>
+  <option value="m" selected>Medium</option>
+  <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>