Современное оформление форм с использованием CSS. Отправка (submit) формы после выбора файла с оформлением input

В статье представлено несколько трюков, которые вы, возможно, не знали и которые вы найдёте полезными в своих разработках.

1. Изображение в качестве фона, которое пропадает при вводе текста.

Вы можете добавить фоновое изображение также, как и в любой другой элемент. В этом случае стиль по умолчанию для textarea изменяется, а именно бордер толщиной в 1px изменяется на скошенную границу. Исправляется это явным указанием бордера.

Textarea { background: url(images/benice.png) center center no-repeat; border: 1px solid #888; }

Фоновое изображение может повлиять на читаемость текста. Поэтому фоновое изображение надо убирать при получении фокуса и возвращать его, если textarea осталась без текста. Например, используя jQuery это можно сделать таким образом:

$("textarea") .focus(function() { $(this).css("background", "none"); }) .blur(function() { if ($(this).value == "") { $(this).css("background", "url(images/benice.png) center center no-repeat"); } });

2. Placeholder в HTML5

В HTML5 появился новый атрибут, называемый placeholder . Значение этого атрибута показывается в текстовом элементе и исчезает при получении фокуса, а также в случае когда в элементе введён текст.

HTML5 placeholder поддерживается в следующих браузерах: Safari 5, Mobile Safari, Chrome 6, и Firefox 4 alpha.

3. Placeholder, HTML5 с поддержкой старых браузеров используя jQuery

Самый простой способ проверить поддерживается ли атрибут браузером это проверить с помощью javaScript:

Function elementSupportsAttribute(element, attribute) { var test = document.createElement(element); return (attribute in test); };

Затем можно написать код, который будет срабатывать если браузер не поддерживает атрибут placeholder .

If (!elementSupportsAttribute("textarea", "placeholder")) { // Если браузер не поддерживает атрибут, то выполняется код jQuery $("#example-three") .data("originalText", $("#example-three").text()) .css("color", "#999") .focus(function() { var $el = $(this); if (this.value == $el.data("originalText")) { this.value = ""; } }) .blur(function() { if (this.value == "") { this.value = $(this).data("originalText"); } }); } else { // Если же браузер поддерживает HTML5, то просто используем эту возможность $("#example-three") .attr("placeholder", $("#example-three").text()) .text(""); }

4. Удаляем обводку textarea

Браузеры на движках webkit, а также в FireFox 3.6, обводят textarea , когда он находится в фокусе. Удалить эту обводку можно используя css-свойство outline для webkit-браузеров. Для FireFox используется свойство -moz-appearance , либо можно просто установить элементу бордер или фон.

Textarea { outline: none; -moz-appearance: none; border: 1px solid #999; /* указание этого свойства также удалит обводку в FireFox */ }

5. Запрет изменения размера

Webkit-браузеры добавляют к textarea визуальный элемент в правом нижнем углу, который позволяет изменять размер текстовой области. Если вы хотите убрать эту возможность, то вам необходимо использовать следующее css-свойство:

Textarea { resize: none; }

6. Добавление возможности изменения размера

jQuery UI позволяет добавить возможность изменения размера для textarea. Это работает для всех браузеров, а для webkit-браузеров подменяет стандартное поведение. Для того, чтобы использовать эту возможность, необходимо подключить jquery.ui и написать следующий код:

$("textarea").resizable();

7. Изменение размера под содержимое

James Padolsey написал удобный jQuery-скрипт который позволяет автоматически изменять размер textarea под его содержимое. Похоже что этого плагина больше нет, но можно использовать например вот этот . Плагин содержит много настроек, но самый простой способ его использовать это:

$("textarea").autoResize();

8. Nowrap

Чтобы не переносить слова на новые строки, для всех элементов используется css-свойство white-space , которое не работает с textarea . Для textarea необходимо использовать атрибут wrap .

9. Удаляем скролл-бары в IE

IE показывает вертикальный скролл-бар для всех textarea . Вы можете их спрятать используя overflow: hidden , но в таком случае он не будет показываться при увеличении контента. Поэтому правильнее использовать следующий подход:

Textarea { overflow: auto; }

В этом случае скролл-бар не будет отображаться когда в textarea помещается весь текст, но выведется в случае необходимости.

Примеры к статье вы можете посмотреть .

Недавно столкнулся с интересной задачей: на странице нужно разместить пользовательскую форму, в которой было несколько полей для ввода данных и поле для выбора файла. Причем, кнопка выбора файла сделана именно как красивая кнопка, а не стандартный компонент input. А отправка этой формы, в соответствии с техническим заданием, должна выполняться сразу после выбора файла. В итоге должна получится подобная пользовательская форма:

Имя файла:

Загрузить файл

Здесь можно выделить две отдельные задачи. Первая – выполнить отправку формы сразу после выбора файла. Вторая – оформить компонент выбора файла в соответствии с дизайном в виде нестандартной кнопки.

Форма, для которой реализуем все описанные задачи, имеет следующий исходный код:

Имя файла:

и в начале выглядит так:

Имя файла:

Submit формы после выбора файла в input

Подобная задача рассматривалась в статье о перезагрузке и обновлении страницы выбором в select . Там так же использовалось событие компонента формы для отправки формы с помощью скрипта.

Выполнить отправку формы можно с помощью jQuery кода:

$("#ID_формы" ).submit();

Этот вызов нужно привязать к событию change (обновлению) компонента выбора файла input. В итоге код jQuery для решения нашей формы должен быть следующий:

jQuery(function(){
$("#myfile" ).change(function(){ // событие выбора файла
$("#myform" ).submit(); // отправка формы
});
});

Собственное оформление input средствами CSS

Сложность этой задачи заключается в отсутствии стандартов оформления компонента. В различных браузерах он отображается его по-разному. А CSS стилей, определяющих его внешний вид не достаточно, чтобы оформить его.

Самый простой способ для решения этой задачи будет скрыть сам компонент, а вызов его выполнять по нажатию на другой элемент. При этом возникает вопрос только о том, как связать нажатие на "пользовательскую кнопку" с вызовом стандартного события выбора файла.

Одним из вариантов может быть снова применение jQuery. Но, на мой взгляд, если есть возможность обойтись без дополнительных скриптов, а использовать только теги HTML, то стоит делать без скриптов. И здесь нам на помощь приходит тег HTML label. В статье "Переключение radio кнопки и checkbox нажатием на подпись в HTML" уже описывалось его применение.

Здесь, подобным образом, тег компонента выбора файла обрамляется тегом label. В label так же добавим текст "Загрузить файл"

Имя файла:

Загрузить файл

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

#myform p {
text-align : center;
margin : 10px 0;
}
#myform #myfile {
display : none;
}
#myform #mylabel {
background-color : #fd685b;
padding : 10px 20px;
color : #fff;
cursor : pointer;
}

