таблица формы

 

Ниже приведены некоторые свойства, которого можно использовать для применения стилей к кнопкам подтверждения.

Этот пример основан на предыдущем, а кнопка подтверждения наследует набор стилей элемента

input

с предыдущей страницы.

 

 

 


Стилизация кнопок

 

<!DOCTYPE html>
<html>
<head>
<title>Применение стилей к кнопке подтверждения</title>
<style type="text/css">
input {
font-size: 120%;
color: #5a5854;
background-color: #f2f2f2;
border: 1px solid #bdbdbd;
border-radius: 5px;
padding: 5px 10px 5px 10px;
background-repeat: no-repeat;
background-position: 8px 9px;
display: block;
margin-bottom: 10px;}
input#submit {
color: #444444;
text-shadow: 0px 1px 1px #ffffff;
border-bottom: 2px solid #b2b2b2;
background-color: #b9e4e3;
background: -webkit-gradient (linear, left top, left bottom, from (#beeae9), to (#a8cfce));
background: -moz-linear-gradient (top, #beeae9, #a8cfce);
background: -o-linear-gradient (top, #beeae9, #a8cfce);
background: -ms-linear-gradient (top, #beeae9, #a8cfce);}
input#submit:hover {
color: #333333;
border: 1px solid #a4a4a4;
border-top: 2px solid #b2b2b2;
background-color: #a0dbc4;
background: -webkit-gradient (linear, left top, left bottom, from (#a8cfce), to (#beeae9));
background: -moz-linear-gradient (top, #a8cfce, #beeae9);
background: -o-linear-gradient (top, #a8cfce, #beeae9);
background: -ms-linear-gradient (top, #a8cfce, #beeae9);}
</style>
</head>
<body>
<form>
<input type="submit" value="Регистрация" id="submit" />
</form>
</body>
</html>

 

Рассылка

<!DOCTYPE html>
<html>
<head>
<title>Применение стилей к полям и подписям</title>
<style type="text/css">
* {
font-family: Arial, Verdana, sans-serif;
color: #665544;}
input {
border-bottom: 1px dotted #dcdcdc;
border-top: none;
border-right: none;
border-left: none;
padding: 5px;
width: 280px;
margin-bottom: 20px;}
input:focus {
border: 1px dotted #dcdcdc;
outline: none;}
input#submit {
color: #ffffff;
background-color: #665544;
border: none;
border-radius: 5px;
width: 80px;}
input#submit:hover {
color: #665544;
background-color: #efefef;}
fieldset {
width: 350px;
border: 1px solid #dcdcdc;
border-radius: 10px;
padding: 20px;
text-align: right;}
legend {
background-color: #efefef;
border: 1px solid #dcdcdc;
border-radius: 10px;
padding: 10px 20px;
text-align: left;
text-transform: uppercase;}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Рассылка</legend>
<label for="name">Имя: </label><input type="text" id="name" />
<label for="email">Email: </label><input type="text" id="email" />
<input type="submit" value="Подписка" id="submit" />
</fieldset>
</form>
</body>
</html>

Элемент формы

<!DOCTYPE html>
<html>
<head>
<title>Выравнивание элементов управления формой — Решение</title>
<style type="text/css">
body {
font-family: Arial, Verdana, sans-serif;}
div {
border-bottom: 1px solid #efefef;
margin: 10px;
padding-bottom: 10px;
width: 260px;}
.title {
float: left;
width: 100px;
text-align: right;
padding-right: 10px;}
.radio-buttons label {
float: none;}
.submit {
text-align: right;}
</style>
</head>
<body>
<form action="example.php" method="post">
<div>
<label for="name" class="title">Имя:</label>
<input type="text" id="name" name="name" />
</div>
<div>
<label for="email" class="title">Email:</label>
<input type="email" id="email" name="email" />
</div>
<div class="radio-buttons">
<span class="title">Пол:</span>
<input type="radio" name="gender" id="male" value="M" />
<label for="male">М</label>
<input type="radio" name="gender" id="female" value="F" />
<label for="female">Ж</label><br />
</div>
<div class="submit">
<input type="submit" value="Регистрация" id="submit" />
</div>
</form>
</body>
</html>
Понравилась статья? Поделиться с друзьями:
Блог Измайлова Павла
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: