HTML, формы и CSS (часть2 - CSS)


 HTML, формы и CSS (часть2 - CSS)

Доброго всем времени суток, и в этой статье я продолжаю разговор о формах но уже с точки зрения CSS. Сегодня я хочу вынести на ваше обозрение набор возможностей для оформления форм с помощью CSS. А так как лучше один раз увидеть чем сто раз услышать, то я хочу построить этот урок в форме (опять эти формы!): краткое описание => демонстрация => код выполнения. А для удаления избыточного текста на странице я буду указывать стили CSS в коде HTML.

И сначала я рассмотрю оставшиеся с прошлого раза теги  fieldset и legend и не упомянутый ранее тег label. Итак начнем!

Теги fieldset и legend


Fieldset позволяет вам нарисовать рамку вокруг формы. Имеет закрывающий тэг </fieldset>. Заголовок указывается в тэгах <legend></legend>. Основное назначение объекта – задавание различных стилей оформления:

input type="text" Введите имя:
input type="password" Введите пароль:


Код:
<div style="background: #55a1e0; padding:5px 10px;" > <fieldset style="background:yellow;"> <legend style="text-align:right; font: bold italic 24px serif; "> input type="text"</legend> Введите имя:<br> <input type="text" name="name" value="Введите имя" size="" maxlength="" /> </fieldset> <fieldset> <legend style="text-align:center; color:red; font-weight:900;"> input type="password"</legend> Введите пароль:<br> <input type="password" name="pass" value="pass" size="" maxlength="4" /> </fieldset> </div>

Тег label


Тег label  может использоваться для «прикрепления» к управляющим элементам формы информации.Другими словами можно изменять изменять значение переключателей и флажков при нажатии мышкой на текст рядом с ними. А еще, с помощью тега label можно устанавливать горячие клавиши и переходить на активный элемент подобно ссылкам.

Параметр for используется для связывания элемента формы и текста в теге label. Значение параметра for должно совпадать со значением параметра id связанного элемента. Вот собственно и вся премудрость.

Есть еще один параметр у тега label - accesskey  (горячие клавиши), но его я рассматривать не буду, так как корректно он работает только в браузере Internet Explorer и Safari. Если интересно - сами разберетесь!

input type="radio"
А здесь нет!
input type="checkbox"
То же самое и у checkbox
HTML и CSS (Поле при нажатии на текст не отмечается)

Код:
<div style="background: #55a1e0; padding:5px 10px;" > <fieldset style="background: #55a1e0; padding:5px 10px;"> <legend>input type="radio"</legend> <input name="radio" type="radio" id="label" /> <label for="label">Здесь при нажатии на текст поле становится отмеченным </label> <br> <input name="radio" type="radio"/> А здесь нет! </fieldset> <fieldset> <legend>input type="checkbox"</legend> <div> То же самое и у checkbox </div> <input type="checkbox" name="HTML и CSS" /> HTML и CSS (Поле при нажатии на текст не отмечается) <br> <input type="checkbox" name="PHP и MYSQL" id="check" /> <label for="check">PHP и MYSQL (А здесь отмечается)</label> </fieldset> </div>

Текстовые поля input


А вот где уже можно разгулятся в плане применения стилей CSS, так это в вопросе оформления текстовых полей, то есть элементов input и textarea. К этим элементам, могут быть применены те же самые стилевые свойства, что и к остальным html-элементам на веб-странице. Но довольно слов! Взгляните на пример, и вам все станет понятно!

Текстовые поля ввода




Код:
<div style="background: #55a1e0; padding:5px 10px;" > <fieldset style="background: #55a1e0; padding:5px 10px;"> <legend>Текстовые поля ввода</legend> <input type="text" size="50" value="css" style="text-align:center;background-color: #99ccff; color: black;font:normal italic 12px/14px fantasy;" /><br /><br /> <input type="password" size="35" value="password" style="border:2px solid gray; background-color: #c0c0c0;color:red " /><br /><br /> <textarea style="background-color: navy; border: black 2px solid;color: white;font: bold italic 120% serif; width:450px;height:100px"> Обратите внимание, что если текстовое поле textarea  должно иметь фиксированную ширину или высоту, то необходимо использовать css-свойства: width и height. Эти свойства позволяют задать размеры текстового поля с точностью до пиксела! </textarea> </div>

А вот еще несколько интерсных возможностей:

  • - выравнивание элементов формы с помощью cтилевого свойства float;
  • - применение псевдо-класса :focus к полям формы для выделения активного поля.


Код:
<style type="text/css"> textarea:focus, input:focus { border: 2px solid #900;} </style> <div style="background: #55a1e0; padding:5px 10px;" > <fieldset style="background: #55a1e0; padding:5px 10px;"> <p><input type="text" /> <label style="float: left;text-align: right; margin-right: 15px;width: 100px;">Выравниваем</label></p> <p><input type="text" /> <label style="float: left;text-align: right; margin-right: 15px;width: 100px;">поля</label></p> <p><input type="text" /> <label style="float: left;text-align: right; margin-right: 15px;width: 100px;" >формы</label></p> </fieldset> </div>

Вроде неплохо получилось, только есть один минус - текст подсказки не исчезает когда курсор ввода встает в поле ввода. Но эту проблему легко решить с помощью простого JavaScript. Однако это будет рассмотрено в следующей статье цикла о формах:"Обработка формы на JavaScript".

А на этом я считаю, что с HTML и CSS оформлением форм, мы разобрались. И напоследок - рисунок, который я готовил когда надеялся уместить в одну статью эти две темы.

HTML, формы и CSS

Автор: Сергей Зарубин

Дата: 2011-07-30

Колличество просмотров: 8668

Нравится

Комментарии к заметке:



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


Введите число с картинки:

captcha