Как сделать формы на сайте

Наверное в Интернете теперь и не найдёшь сайт который бы не содержал каких либо форм, для регистрации, поиска, голосования и т.д. И красивое оформление этих форм и кнопок немаловажный момент в создании сайта. Именно этому посвящён данный урок в котором мы рассмотрим правильное и красивое оформление форм и кнопок средствами CSS.

И так начнём, для начала пишем простейшую форму:

<form> <span>Имя:</span> <input type="text" name="yourname" size="20"> <span>E-mail:</span> <input type="text" name="email" size="20"> <input type="button" value="Отправить"> </form>

И вот что мы получаем:

Довольно просто и неинтересно, но мы это изменим. Для начала давайте зададим точные размеры и сделаем фон и рамочку вокруг нашей формы:

<form style=" font: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #FF9900; font-weight:bold; width:460px; height: 30px; background-color: #0099CC; border: 3px; border-style:double; border-color: #ff9900; padding: 5px;">

border-style: double; - это стиль обводки, в данном случае двойной именно поэтому мы выставили параметр Border: 3px; конечно вы можете выбрать любой стиль обводки ну это уже другая тема… ну и background и border-color это цвета фона и рамки соответственно. font: Verdana, Arial, Helvetica, sans-serif; - здесь указываем шрифт, далее font-size: 12px; color: #FF9900; размер и цвет шрифта.

и в итоге получаем:

Идем дальше давайте теперь обработаем поля и кнопочку. Добавляем в оба поля следующий код:

style="border:1px; border-style:dashed; border-color:#ff9900;"

И редактируем кнопку:

<input name="button" type="button" value="Отправить" style="width: 100px; background: url(accept.png) no-repeat left; height: 20px; border: 1px; border-color:#ff9900; background-color:#0099CC; text-align: right; font-size: 12px; color: #ff9900; font-weight:bold; border-style:solid;">

Поясняю: background: url(accept.png) no-repeat left; - этот параметр указывает что фоновым рисунком будет файл accept.png, а no-repeat left; -означает, что он не будет повторятся и будет смещаться в лево.

Остальные параметры нам уже знакомы, ну и конечный результат будет выглядеть так:

И конечный код целиком:

<form style="font:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color: #FF9900; font-weight:bold; width:460px; height: 30px; background-color: #0099CC; border: 3px; border-style:double; border-color: #ff9900; padding: 5px;"> <span>Имя:</span> <input type="text" name="yourname" size="20" style="border:1px; border-style:dashed; border-color:#ff9900;"> <span>E-mail:</span> <input type="text" name="email" size="20" style="border:1px; border-style:dashed; border-color:#ff9900;"> <input name="button" type="button" value="Отправить" style="width: 100px; background: url(accept.png) no-repeat left; height: 20px; border: 1px; border-color:#ff9900; background-color:#0099CC; text-align: right; font-size: 12px; color: #ff9900; font-weight:bold; border-style:solid;"> </form>

Это простейший вариант адаптации форм под ваши нужды, но если вы его поймете то сможете внедрить любые формы как вам надо в любой дизайн!

Дата публикации:2009-03-11

Буду очень признателен, если вы поделитесь ссылкой на страницу со своими друзьями в социальных сетях.
Если у вас возникнут вопросы по теме пишите, надеюсь у вас все получиться, удачи вам и всего наилучшего!