Web-mastering: портал вебмастеров (web-мастеров) о web-дизайне, web-программировании, раскрутке; статьи по веб-дизайну, веб-программированию для вебмастеров

Кнопка портала
вебмастеров

Оформление форм и таблиц

Менюшку можно применить как для навигации по своему сайту, так и для перехода на другие адреса.

<form><input type="hidden" name="select">
<SELECT NAME="sel"
onchange="top.location.href = this.options[this.selectedIndex].value;">
<option selected value="#">Выбор страницы</option>
<option VALUE="http://www.------">первый адрес</option>
<option VALUE="http://---------">второй адрес</option>
<option VALUE="http://www.---------"> третий адрес</option>
</select></form>

Однако, часто такие формы смотрятся довольно жутко. Для "Эксплорера" можно задать фоновый цвет формы и цвет текста. Добавляем:

<form><input type="hidden" name="select">
<SELECT NAME="sel"
onchange="top.location.href = this.options[this.selectedIndex].value;"
style="background:#FEFF00 ; color: #C00000; ">
<option selected value="#">Выбор страницы</option>
<option VALUE="http://www.------">первый адрес</option>
<option VALUE="http://---------">второй адрес</option>
<option VALUE="http://www.---------"> третий адрес</option>
</select></form>

Уже кое-что. Что можно сделать еще? Ну, например, текст можно сделать пожирнее, а размер формы уменьшить за счет уменьшения шрифта:

<form><input type="hidden" name="select">
<SELECT NAME="sel"
onchange="top.location.href = this.options[this.selectedIndex].value;"
style="background:#FEFF00 ; color: #C00000; font-weight: bold;font-size: 5px; ">
<option selected value="#">Выбор страницы</option>
<option VALUE="http://www.------">первый адрес</option>
<option VALUE="http://---------">второй адрес</option>
<option VALUE="http://www.---------"> третий адрес</option>
</select></form>

В итоге таких преобразований можно получить более подходящий для Вашего оформления элемент. Хотя пользователи "Нетскейпа" не увидят особого изменения. В Нетскейпе можно изменить размер формы.

в styl.css пишем:
.ss{ font-family: MS Sans Serif, tahoma, Verdana, Arial; FONT-SIZE: 5px; color:black}

<form CLASS="ss" ><input type="hidden" name="select" >
<SELECT NAME="sel"
onchange="top.location.href = this.options[this.selectedIndex].value;">
<option selected value="#">Выбор страницы</option>
<option VALUE="http://www.------">первый адрес</option>
<option VALUE="http://---------">второй адрес</option>
<option VALUE="http://www.---------"> третий адрес</option>
</select></form>

Как в Нетскейпе, видно? Оч. хор. Точно так-же оформляются кнопки и прочие формы. Хоть в Нетскейпе и не получится задать цвет, но уже получше. Изяшнее смотрится. Хотя не все так просто с Нетскейпом. Срабатывает не всегда и не везде. Текстовые строки и кнопки на такой CLASS всегда реагировали без проблем а вот SELECT... Специально для пользователей Нетскейпа! (странная фраза, двусмысленная какая-то) Обратите внимание - для Нетскейпа мы поместили CLASS="ss" сразу в тэге form: <form CLASS="ss"> Для селекта в Нетскаепе сложнее прописать размеры, так что для отображения и там и там в "приличном" виде можно попробовать вставить класс и после form и после select.

Для текстовых полей можно задать еще один интересный параметр— border.
Для этого введем еще один класс и пропишем ему рамочку:

.bb { border-top: 1px solid; border-left: 1px solid; border-bottom: 1px solid; border-right: 1px solid;}

Мы создали класс с параметрами рамок: толшина 1px, рамки в виде непрерывной линии - solid. В данном примере мы не назначили цвет рамочек, а можно и назначить:
.bb1 { border-top: 1px solid; border-left: 1px solid; border-bottom: 1px solid; border-right: 1px solid; border-color:red;}

Мы получили ту же рамочку, но с красным "бордером". Теперь можно немного уменьшить описание, ведь все рамочки у нас одинаковы - и верх и низ и боковые:
.bb2 { border: 2px solid; border-color:red;}

Вот она, родная... Для разнообразия немного толще сделали рамочку.
Остается вспомнить, что рамочки у таблиц описываются довольно разнообразно. Например, двойная рамка:
.bb3 { border: 3px double; border-color:red;}

Двойная рамочка... Скучновато... Чтобы такого придумать плохого? Чтоб обозревателю жизнь медом не казалась. А мы ему попробуем испортить настроение переменой красного на черный - пусть помнит, что жизнь коротка(особенно, если читаешь МК):
.bb4 { border: 3px double; border-color:black;}

<INPUT TYPE="TEXT" CLASS="bb3"
ONMOUSEOVER="this.className = 'bb4';"
ONMOUSEOUT="this.className = 'bb3';"
NAME="oo1" VALUE="проба формы"
Size="20" MAXLENGTH="20">

Теперь при наведении мышки цвет рамочки меняется с красного на черный, напоминая о конечности всего живого. :))) Страшно?

Источник: A-design studio http://mtk.on.ufanet.ru

Источник: http://www.izcity.com/

[an error occurred while processing this directive]

Оформление форм и таблиц

Источник: A-design studio http://mtk.on.ufanet.ru Источник: http://www.izcity.com/

Источник: http://www.izcity.com/

Источник: A-design studio http://mtk.on.ufanet.ru

Источник: http://www.izcity.com/