Joomla! Україна

Як підсвітити форми, яку заповнює користувач, наприклад, відписуючи листа з контактної форми?
Для чого це потрібно?
На ці питання ми отримаємо відповідь, використовуючи CSS.

В CSS є правила для різних станів посилань, такі як: :link :visited :hover :active. Ці стани посилань відображають, підкреслюють, виділяють посилання. А для того, щоб виділити елемент на момент взаємодії користувача із ним використовується стан :focus.

Для прикладу ми візьмемо контактну форму, яка буде виглядати таким чином:

Демо версія

Ім'я:

Email:

Повідомлення:

Отже, ми бачимо, що поля підсвічуються світло жовтим кольором.

А тепер приведемо код для HTML та CSS:

Код для HTML:

<form>
    <p>Ім`я:<br />
    <input type="text" size="40"></p>

    <p>Email:<br />
    <input type="text" size="40"></p>

    <p>Повідомлення:<br />
    <textarea rows="5" name="comments" cols="45" wrap="virtual"></textarea></p>

    <p><input id="actualsubmit" type="submit" value="Надіслати"></p>
</form>

Код для CSS:

input:focus, textarea:focus {
	background-color: lightyellow;
}