Лого SiteHere.ru

Урок 15. Формы

Урок 15. Формы

Здравствуй, уважаемый читатель.

Это пятнадцатый урок изучения CSS. В этом уроке вы узнаете как работать с элементами формы, а именно как задать фон для текстового поля и текстовой области, а также как применять другие свойства для разных элементов.


Перед изучением данного урока пройдите предыдущие уроки:


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

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

Изучая html мы создавали формы с помощью тегов <form>, а внутри создавали необходимое количество <input> и <textarea>.

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>
    <title>Главная</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <form>
        <p>Введите Ваше имя:</p>
        <input type="text" name="name" value="Ваше имя..." size="20" maxlength="15">
        <p>Введите Вашу фамилию:</p>
        <input type="text" name="surname" value="Ваша фамилия..." size="20" maxlength="15">
        <p>Расскажите немного о себе:</p>
        <textarea name="aboutyou" cols="40" rows="6"></textarea>
    </form>
</body>
</html>

И для того чтобы преобразить данную форму используем следующий CSS код:

1
2
3
4
5
6
input{
    background-color:#D3D5FF; /* голубой фон */
    color:#0007D3; /* синий цвет букв */
    border:2px solid #7A7DD6; /* синяя рамка в два пикселя */
    padding:5px; /* внутренний отступ для текста в 5 пикселей */
}

Как это выглядит в браузере:

CSS для input

Я думаю объяснять всё подробно нет необходимости. Но заострю лишь внимание на моменте, где мы указываем селектор. Мы написали селектор «input» — а это значит что данный стиль применится для всех полей на странице. Если вы хотите задать какому-то определенному полю стиль, необходимо прописать ему в html атрибут class=" " и вписать свойство в CSS.


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

Также мы можем оформить по своему желанию текстовую область — textarea. Как вы уже догадались это можно сделать также двумя способами. При оформлении текстовой области в этом уроке мы воспользуемся вторым способом через атрибут class=" ". Мы имеем html страницу, которая была в начале урока. Присвоим для текстовой области атрибут class="niceText":

1
<textarea name="aboutyou" class="niceText" cols="40" rows="6"></textarea>

Затем на фон установим изображение и выделим текстовую область синей рамкой:

1
2
3
4
5
6
7
8
9
10
11
12
13
input{
    background-color:#D3D5FF; /* голубой фон */
    color:#0007D3; /* синий цвет букв */
    border:2px solid #7A7DD6; /* синяя рамка в два пикселя */
    padding:5px; /* внутренний отступ для текста в 5 пикселей */
}
 
.niceText{
    background-image:url('about.png'); /* изображение для заднего фона */
    background-repeat:no-repeat; /* запрещаем повтор фонового изображения */
    background-position:100% 100%; /* смещаем его в правый нижний угол */
    border:2px solid #7A7DD6; /* синяя рамка в два пикселя */
}

Как это выглядит в браузере:

Изображение для textarea

Посмотреть примерСкачать


Картинка вместо кнопки input

И последнее что мы рассмотрим в этом уроке это изображение вместо простой кнопки. Возьмем следующий код html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<head>
    <title>Главная</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <form>
        <p>Введите Ваше имя:</p>
        <input type="text" class="textInput" name="name" value="Ваше имя..." size="20" maxlength="15">
        <p>Введите Вашу фамилию:</p>
        <input type="text" class="textInput" name="surname" value="Ваша фамилия..." size="20" maxlength="15">
        <p>Расскажите немного о себе:</p>
        <textarea name="aboutyou" cols="40" rows="6"></textarea>
        <div class="sendA"><input type="image" name="submit" src="send.png"></div>
    </form>
</body>
</html>

И применим следующие свойства CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.textInput{
    background-color:#D3D5FF; /* голубой фон */
    color:#0007D3; /* синий цвет букв */
    border:2px solid #7A7DD6; /* синяя рамка в два пикселя */
    padding:5px; /* внутренний отступ для текста в 5 пикселей */
}
 
.niceText{
    background-image:url('about.png'); /* изображение для заднего фона */
    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.png".

type="image" — определяет что у нас будет изображение вместо кнопки;

name="submit" — имя кнопки;

src="send.png" — путь где расположено изображение для кнопки.


Как это выглядит в браузере:

Изображение вместо кнопки input

Посмотреть примерСкачать


На этом я заканчиваю наш урок. Я уверен что это для вас несложно и вы быстро поняли что к чему. Поэтому поэкспериментируйте и двигайтесь к следующему уроку!

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

1 комментарий к записи
  • Алексей

    Подскажите, а как задать размер кнопки?
    html

    css
    sendA{
    margin:20px 20px 20px 20px; /* отступ снизу и слева для кнопки */

    width: 10px;
    height: 10px;
    }

     

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *