Улучшаем вид формы
Четверг, 26 августа 2010 г.Рубрика: Учебник CSS
Метки: css | улучшаем вид формы
Просмотров: 2056
Подписаться на комментарии по RSS
Допустим у нас есть форма:
<form method="post" action="script.php"> Имя<br /> <input type="text" name="login"/><br /><br /> Email<br /> <input type="text" name="email"/><br /><br /> Пароль<br /> <input type="password" name="pass"/><br /><br /> <input type="submit" name="submit" value="подписаться"/> </form>
Пока у нас форма не красивая, как хотелось бы.
Для начала создадим файл style.css, и подключим его в файле с формой, который пусть называется form.html:
<html> <head> <title>Учебник css</title> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <form method="post" action="script.php"> Имя<br /> <input type="text" name="login"/><br /><br /> Email<br /> <input type="text" name="email"/><br /><br /> Пароль<br /> <input type="password" name="pass"/><br /><br /> <input type="submit" name="submit" value="подписаться"/> </form> </body> </html>
Сразу же стоит пояснить, что стили мы будем прописывать при помощи классов.
Для начала создадим стиль для полей ввода:
При наведении на поле ввода, рамка будет менять свой цвет, цвет текста будет другой, и его стиль:
В файле style.css пропишем класс text, этот класс будет отвечать за стиль поля ввода:
.text {
font-family: sans-serif; /* Рубленый шрифт */
font-size: 0.75em; /* Размер шрифта */
color: #999999; /* Цвет текста в поле ввода */
border: 1px solid #cccccc; /* Задаём цвет рамки */
}
.text:hover {
border: 1px solid #0099ff; /* Задаём цвет рамки */
}
.text:focus {
border: 1px solid #0099ff; /* Задаём цвет рамки */
color: #000000; /* Цвет текста в поле ввода */
}
Будет такой эффект - при наведении на поле рамка меняет цвет, при написании текст чёрного цвета, если мы не трогаем поле, то цвет серый. Теперь пропишем классы в файле index.html:
<html> <head> <title>Учебник css</title> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <form method="post" action="script.php"> Имя<br /> <input type="text" name="login" class="text"/><br /><br /> Email<br /> <input type="text" name="email" class="text"/><br /><br /> Пароль<br /> <input type="password" name="pass class="text""/><br /><br /> <input type="submit" name="submit" value="подписаться"/> </form> </body> </html>
Теперь перед формой поставим тег tt, который сделает текст моноширным:
<html> <head> <title>Учебник css</title> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <tt> <form method="post" action="script.php"> Имя<br /> <input type="text" name="login" class="text"/><br /><br /> Email<br /> <input type="text" name="email" class="text"/><br /><br /> Пароль<br /> <input type="password" name="pass class="text""/><br /><br /> <input type="submit" name="submit" value="подписаться"/> </form> </tt> </body> </html>
Дальше следует выделить кнопку, зададим для неё стиль button:
.text {
font-family: sans-serif; /* Рубленый шрифт */
font-size: 0.75em; /* Размер шрифта */
color: #999999; /* Цвет текста в поле ввода */
border: 1px solid #cccccc; /* Задаём цвет рамки */
}
.text:hover {
border: 1px solid #0099ff; /* Задаём цвет рамки */
}
.text:focus {
border: 1px solid #0099ff; /* Задаём цвет рамки */
color: #000000; /* Цвет текста в поле ввода */
}
.button {
border: 1px solid #fafafa; /* Задаём цвет рамки */
background: #0099ff; /* Цвет фона кнопки */
font-weight: bold; /* Толщина текста */
font-family: sans-serif; /* Рубленый шрифт */
font-size: 0.80em; /* Размер шрифта */
color: #fafafa; /* Цвет текста кнопки */
}
У нас будет синяя кнопка с белой рамкой и белым текстом. Теперь дополним файл form.html, а именно пропишем класс для кнопки:
<html> <head> <title>Учебник css</title> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <tt> <form method="post" action="script.php"> Имя<br /> <input type="text" name="login" class="text"/><br /><br /> Email<br /> <input type="text" name="email" class="text"/><br /><br /> Пароль<br /> <input type="password" name="pass class="text""/><br /><br /> <input type="submit" name="submit" value="подписаться" class="button"/> </form> </tt> </body> </html>
И на конец, если Вы хотите чтобы форма выделялась, можно сделать вокруг неё рамку:
Для начала пропишем стиль в style.css:
.text {
font-family: sans-serif; /* Рубленый шрифт */
font-size: 0.75em; /* Размер шрифта */
color: #999999; /* Цвет текста в поле ввода */
border: 1px solid #cccccc; /* Задаём цвет рамки */
}
.text:hover {
border: 1px solid #0099ff; /* Задаём цвет рамки */
}
.text:focus {
border: 1px solid #0099ff; /* Задаём цвет рамки */
color: #000000; /* Цвет текста в поле ввода */
}
.button {
border: 1px solid #fafafa; /* Задаём цвет рамки */
background: #0099ff; /* Цвет фона кнопки */
font-weight: bold; /* Толщина текста */
font-family: sans-serif; /* Рубленый шрифт */
font-size: 0.80em; /* Размер шрифта */
color: #fafafa; /* Цвет текста кнопки */
}
.form {
border: 1px solid #0099ff; /* Задаём рамку */
padding: 20px; /* Внутренний отступ */
}
И в файле form.html сделаем класс для формы:
<html> <head> <title>Учебник css</title> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <tt> <form method="post" action="script.php" class="form"> Имя<br /> <input type="text" name="login" class="text"/><br /><br /> Email<br /> <input type="text" name="email" class="text"/><br /><br /> Пароль<br /> <input type="password" name="pass class="text""/><br /><br /> <input type="submit" name="submit" value="подписаться" class="button"/> </form> </tt> </body> </html>
Поделиться...
Оставьте свой комментарий!