Познакомьтесь с новыми и старыми селекторами, которые вы можете использовать для оформления input-элементов формы в зависимости от того, являются ли поля обязательными, правильно заполненными и т. д., – предлагает Джонатан Харрел. Представляем вам адаптированный перевод его статьи .

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

Посмотреть пример их использования можно .

:placeholder-shown

Первый селектор относительно новый и еще не полностью поддерживается браузерами. Но представляется, что его можно будет довольно легко использовать в качестве улучшения в будущем. Этот селектор дает нам возможность определять, является ли плейсхолдер в настоящее время видимым для пользователя. Это может пригодиться если мы хотим динамически скрывать и показывать метку, связанную с input.

Здесь я скрываю метку, пока пользователь не начнет печатать в input, скрыв плейсхолдер. Для появления метки я использую красивый эффект перехода. Запомните, чтобы это работало, label должен идти ПОСЛЕ input .

Enter some text .form-group { position: relative; padding-top: 1.5rem; } label { position: absolute; top: 0; font-size: var(--font-size-small); opacity: 1; transform: translateY(0); transition: all 0.2s ease-out; } input:placeholder-shown + label { opacity: 0; transform: translateY(1rem); }

Используйте этот селектор чтобы показать, что поле имеет атрибут . Здесь я использую пустой span с классом help-text и помещаю некое содержимое динамически, с помощью псевдоэлемента ::before . Собственно, это может быть сделано с JavaScript, но я включил этот пример чтобы показать метод с использованием чистого CSS.

