Красивые css input (поля ввода). Ширина поля ввода не должна быть больше максимальной длины строки
Данная статья посвященна тому, как с помощью одного лишь css и без использования скриптов научится создавать красивые поля ввода , поля выбора (input,select). Для этого нам понадобится не только знания css, но и изображения, которые будут служить фоном полей. К сожалению, на чистом css пока еще невозможно делать такие вещи как закругление углов, поэтому нам остается два выбора: либо прибегать к использованию скриптов, либо пытатся сделать это при помощи css и фоновых изображений. У каждого способа конечно же есть свои недостатки и преймущества. Так как данная статья не о скриптах, мы на них и не будем останавливатся, детально рассмотрим метод с использованием css, для которого мы можем определить пусть не все, но многие преймущества и недостатки.
Недостатки:Наверно самым большим недостатком использования фона в качестве оформления поля ввода является его непрактичность. В нынешнее время большинство сайтов в сети интернет используют cms, в которых все поля ввода генерируются без участия человека, веб-мастеру доступен лишь css для установки стилей элементов. Поэтому очень часто бывает просто невозможно использовать дополнительные контейнеры (div), чтоб создать так называемую css обвязку для . Выходов из этой ситуации несколько: можно отказатся от красивых css input и select и для оформления использовать стандартные css свойства, можно указать одинаковую фиксированную ширину и высоту для всех css input и select, тогда можно использовать одно изображение для оформления, а можно использовать в связке с кнопкой ввода, что немного развяжет нам руки и позволит сделать красивые, относительно эластичные, поля ввода. Почему я их назвал "относительно эластичные", Вы поймете дальше, при рассмотрении примеров.
Преймущества:Преймущество у этого способа одно, но самое главное - это позволит нам избежать использования скриптов для оформления.
Создавать красивый мы будем с помощью следующего изображения:
А для создания формы поиска мы используем это изображение:
Красивый css input без скриптов
Первым шагом на пути к красивому и оригинальному input у нас будет установка базовых значений css стилей...width
:
206px
;
height
:
24px
;
border
:
none
;
background
:
;
Как видите, мы указали основные css стили для нашего input . Обязательно нужно установить ширину и высоту равными размерам фонового изображения. А также мы обнулили значение свойства border, так как по умолчанию у всех полей ввода установлена граница border. Ну и конечно же указали путь к изображению, которое будет использоватся в качестве фона для . Посмотрим, что из этого получилось:
Выглядит неплохо, правда? А попробуйте набрать текст в поле. Как видите выглядит не очень. Поэтому второе, что мы сделаем - это установим свойства для шрифта и внутренние отступы для текста от границ input .
font-size
:
12px
;
line-height
:
normal
;
color
:
#A7ADB6
;
padding
:
4px 10px 4px 10px
;
border
:
none
;
width
:
186px
;
height
:
24px
;
background
:
url("/images/sample_input.gif") 0 0 no-repeat
;
Вот теперь, если ввести текст, то все выглядит хорошо. Как Вы могли заметить, по сравнению с первым вариантом css для input , изменились значения ширины и высоты. Так как мы применили внутренние отступы (padding) для поля ввода , к ширине и высоте input автоматически прибавились значения указанные в свойстве padding, поэтому мы уменьшили размеры, чтоб сумма их стала такой же как и раньше.
Хочу повторить, что этот способ подходит, если все поля ввода, для которых он применяется, будут одинаковых размеров.
Если же на сайте ширина input
будет изменятся динамически, то этот способ не подходит.
Эластичный красивый css input
Если на сайте есть возможность "обвязать" input контейнерами div, то с его красивым оформлением проблем вообще не возникает. Единственная большая проблема - это вес страницы, так как для каждого поля ввода прийдется использовать до 8 контейнеров div. Почему до 8? - потому, что для самой сложной css обвязки необходимо максимум 8 слоев.
На нашем сайте существует статьи, в которых подробно описываются способы создания css обвязки, поэтому в данной статье мы на этом останавливатся подробно не будем, Вы можете самостоятельно ознакомится с этими статьями: Создание простой css обвязки блока. , Создание css обвязки блока на градиентном фоне. . Я лишь покажу, как применить это в случае с полями ввода.
Изображения для эластичного css input
Для того, чтоб сделать эластичное поле ввода , необходимо разрезать представленное выше изображения для фона на 3 части:Стили для обвязки css input
Fill-input{
background
:
url("/images/sample_input_02.gif") 0 0 repeat-x
;
width
:
100%
;
border
:
none
;
height
:
24px
;
padding
:
4px 0
;
.left-input{
background
:
url("/images/sample_input_01.gif") left top no-repeat
;
width
:
50%
;
.right-input{
background
:
background:url("/images/sample_input_03.gif") right top no-repeat
;
padding
:
0 14px 0 16px
;
.right-input input{
font-family
:
Arial, Helvetica, sans-serif
;
font-size
:
12px
;
line-height
:
normal
;
color
:
#A7ADB6
;
padding
:
0 0 0 10px
;
border
:
none
;
width
:
95%
;
height
:
16px
;
background
:
none
;
Примечание:
В приципе все должно быть понятно, но хотелось бы остановится на некоторых моментах:
Fill-input {width:50%} - это свойство указывает, какой будет ширина нашего input . Естественно можно использовать как точные значения, так и значения в других доступных измерениях.
Right-input input {width:95%} - так как для отступа слева от обвязки используется padding слева, то ширину равную 100% использовать нельзя, поэтому для отступа справа мы установили ширину равную 95%.
Приведенный выше способ является кроссбразуерным и очень удобным, но, как Вы могли уже убедится, требует несколько дополнительных контейнеров, а это не всегда возможно.
Эластичная форма поиска
Последний способ, из представленных мной, заключается в использовании двух элементов формы: поля ввода и графической кнопки. В качестве примера будет использоватся следующее изображение, которое будет применяться для оформления будущей формы:Разрезаем изображение на составные части
В первую очередь нам необходимо разрезать исходное изображение на 2 составные части. При чем левую часть необходимо удленить, полученная ширина будет максимальной шириной поля ввода. В итоге мы получим следующие изображения:Хочу заметить, что удленения изображения не приведет к сильному росту размера, так как используется формат.gif, у которого есть свойство сжимать размер, если в изображении есть повторяющиеся части.
Думаю, что многим верстальщикам (и не только) приходилось верстать текстовые поля (), задавая им произвольные размеры. Но как сделать данный элемент резиновым и удовлетворить условиям:
- Возможность установки любых горизонтальных и вертикальных отступов у текста;
- Элемент должен занимать весь контейнер, в который он помещен;
- Клик мышью в любое место текстового поля устанавливает в нем курсор.
Ответ достаточно прост и решается следующим методом:
Для начала, надо понять, что происходит с input-элементом при выставлении его ширины в 100% и добавления слева и справа отступов для текста.Согласно стандартам CSS (а в данном случае их поддерживают все браузеры), результирующая ширина элемента input, при отсутствии границ (border ) и внешних отступов полей (margin ), будет равна:
width = width + padding-left + padding-right
Т.е. она будет больше на величину внутренних горизонтальных отступов, и получившийся при этом элемент будет выступать за отведенную для него область.
Чтобы итоговая ширина была равна 100%, можно использовать систему из двух контейнеров:
Каждый контейнер выполняет свою роль:
- input-width – этот контейнер задает результирующую ширину текстового поля;
- width-setter – этот контейнер задает ширину input-элемента за вычетом горизонтальных внутренних отступов.
Input-width {
height:23px;
border:1px solid #999;
background:#fff;
}
.width-setter {
height:23px;
margin:0 9px;
}
.width-setter input {
width:100%;
height:14px;
padding:4px 9px 5px;
margin:0;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
line-height:14px;
color:#000;
border:0 none;
background:#9C6;
}
Пример 1
Из стилей получается, что элемент input-width
задает ширину, которую должно было занимать текстовое поле. Элемент width-setter
задает ширину input-элемента меньше на горизонтальные внутренние отступы. Стоит заметить, что его внешние отступы поля (margin
) должны быть равны padding-left
и padding-right
для элемента input.
При таком описании input-элемент будет выступать из width-setter
на величину своих горизонтальных отступов (padding
), а в IE6 - растягивать всех «родителей» под собственные размеры (пример 1). Также в браузерах IE6-7 input-элемент имеет отступы, которые нельзя убрать, обнуляя свойство margin
. Чтобы изменить такое расположение, надо сдвинуть текстовое поле влево, на размер левого отступа (padding-left
). Можно это осуществить через position:relative, но при этом в IE6 останется растянутым под ширину текстового поля input контейнер width-setter
. Для устранения растяжения надо сделать так, чтобы элемент не мог влиять на размеры своего родителя, задав, например, ему position:absolute
.
Опишем по-новому исходный набор контейнеров:
Input-width {
height:23px;
border:1px solid #999;
background:#fff;
}
.width-setter {
height:23px;
margin:0 9px;
position:relative;
}
.width-setter input {
width:100%;
height:14px;
padding:4px 9px 5px;
margin:0;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
line-height:14px;
color:#000;
border:0 none;
background:#9C6;
position:absolute;
left:-9px;
top:0;
}
Пример 2
В итоге, при применении таких стилей выполняются поставленные в начале задачи. Текстовое поле получилось с заданными отступами резиновым и кликабельным в любом его месте.
Чтобы задать конкретную ширину итоговому элементу, необходимо лишь прописать свойство width
для контейнера input-width
.
Примечание . Приведенный метод реализации резинового текстового поля проверен на Doctype: HTML 4.01, XHTML 1.0 и HTML (HTML 5) - и имеет кроссбраузерность: IE6-8, Opera 9+, FF 2.0+, Safary 2.0+, Chrome. При отсутствии Doctype кроссбраузерная работоспособность метода не гарантирована.
Думаю, что многим верстальщикам (и не только) приходилось верстать текстовые поля (), задавая им произвольные размеры. Но как сделать данный элемент резиновым и удовлетворить условиям:
- Возможность установки любых горизонтальных и вертикальных отступов у текста;
- Элемент должен занимать весь контейнер, в который он помещен;
- Клик мышью в любое место текстового поля устанавливает в нем курсор.
Ответ достаточно прост и решается следующим методом:
Для начала, надо понять, что происходит с input-элементом при выставлении его ширины в 100% и добавления слева и справа отступов для текста.Согласно стандартам CSS (а в данном случае их поддерживают все браузеры), результирующая ширина элемента input, при отсутствии границ (border ) и внешних отступов полей (margin ), будет равна:
width = width + padding-left + padding-right
Т.е. она будет больше на величину внутренних горизонтальных отступов, и получившийся при этом элемент будет выступать за отведенную для него область.
Чтобы итоговая ширина была равна 100%, можно использовать систему из двух контейнеров:
Каждый контейнер выполняет свою роль:
- input-width – этот контейнер задает результирующую ширину текстового поля;
- width-setter – этот контейнер задает ширину input-элемента за вычетом горизонтальных внутренних отступов.
Input-width {
height:23px;
border:1px solid #999;
background:#fff;
}
.width-setter {
height:23px;
margin:0 9px;
}
.width-setter input {
width:100%;
height:14px;
padding:4px 9px 5px;
margin:0;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
line-height:14px;
color:#000;
border:0 none;
background:#9C6;
}
Пример 1
Из стилей получается, что элемент input-width
задает ширину, которую должно было занимать текстовое поле. Элемент width-setter
задает ширину input-элемента меньше на горизонтальные внутренние отступы. Стоит заметить, что его внешние отступы поля (margin
) должны быть равны padding-left
и padding-right
для элемента input.
При таком описании input-элемент будет выступать из width-setter
на величину своих горизонтальных отступов (padding
), а в IE6 - растягивать всех «родителей» под собственные размеры (пример 1). Также в браузерах IE6-7 input-элемент имеет отступы, которые нельзя убрать, обнуляя свойство margin
. Чтобы изменить такое расположение, надо сдвинуть текстовое поле влево, на размер левого отступа (padding-left
). Можно это осуществить через position:relative, но при этом в IE6 останется растянутым под ширину текстового поля input контейнер width-setter
. Для устранения растяжения надо сделать так, чтобы элемент не мог влиять на размеры своего родителя, задав, например, ему position:absolute
.
Опишем по-новому исходный набор контейнеров:
Input-width {
height:23px;
border:1px solid #999;
background:#fff;
}
.width-setter {
height:23px;
margin:0 9px;
position:relative;
}
.width-setter input {
width:100%;
height:14px;
padding:4px 9px 5px;
margin:0;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
line-height:14px;
color:#000;
border:0 none;
background:#9C6;
position:absolute;
left:-9px;
top:0;
}
Пример 2
В итоге, при применении таких стилей выполняются поставленные в начале задачи. Текстовое поле получилось с заданными отступами резиновым и кликабельным в любом его месте.
Чтобы задать конкретную ширину итоговому элементу, необходимо лишь прописать свойство width
для контейнера input-width
.
Примечание . Приведенный метод реализации резинового текстового поля проверен на Doctype: HTML 4.01, XHTML 1.0 и HTML (HTML 5) - и имеет кроссбраузерность: IE6-8, Opera 9+, FF 2.0+, Safary 2.0+, Chrome. При отсутствии Doctype кроссбраузерная работоспособность метода не гарантирована.
В саму оболочку HTML-формы между тегами вставляются кнопки для отправки или очищения данных, кнопки для подтверждения выбора, переключатели, выпадающие списки и поля для ввода данных, последними как раз займемся сейчас.
Тег
обозначает поле для ввода текста, этот тег может принимать следующие атрибуты:
результат:
type
атрибут тега input, который указывает тип поля, в данном случае он не обязателен,
с точки зрения спецификации по HTML это значение(text) по умолчанию, но лично я советую его вставлять всегда.
name
это очень важный атрибут и является обязательным!!! Он является кодификатором данного поля, сценарии как раз
и ждут имена полей с каким-то значением. Имя этого атрибута может начинаться только с латинской буквы и заканчиваться ними,
между буквами может использоваться дефис.
value
атрибут который обозначает значение поля, или точнее значение атрибута name
,
эти атрибуты всегда отправляются в сценарий парой, name=value
или login=ваш_логин. Этот атрибут не является обязательным,
и вставляется только для того что-бы в поле отображался какой либо текст, в моем примере введите логин
.
size
этот атрибут не является обязательным, и устанавливает только количество символов для отображения, в моем примере 20, а ввести можно и 1000, но
отображаться будут только 20. Кстати 20 задавать нет смысла т.к. это значение по умолчанию, используйте этот атрибут если вам нужно больше или меньше 20 символов
для отображения.
maxlength
этот атрибут служит для ограничение символов для ввода, попробуйте в
моем примере стереть текст введите логин
и набрать больше 5, и у вас это не получится!!!
Представите что кто-то скопирует текст какой либо книги и вставит в поле где должен быть логин, это может круто увеличить нагрузку на ваш сервер, а с этим ограничителем у этого
чудо-посетителя ничего не получится!!! Ограничивать 5 символами я вам вообще не рекомендую, желательно чтобы это значение было порядка 32 или даже 64!!!
Поле для ввода паролей
type="password"
name="password" value="введите пароль" size="20" maxlength="32">
результат:
Все те же атрибуты за исключением значения "password" для атрибута type
. Это поле служит для ввода
паролей или прочего текста который не должен видеть посторонний глаз.
Скрытое поле:
type="hidden"
name="partner" value="идентификатор">
Это поле служит для отправки скрытых данных, Например, вы зарегистрировались на каком-то сайте по обмену эл.валют, как партнер и собираетесь
немного заработать, для этого вы получаете партнерский код и ставите его у себя на сайте, а в скрытое поле ставите свой идентификатор(номер партнера)
и после того как пользователь вашего сайта выберет направление перевода и нажмет кнопку "обменять" он вместе этими даными отправит ваш идентификатор и
вы срубите пару копеек с этой операции. Это не единственная возможность для скрытого поля.
Поле для загрузки файла:
type="file"
name="upload_file" size="50" >
Результат:
При помощи данного поля можно загрузить почти любой тип файла, картинки, архивы, музыку, видео и прочие. Если
вы в форме используете это поле, то занчение атрибута enctype
в теге form
должно быть "multipart/form-data"
,
чтобы браузер не кодировал, а сервер на котором лежит скрипт(сценарий) не декодировал эти файлы, т.к это может просто разрушить их.
Поле для отправки комментария:
Текст по умолчанию
Результат: Текст по умолчанию
textarea
- это тег для поля, он является парным!!!
Атрибут name
вам уже известен.
rows
этот атрибут устанавливает количество строчек, в моем примере 4строки.
cols
а этот атрибут устанавливает количество букв в одной строке.
Это и все поля которые пользователь может заполнять самостоятельно, за исключением type="hidden" .
HTML-формы являются элементами управления, которые применяются для сбора информации от посетителей веб-сайта.
Веб-формы состоят из набора текстовых полей, кнопок, списков и других элементов управления, которые активизируются щелчком мыши. Технически формы передают данные от пользователя удаленному серверу.
Для получения и обработки данных форм используются языки веб-программирования, такие как PHP , Perl .
До появления HTML5 веб-формы представляли собой набор нескольких элементов , , завершающихся кнопкой . Для стилизации форм в разных браузерах приходилось прилагать немало усилий. Кроме того, формы требовали применения JavaScript для проверки введенных данных, а также были лишены специфических типов полей ввода для указания повседневной информации типа дат, адресов электронной почты и URL-адресов.
HTML5-формы решили большинство этих распространенных проблем благодаря наличию новых атрибутов, предоставив возможность изменять внешний вид элементов форм за счет CSS3 .
Рис. 1. Улучшенные веб-формы с помощью HTML5Создание HTML5-формы
1. Элемент
. Он не предусматривает ввод данных, так как является контейнером, удерживая вместе все элементы управления формы – поля . Атрибуты этого элемента содержат информацию, общую для всех полей формы, поэтому в одну форму нужно включать поля, объединенные логически.2. Группировка элементов формы
Элемент
предназначен для группировки элементов, связанных друг с другом, разделяя таким образом форму на логические фрагменты.Каждой группе элементов можно присвоить название с помощью элемента