Урок 15. Форми

Здрастуй, шановний читачу.

Це п`ятнадцятий урок вивчення CSS. У цьому уроці ви дізнаєтеся як працювати з елементами форми, а саме як задати фон для текстового поля і текстової області, а також як застосовувати інші властивості для різних елементів.

Перед вивченням даного уроку пройдіть попередні уроки:

Урок 1. Що таке CSS?
Урок 2. Базові селектори
Урок 3. Групові селектори і селектори нащадків
Урок 4. Псевдоселектори посилань
Урок 5. Шрифти
Урок 6. Оформлення тексту
Урок 7. Рамки
Урок 8. Оформлення списків
Урок 9. Спадкування
Урок 10. Блокова модель
Урок 11. Висота і ширина блоку
Урок 12. Конфлікти полів
Урок 13. Робота з зображеннями. Частина 1
Урок 13. Робота з зображеннями. Частина 2
Урок 14. Таблиці

Теорія та практика

Вивчаючи html ми створювали форми за допомогою тегів

Оформлення поля input

Для того щоб задати властивість для елемента форми нам необхідний селектор. Цим селектором можуть виступати такі теги як input(В цьому випадку як ви вже знаєте ми поставимо стиль для всіх input-ів), textarea або селектор class. Розглянемо на прикладі «для всіх полів input задамо фон блакитний, колір букв синій і рамку синього кольору». Для роботи візьмемо таку форму:

1234567891011121314151617

lt;htmlgt;lt;headgt;lt;titlegt; Головнаlt;/titlegt;lt;meta http-equiv="Content-Type" content="Text / html- charset = utf-8"gt;lt;link rel="Stylesheet" type="Text / css" href="Style.css"gt;lt;/headgt;lt;bodygt;lt;formgt;lt;pgt; Введіть Ваше ім`я:lt;/pgt;lt;input type="Text" name="Name" value="Ваше ім`я..." size="20" maxlength="15"gt;lt;pgt; Введіть Ваше прізвище:lt;/pgt;lt;input type="Text" name="Surname" value="Ваше прізвище..." size="20" maxlength="15"gt;lt;pgt; Розкажіть трохи про себе:lt;/pgt;lt;textarea name="Aboutyou" cols="40" rows="6"gt; lt;/textareagt;lt;/formgt;lt;/bodygt;lt;/htmlgt;

І для того щоб перетворити цю форму використовуємо наступний CSS код:

123456

input{background-color:# D3D5FF- / * Блакитний фон * /color:# 0007D3- / * Синій колір букв * /border:2px solid # 7A7DD6- / * Синя рамка в два пікселя * /padding:5px- / * Внутрішній відступ для тексту в 5 пікселів * /}

Як це виглядає в браузері:

Я думаю пояснювати все докладно немає необхідності. Але загострю лише увагу на моменті, де ми вказуємо селектор. Ми написали селектор «input» - а це значить що даний стиль застосується для всіх полів на сторінці. Якщо ви хочете задати якогось певного полю стиль, необхідно прописати йому в html атрибут class = "" і вписати властивість в CSS.

Оформлення поля textarea

Також ми можемо оформити по своєму бажанню текстову область - textarea. Як ви вже здогадалися це можна зробити також двома способами. При оформленні текстової області в цьому уроці ми скористаємося другим способом через атрибут class = "". Ми маємо html сторінку, яка була на початку уроку. Дамо для текстової області атрибут class = "niceText":

1

lt;textarea name="Aboutyou" class="NiceText" cols="40" rows="6"gt; lt;/textareagt;

Потім на фон встановимо зображення і виділимо текстову область синьою рамкою:

Відео: Зміна ФОРМИ АВТОРИЗАЦІЇ (1С Бітрікс). Урок 15 - створення сайту на Бітрікс

12345678910111213

input{background-color:# D3D5FF- / * Блакитний фон * /color:# 0007D3- / * Синій колір букв * /border:2px solid # 7A7DD6- / * Синя рамка в два пікселя * /padding:5px- / * Внутрішній відступ для тексту в 5 пікселів * /}.niceText{background-image:url(`About.jpg`)- / * Зображення для заднього фону * /background-repeat:no-repeat- / * Забороняємо повтор фонового зображення * /background-position:100% 100%- / * Зміщуємо його в правий нижній кут * /border:2px solid # 7A7DD6- / * Синя рамка в два пікселя * /}

Як це виглядає в браузері:

Подивитися прімерСкачать

Картинка замість кнопки input

І останнє що ми розглянемо в цьому уроці це зображення замість простої кнопки. Візьмемо наступний код html:

123456789101112131415161718

lt;htmlgt;lt;headgt;lt;titlegt; Головнаlt;/titlegt;lt;meta http-equiv="Content-Type" content="Text / html- charset = utf-8"gt;lt;link rel="Stylesheet" type="Text / css" href="Style.css"gt;lt;/headgt;lt;bodygt;lt;formgt;lt;pgt; Введіть Ваше ім`я:lt;/pgt;lt;input type="Text" class="TextInput" name="Name" value="Ваше ім`я..." size="20" maxlength="15"gt;lt;pgt; Введіть Ваше прізвище:lt;/pgt;lt;input type="Text" class="TextInput" name="Surname" value="Ваше прізвище..." size="20" maxlength="15"gt;lt;pgt; Розкажіть трохи про себе:lt;/pgt;lt;textarea name="Aboutyou" cols="40" rows="6"gt; lt;/textareagt;lt;div class="SendA"gt; lt;input type="Image" name="Submit" src="Send.jpg"gt; lt;/divgt;lt;/formgt;lt;/bodygt;lt;/htmlgt;

І застосуємо наступні властивості CSS:

Відео: Blender Урок 15 Ключі форм заважав

1234567891011121314151617

.textInput{background-color:# D3D5FF- / * Блакитний фон * /color:# 0007D3- / * Синій колір букв * /border:2px solid # 7A7DD6- / * Синя рамка в два пікселя * /padding:5px- / * Внутрішній відступ для тексту в 5 пікселів * /}.niceText{background-image:url(`About.jpg`)- / * Зображення для заднього фону * /background-repeat:no-repeat- / * Забороняємо повтор фонового зображення * /background-position:100% 100%- / * Зміщуємо їх у правий нижній кут * /border:2px solid # 7A7DD6- / * Синя рамка в два пікселя * /}.sendA{margin:20px 0 0 20px- / * Відступ знизу і зліва для кнопки * /}

Все що ми змінили це кожному input-у додали атрибут class = "textInput". А в кінці замість звичайної кнопки ми вставили input з атрибутами type = "image" name = "submit" src = "send.jpg".

type = "image" - визначає що у нас буде зображення замість кнопки;

name = "submit" - ім`я кнопки;

src = "send.jpg" - шлях де розташоване зображення для кнопки.

Як це виглядає в браузері:

Подивитися прімерСкачать

На цьому я закінчую наш урок. Я впевнений що це для вас нескладно і ви швидко зрозуміли що до чого. Тому поекспериментуйте і рухайтеся до наступного уроку!

Більше практикуйтеся!