Required input input:required + .help-text::before { content: "*Required"; }

Если сравнивать с required, этот селектор действует противоположным образом. Я опять использую пустой span с классом help-text для показа какого-то возможного текста, если отсутствует атрибут .

Input:optional + .help-text::before { content: "*Optional"; }

Этот должен быть знаком большинству из вас, но важно о нем помнить. Показывать, заблокировано ли поле для пользователя, очень важно.

&:disabled { border-color: var(--gray-lighter); background-color: var(--gray-lightest); color: var(--gray-light); }

:read-only

Input с атрибутом readonly должен передавать немного другое значение, чем . Хорошо, что для этой цели есть такой селектор.

input:read-only { border-color: var(--gray-lighter); color: var(--gray); cursor: not-allowed; }

:valid

Хотя большая часть проверки формы будет осуществляться с помощью JavaScript, мы можем воспользоваться преимуществом HTML5 как для проверки формы, так и для оформления поля ввода. Этот селектор дает нам возможность придать стили любому input, который в настоящее время проходит встроенные правила проверки браузера.

Здесь я пишу код для svg чтобы, используя свойство background-image , отображать галочку в поле ввода.

Input:valid { border-color: var(--color-primary); background-image: url("data:image/svg+xml,%3Csvg width="45px" height="34px" viewBox="0 0 45 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"%3E%3Cg stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"%3E%3Cg transform="translate%28-56.000000, -59.000000%29" fill="%232EEC96"%3E%3Cpolygon points="70.1468531 85.8671329 97.013986 59 100.58042 62.5664336 70.1468531 93 56 78.8531469 59.5664336 75.2867133"%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A"); }

Этот селектор проверяет, является ли input НЕ проходящим встроенные правила проверки браузера (например, если введенный адрес электронной почты не содержит настоящего email).

И снова я добавляю код для svg чтобы отображать «Х» в поле ввода.

Input:invalid { border-color: var(--color-error); background-image: url("data:image/svg+xml,%3Csvg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"%3E%3Cg stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"%3E%3Cg transform="translate%28-128.000000, -59.000000%29" fill="%23F44336"%3E%3Cpolygon points="157.848404 61.9920213 145.980053 73.8603723 157.848404 85.7287234 154.856383 88.7207447 142.988032 76.8523936 131.119681 88.7207447 128.12766 85.7287234 139.996011 73.8603723 128.12766 61.9920213 131.119681 59 142.988032 70.8683511 154.856383 59"%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A"); }

Также можно настроить некоторые проверочные сообщения для каждого типа input, воспользовавшись span с классом help-text и псевдоэлементом ::before .

Invalid input input:invalid + .help-text::before { content: "You must enter a valid email." }

:in-range/:out-of-range

Эти селекторы определяют, находится ли значение числового поля в пределах указанных минимальных/максимальных значений.

Out-of-range input (value must be between 1 and 10) input:out-of-range + .help-text::before { content: "Out of range"; }

Вероятно, вам знаком этот селектор. Он дает возможность применить пользовательские стили к чекбоксам и радиокнопкам. Моя техника оформления чекбоксов включает создание встроенного элемента и помещения label после input .

Option

Я зрительно прячу input, так что он исчезает из поля зрения, но все еще кликабелен. Затем я оформляю label::before так чтобы он выглядел как поле чекбокса, а label::after – как галочка. Я использую селектор для соответствующего оформления этих двух псевдоэлементов.

&:checked + label::before { background-color: var(--color-primary); } &:checked + label::after { display: block; position: absolute; top: 0.2rem; left: 0.375rem; width: 0.25rem; height: 0.5rem; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); content: ""; }

Изучая html мы создавали формы с помощью тегов , а внутри создавали необходимое количество и .

Оформление поля input

Для того чтобы задать свойство для элемента формы нам необходим селектор. Этим селектором могут выступать такие теги как input (в этом случае как вы уже знаете мы зададим стиль для всех input-ов), textarea или селектор class . Рассмотрим на примере «для всех полей input зададим фон голубой, цвет букв синий и рамку синего цвета». Для работы возьмем следующую форму:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

Главная Введите Ваше имя: Введите Вашу фамилию: Расскажите немного о себе:

И для того чтобы преобразить данную форму используем следующий CSS код:

Как это выглядит в браузере:

Я думаю объяснять всё подробно нет необходимости. Но заострю лишь внимание на моменте, где мы указываем селектор. Мы написали селектор «input» — а это значит что данный стиль применится для всех полей на странице. Если вы хотите задать какому-то определенному полю стиль, необходимо прописать ему в html атрибут class=" " и вписать свойство в CSS.

Оформление поля textarea

Также мы можем оформить по своему желанию текстовую область — textarea. Как вы уже догадались это можно сделать также двумя способами. При оформлении текстовой области в этом уроке мы воспользуемся вторым способом через атрибут class=" " . Мы имеем html страницу, которая была в начале урока. Присвоим для текстовой области атрибут class="niceText" :

1

Затем на фон установим изображение и выделим текстовую область синей рамкой:

1 2 3 4 5 6 7 8 9 10 11 12 13

input{ background-color : #D3D5FF ; /* голубой фон */ color : #0007D3 ; /* синий цвет букв */ padding : 5px ; /* внутренний отступ для текста в 5 пикселей */ } .niceText{ background-image : url ("about.png" ) ; /* изображение для заднего фона */ background-repeat : no-repeat ; /* запрещаем повтор фонового изображения */ background-position : 100% 100% ; /* смещаем его в правый нижний угол */ border : 2px solid #7A7DD6 ; /* синяя рамка в два пикселя */ }

Как это выглядит в браузере:

СкачатьКартинка вместо кнопки input

И последнее что мы рассмотрим в этом уроке это изображение вместо простой кнопки. Возьмем следующий код html:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

Главная Введите Ваше имя: Введите Вашу фамилию: Расскажите немного о себе:

И применим следующие свойства CSS.

До появления CSS2 в 1998 году, элементы форм уже активно поддерживались различными браузерами. Однако ни тогда, ни сейчас не был определён единый стиль отображения данных элементов. В результате, до сих пор элементы форм перенимают стили браузера.

Идут года, веб-разработчики пытаются решить эту проблему, возникшую из-за отсутствия чёткой CSS спецификации в отношении элементов форм, и добиться кроссбраузерного отображения таких элементов, как input, select, fieldset, legend и textarea. В этой статье мы пробежимся по некоторым CSS рецептам, предназначенным для унификации отображения элементов форм.

Тесты Роджера Йоханссона

В 2004 и 2007 годах, Роджер Йоханссон создавал специальные наборы тестов. В конце он пришёл к выводу, что с помощью CSS невозможно стилизовать формы под все браузеры и платформы. Также его анализ выявил, что многие браузеры игнорируют некоторые CSS стили.

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

Стандартная модель

В спецификации CSS 2.1 было определено, что элементы форм textarea, input и select будут обладать характеристиками как блочных, так и строчных элементов (inline-block):

Textarea, input, select { display: inline-block; }

В свою очередь, элементы form и fieldset обладают характеристиками только блочных элементов (block):

Fieldset, form { display: block; }

На этом CSS спецификация данных элементов заканчивается. Все остальные аспекты оформления ложатся на плечи браузеров.

К элементам, обладающим как блочными, так и строчными характеристиками могут быть применены CSS свойства такие как line-height и vertical-align, для контроля высоты контейнера и выравнивания по вертикали. Также им доступны и другие характеристики, такие как внешние и внутренние отступы, а также свойства ширины и высоты.

Однако попытки оформить такие элементы, как fieldset и legend, вызывают различного рода сложности из-за стандартных стилей браузеров.

Как же решить данную проблему?

Определение размеров

Со временем, веб-разработчики заметили, что браузеры начинают неправильно отображать некоторые элементы форм, если им задать размеры:

Input, select { width: 120px; height: 32px; }

Многие пытались, превратить данные элементы в блочные:

Input, select { width: 120px; height: 32px; display: block; }

Однако, результаты оставляли желать лучшего. Только элемент textarea не вызывала проблем. Решение родилось некоторое время спустя, когда вместо свойства height стали использовалось сочетание свойств font-size и padding.

Также, браузеры различным образом отображают размер текста и шрифтов. Это легко исправить, задав следующие настройки:

Input, select { width: 120px; font: 1em Arial, sans-serif; }

Input, select { width: 120px; font: 1em Arial, sans-serif; padding: 3px 6px; }

Затем можно оформить и внешнее оформление элементов input и textarea:

Input, input, textarea { border: 1px solid #ccc; }

Элементам input типа button и submit браузеры приписывают дополнительный внутренний отступ. Нормализовать это можно следующим образом:

Input, input { padding: 2px; }

Также, можем применить специальные браузерные префиксы. К примеру, для браузеров, работающих на webkit, можно написать следующие стили:

Input, input, input, input::-webkit-file-upload-button, button { -webkit-box-align: center; text-align: center; cursor: default; color: buttontext; padding: 2px 6px 3px; border: 2px outset buttonface; border-image: initial; background-color: buttonface; box-sizing: border-box; } input, input, input { -webkit-appearance: push-button; white-space: pre; }

Внутренние отступы также можно применить к элементам fieldset и legend, но учитывая некоторые особенности:

Если поставить внутренним отступам элемента fieldset значение 0, то в некоторых браузерах это может привести к потере отступов элементов legend (не в IE);

Если поставить внутренним отступам элемента legend значение 0, то эти элементы станут слишком сжаты.

Нормализовать и унифицировать отображение чек боксов, радио кнопок и селект боксов можно, задав следующие свойства:

• font-family,
• font-size,
• width (для селект боксов),
• padding.

Применяя данные правила к рассмотренной группе элементов, можно добиться одинаково отображаемого контента на разных браузерах.

Выравнивание

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

• свойство float;
• используйте блочно-строчную природу данных элементов (inline-block); Когда вы применяете свойство float, то задействованные элементы автоматически преобразуются в блочные, и к ним теперь можно применять особые блочные свойства.

Применяя float главной проблемой становится вертикальное выравнивание. Решение заключается в применении внутренних или внешних верхних отступов:

Input, select { width: 120px; float: left; margin-top: 0.4em; }

Этот способ подходит, если нам необходимо выровнять блоки с текстом. Если же мы хотим создавать формы с элементами label, то нужно применить ещё одно правило:

Также проблема отображения возникает и у кнопок. Если высота вашей кнопки больше высоты рядом стоящих элементов, то выравнять её вертикально можно, добавив position: relative:

Input { float: left; width: 90px; position: relative; top: 0.4em; }

Данный подход также пригоден для чекбоксов и радио кнопок. Также его можно применить и для элемента legend с внутренними fieldset, изменив только одно: top на left.

Если мы имеем дело со строчными элементами, то вертикальное выравнивание применяется добавлением свойства vertical-align:

Label, input { vertical-align: middle; margin-right: 1em; }

Также неплохо скомбинировать данный подход с добавлением line-height. Однако его нужно добавлять к родительскому элементу. Если применить данное свойство непосредственно к какому-то элементу, то его высота может увеличиться.

Form-row { line-height: 1.4; }

Этого можно избежать, задав конкретную высоту:

Form-row { line-height: 1.8; height: 1.8em; }

Также строчным элементам можно задать выравнивание с помощью свойства text-align.

Проблемы с элементами загрузки файлов

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

Более того, разные браузеры по-разному отображают даже и этот элемент. Где-то он представлен просто в виде кнопки, где-то - с текстовым полем.

Однако веб-разработчики и тут нашли лазейку. Во-первых, данный элемент нужно поместить в блок div:

Скрытие элемента загрузки файла осуществляется путём применения свойства opacity. Далее можно колдовать с собственными стилями:

Upload { width: 157px; height: 57px; background: url(upload.png) no-repeat; overflow: hidden; } .upload input { display: block !important; width: 157px !important; height: 57px !important; opacity: 0 !important; overflow: hidden !important; }

Обратите внимание на запись!important. Это лучший способ заменить стандартные стили браузера.

Заключение

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