Атрибут title тега <fieldset> — спливна підказка
Додає пояснювальний текст у вигляді підказки, яка відображається, коли курсор миші затримується на групі форми.
автор: с3с
Загальний опис
автор: NagarD
Синтаксис
<fieldset title="text">
Атрибут title може отримувати єдине значення:
-
text -
Пояснювальний текст.
автор: с3с
Переглядачі
| Переглядач | ||||||
|---|---|---|---|---|---|---|
| 1 | 1 | ≤4 | 15 | 12 | ≤11 |
| Переглядач | ||||
|---|---|---|---|---|
| 4.4 | 18 | 4 | ≤3.2 |
Приклади
+ запропонувати свій приклад у пісочниці
Наведіть курсор на кожну рамку: у першої підказка нативна й некерована, у другої — своя, зроблена на data-tip і псевдоелементі.
HTML
<form>
<fieldset title="Адресу побачить лише кур'єр">
<legend>Доставка — нативний title</legend>
<label>Місто <input name="city"></label>
</fieldset>
<fieldset class="tip" data-tip="Адресу побачить лише кур'єр">
<legend>Доставка — підказка на CSS</legend>
<label>Місто <input name="city2"></label>
</fieldset>
</form>
<p class="hint">Наведіть курсор на кожну рамку.</p>
CSS
fieldset { border: 1px solid #94a3b8; margin-bottom: 22px; max-width: 320px; }
.tip { position: relative; }
.tip:hover::after,
.tip:focus-within::after {
content: attr(data-tip);
position: absolute;
left: 8px;
bottom: -14px;
padding: 2px 8px;
border-radius: 4px;
background: #1e293b;
color: #fff;
font-size: 13px;
white-space: nowrap;
}
.hint { font-size: 13px; color: #475569; }
Найпростіший приклад використання HTML атрибута title теґа <fieldset>
<p>Використання атрибуту 'title'</p>
<p><b>Наведіть мишку на форму</b></p>
<form>
<fieldset title="Анкета для користувачів">
<legend>Форма для заповнення даних</legend>
<label>Ім'я:</label><br>
<input type="text" name="login"><br>
<label>Email:</label><br>
<input type="email" name="email"><br>
Чоловік <input type = "radio" name = "sex" value = "male" checked><br>
Жінка <input type = "radio" name = "sex" value = "female"> <br>
<label>Ваше повідомлення:</label><br>
<textarea name="messenger"></textarea>
<br>
<input type="submit" value="Увійти">
</fieldset>
</form>
Коментарі
Коментарів ще немає — будьте першим!