Css форма – 50 бесплатных HTML5 и CSS3 форм входа для вашего сайта / Полезное / Сайты и биржи фриланса. Обзоры фриланс бирж. Новости. Советы. Фриланс для начинающих. FREELANCE.TODAY

Формы в HTML5: CSS | HTML/xHTML

Содержание цикла статей «Формы в HTML 5»:

Часть 1 Формы в HTML5: Разметка
Часть 2 Формы в HTML5: CSS
Часть 3 Формы в HTML5: JavaScript и API для принудительной валидации форм

Это вторая статья из серии статей в трех частях «Формы в HTML5». В ней мы поговорим о стилизации, или дизайне, форм. А если говорить более точно, то о селекторах псевдо-классов, которые можно использовать для настройки полей ввода в различных состояниях.

Если же вы не читали часть первую, советую все — таки ее изучить, чтобы уяснить основные моменты концепции разметки.

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

Для того чтобы этого не происходило, используйте CSS-свойство appearance: none; свойство, требующее использования некоторых префиксов.

Но, думаю, вы ожидаете этого совета, используйте его с осторожностью, так как можете поплатиться некоторыми элементами — checkbox и radio buttons в Google Chrome исчезают!

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

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  outline: 0;
  box-shadow: none;
}

Заметьте, я также обнулил свойства outline и box-shadow, чтобы убрать уродливую тень голубого цвета с окошка ввода и ошибку форматирования во всех браузерах.

Свойство appearance задокументировано на CSS-Tricks, но оно видоизменяется до сих пор.

Селектор :focus поддерживается с версии CSS 2.1 и устанавливает стилизацию поля ввода, используемого на данный момент. Для примера:

input:focus,
textarea:focus,
select:focus {
  background-color: #eef;
}
:checked

Селектор :checked применяется к отмеченным checkboxes и radio buttons, например:

<input type="checkbox" name="test" />
<label for="test">check me</label>
input:checked ~ label {
    font-weight: bold;
}

Здесь нет соответствия для ‘:unchecked’ переключателя, но он нам и не нужен. Просто создаём стиль по-умолчанию, а затем определяем стиль для состояния :checked. Или же можно использовать :not(:checked).

Технически, селектор :indeterminate еще не отражен в спецификации, однако уже упомянут там. Согласно ей, он представляет собой флажок или переключатель, который «ни отмечен, ни не-отмечен».

Необычен он тем, что работает только тогда, когда вы применяете :indeterminate к чекбоксу с помощью JavaScript, например:

document.getElementById("mycheckbox").indeterminate = true;

Эффекта на свойстве .checked это не возымеет, так как оно может быть только true или false.

Есть несколько ситуаций, когда селектор :indeterminate может оказаться полезен. В случае, когда есть группа флажков, можно сделать флажок — «отметить все», который ставит или снимает галочки сразу для всей группы.

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

:required применяет стиль к полям ввода, у которых есть атрибут required.

:optional применяет стиль к полям ввода, которые НЕ имеют атрибута required. Не знаю, зачем добавили этот селектор, когда :not(:required) делает тоже самое?!

:valid применяет стиль ко всем полям ввода, которые заполнены корректно на данный момент.

Соответственно, :invalid (или :not(:valid)) применяет стиль к полям, которые заполнены не корректно, к примеру:

input:invalid {
    border-color: #900;
}

Поля ввода типа number и range содержат корректные значения между атрибутами min и max, значения которых в свою очередь меняются с шагом, равным значению атрибута step.

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

:out-of-range предназначается для полей, содержащих недопустимые значения диапазонов.

К полям ввода с атрибутом disabled можно обратится с помощью псевдо-класса :disabled, к примеру так:

input:disabled {
    color: #ccc;
    background-color: #eee;
}

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

Стили к псевдо-классам :required и :invalid будут применяться.

Аналогично, не отключенные поля могут быть выбраны с помощью селектора :enabled (или :not(:disabled)). На практике он вам вряд ли понадобится, так как к не отключенным полям применяется стиль по умолчанию.

К полям с атрибутом readonly можно обратится с селектором :read-only . Помните, что readonly поля будут проверяться и отправляться на сервер, но пользователь изменить значения не сможет.

Стандартные read-write поля могут быть выбраны с помощью :read-write (или :not(:read-only)). Опять же, это не тот селектор, которым вы будете часто пользоваться.

И, наконец, мы подобрались к селектору :default, который применяет стиль к кнопке «Отправить».

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

input::-webkit-input-placeholder { color: #ccc; }
input::-moz-placeholder { color: #ccc; }
input:-ms-input-placeholder { color: #ccc; }
input::placeholder { color: #ccc; }

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

К примеру:

input:invalid { color: red; }
input:enabled { color: black; }

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

Используйте простые варианты селекторов и минимум кода. Для примера, пустое :required поле будет являться :invalid, потому вряд ли понадобится применять к нему стили.

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

Возможность дизайна пузырька зависит от устройства и от браузера. Браузеры Webkit / Blink позволяют использовать нестандартную настройку CSS:

:
::-webkit-validation-bubble { ... }
::-webkit-validation-bubble-arrow { ... }
::-webkit-validation-bubble-message { ... }
::-webkit-validation-bubble-arrow-clipper { ... }

Моя рекомендация: не утруждайте себя попытками. Если вам нужно пользовательское форматирование сообщений об ошибках — вы наверняка захотите использовать пользовательские сообщения. А для этого вам понадобится JavaScript.

Как правило, важные стили и селекторы поддерживаются всеми современными браузерами от IE10 и выше. Некоторые менее полезные, например, in-range, на данный момент поддерживаются только Webkit/Blink.

Старые браузеры будут, к примеру, поддерживать :focus , но стоит позаботиться о JavaScript фол-бэках для более сложных свойств.

Вышеуказанные стили применяются немедленно. Например:

input:invalid {
    border-color: #900;
}

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

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

К счастью, API в HTML5 предоставляет инструменты, которые позволяют:

• приостанавливать проверку, пока форма заполняется;
• использовать пользовательские сообщения об ошибках;
• обеспечить fall-back дизайн и проверку для старых браузеров;
• создавать более удобные формы.

Мы рассмотрим эти свойства подробнее в последней статье из этой серии.

Данная публикация представляет собой перевод статьи «HTML5 Forms: CSS» , подготовленной дружной командой проекта Интернет-технологии.ру

Пользовательские стили для формы CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159

input[type="text"], textarea, select, div.styled, input[type="file"] {  
   width:12em; 
   border-radius:2px; 
   border: solid 1px #ccc; 
   padding:0.4em;
}
 
div.styled, select, input[type="submit"], input[type="button"], input[type="file"]:after {
   background: white url(formelements-select.png) no-repeat center right;
   -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.2); 
   box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}	
 
input[type="text"], textarea, input[type="file"] { 
   background-color: #f5f5f5;
   -webkit-box-shadow: inset 0 2px 3px rgba(0,0,0,0.2);
   box-shadow: inset 0 2px 3px rgba(0,0,0,0.2);
}
 
.ie9 input[type="text"] {
   line-height:normal; 
} 
 
textarea {
   width:100%;
   height:10em; 
}
 
/* IE и Firefox */
 
div.styled {
   overflow:hidden;
   padding:0;
   margin:0; 
}
 
.ie7 div.styled {
   border:none;
}
 
div.styled select {	
   width:115%; background-color:transparent; 
   background-image:none;
   -webkit-appearance: none; 
   border:none; 
   box-shadow:none;
}
 
.ie7 div.styled select {
   width:100%; background-color:#fff; 
   border: solid 1px #ccc; 
   padding:0.3em 0.5em;
}	
 
/* Webkit(Chrome например)*/
 
input[type="file"] { 
   position: relative; 
   -webkit-appearance: none;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;	
   width: 40%;	
   padding:0;
}
 
input[type=file]::-webkit-file-upload-button {
   width: 0; 
   padding: 0; 
   margin: 0;
   -webkit-appearance: none;
   border: none;
}	
 
input[type="file"]:after {
   content: 'Загрузить';
   margin:0 0 0 0.5em;
   display: inline-block; left: 100%;
   position: relative;
   background:white url(../images/formelements-select.png) no-repeat center left;
   padding:0.3em 0.5em; 
   border: solid 1px #ccc !important;
   -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.2); 
   box-shadow: 0 1px 3px rgba(0,0,0,0.2);
   border-radius:4px;
}	
 
input[type="file"]:active:after {
   box-shadow:none;
}
 
input[type="radio"], input[type="checkbox"] { 
   position:absolute; 
   left:-999em;
}
 
label:before { 
   display:inline-block;
   position:relative;
   top:0.25em;
   left:-2px; 
   content:'';
   width:25px;
   height:25px;
   background-image:url(../images/formelements.png);
}
 
input[type="checkbox"] + label:before {
   background-position: 0 -25px;
}
 
input[type="checkbox"]:checked + label:before {
   background-position: 0 0;
}
 
input[type="radio"] + label:before {
   background-position: -25px -25px;
}
 
input[type="radio"]:checked + label:before {
   background-position: -25px 0;
}
 
/* Сброс стилей IE 7-8 */
 
.ie8 label:before {
   display:none; content:none; 
}
 
.ie8 input[type="checkbox"],.ie8 input[type="radio"],
.ie7 input[type="checkbox"],.ie7 input[type="radio"] { 
   position: static; left:0;
}
 
.ie8 input[type="checkbox"], .ie8 input[type="radio"] { 
   position:relative; top:5px;
   margin-right:0.5em;
}	
 
input[type="text"]:focus, textarea:focus {
   border-color:#000;
}
 
input[type="submit"], input[type="button"] { 
   padding:0.5em 1em; 
   line-height:1em; 
   cursor:pointer;
   border-radius:4px; 
   color:#000; 
   font-weight:bold; 
   font-size:inherit;
   border:solid 1px #ccc;
   box-shadow:0 1px 5px rgba(0,0,0,0.2);
   background-position: center bottom;
}
 
input[type="submit"]:active, input[type="button"]:active {
   -webkit-box-shadow: none;
   box-shadow:none;
}

Учебник HTML 5. Статья «Формы»

Форма в HTML это часть документа, которая позволяет пользователю ввести интересующую нас информацию, которую впоследствии можно принять и обработать на стороне сервера. Другими словами, формы используются для сбора информации введённой пользователями.

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

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

Элемент имеет следующий синтаксис:

<form>
элементы формы
</form>

Элемент <input> является основным элементом формы и определяет пользовательское поле для ввода информации. Поле ввода принимает различный вид, в зависимости от значения атрибута type, применённого к данному элементу:

С выходом HTML 5 к элементу <input> добавилось 12 новых типов (видов) полей, но к сожалению, пока не все из них имеют полную поддержку всеми передовыми браузерами. Как вы понимаете, к самым часто используемым видам полей относятся те, которые были введены задолго до HTML 5, например, такие как:

• checkbox (флаговая кнопка).
• radio (радиокнопка).
• submit (кнопкa отправки формы).
• text (однострочное текстовое поле).

Давайте рассмотрим пример использования этих элементов управления внутри формы:

<!DOCTYPE html>
<html>
	<head>
		<title>HTML формы</title>
	</head>
	<body>
		<form>
			Имя: <input type = "text"  name = "firstname" value =  "Введите имя"> <br> <br>
			Фамилия: <input type = "text" name = "lastname" value =  "Введите фамилию"> <br> <br>
			Мужчина <input  type = "radio" name = "sex" value =  "male" checked>
			Женщина <input type = "radio" name = "sex" value =  "female"> <br> <br>
			О себе: <br>
			<input type = "checkbox" name = "type1" value = "low">Меньше 18<br>
			<input type = "checkbox" name = "type2" value = "2old">От 18 до 35<br>
			<input type = "checkbox" name = "type3" value = "high">Больше 35<br>
			<input type = "checkbox" name = "type4" value = "busy">Женат /-а<br>
			<input type = "checkbox" name = "type5" value = "cat">Есть кошка<br>
			<br>
			<input type = "submit" name = "submit" value = "отправить">
		</form>
	</body>
</html>

И так по порядку, что мы сделали в этом примере:

• Разместили два однострочных текстовых поля (<input type = «text»>) для ввода пользователем своего имени и фамилии. Присвоили этим полям уникальные имена атрибутом name (для корректной передачи и обработки формы обязательно указывайте для каждого элемента <input> этот атрибут). Кроме того атрибутом value установили для этих полей значения по умолчанию (при заполнении полей значение этого атрибута будет соответствовать пользовательскому вводу).
• Разместили две радиокнопки (<input type = «radio»>) для выбора одного из ограниченного числа вариантов. Обратите внимание, что для радиокнопок необходимо указывать одинаковое имя, чтобы была возможность выбрать только один вариант из предложенных.
Для первой радиокнопки мы указали атрибут checked, который указывает, что элемент должен быть предварительно выбран при загрузке страницы (в данном случае поле со значением male). Он применяется только для полей <input type = «checkbox»> и <input type = «radio»>, в противном случае он игнорируется.
• Разместили пять флaговых кнопок (чекбоксов), которые позволяют пользователям указать необходимые параметры (выбрать необходимые значения). Присвоили этим полям уникальные имена атрибутом name и атрибутом value установили для этих полей необходимые значения.
• Заключительный элемент, который мы разместили внутри формы это кнопка, которая служит для отправки формы (<input type = «submit»>). У кнопки по аналогии с другими элементами имеется свое имя (атрибут name) и значение (атрибут value).

Результат нашего примера в браузере:

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

<form action = "example.php">

Обратите внимаение, что в атрибуте action указывается URL адрес того места, куда отправляется форма. Если для формы не задан атрибут action, то значением по умолчанию этого атрибута считается текущая страница (обработчик формы — текущая страница). В приведенном выше примере, предпологается, что скрипт обработки формы находится внутри страницы «example.php».

Расширение *.php используется для файлов, написанных на языке PHP (Hypertext Preprocessor — препроцессор гипертекста, произносится как «пи-эйч-пи») — скриптовый язык программирования общего назначения, интенсивно применяемый для разработки веб-приложений. В настоящее время поддерживается подавляющим большинством хостинг-провайдеров и является одним из лидеров среди языков, применяющихся для создания динамических веб-сайтов.

Еще одним важным атрибутом при работе с элементом <form> является атрибут method, он определяет метод HTTP (get или post), который используется при передаче формы:

<form action =  "example.php" method =  "get">
или:
<form  action = "example.php"  method = "post">

Вы можете использовать get (метод по умолчанию) если форма отправки является пассивной (как поисковой запрос) и не содержит конфиденциальной информации. При использовании метода get данные формы будут видны при передаче в адресе страницы:

http://www.kakoitosait.ru/example.php?firstname=Вася&lastname=Пупкин

Используйте метод post если форма использует обновление каких-либо данных, или включает в себя конфиденциальную информацию (например пароль). Метод post предлагает лучшую безопасность, так как представленные данные отправляются на сервер в теле сообщения запроса.

Группировка данных формы

Тег <fieldset> служит для визуальной группировки элементов, размещенных внутри формы (HTML тег <form>). Во всех основных браузерах, данный элемент выделяется рамкой, а содержимое элемента получает внутренние отступы со всех сторон.

Тег <legend> определяет заголовок для <fieldset> элемента, с помощью которого группируются элементы формы.

Пример использования:

<!DOCTYPE html>
<html>
	<head>
		<title>Группировка данных формы</title>
	</head>
	<body>
		<form>
			<fieldset>
				<legend>Пожалуйста, представьтесь</legend>
				Имя: <input type =  "text" name = "firstname" value =  "Введите имя"> <br> <br>
				Фамилия: <input type =  "text" name = "lastname" value =  "Введите фамилию"> <br> <br>
				Мужчина <input type =  "radio" name = "sex" value =  "male" checked>
				Женщина <input type =  "radio" name = "sex" value =  "female"><br> <br>
				<input type = "submit" name = "submit" value = "отправить">
			</fieldset>
		</form>
	</body>
</html>

В этом примере мы:

• Разместили внутри формы (парный тег <form>) элемент <fieldset>, благодаря которому мы группируем элементы формы, вокруг формы появляется рамка (внешний вид рамки может отличаться в зависимости от браузера). Тегом <legend> мы определяем для нашей рамки заголовок «Пожалуйста, представьтесь».
• Разместили два однострочных текстовых поля (<input type = «text»>) для ввода пользователем своего имени и фамилии. Присвоили этим полям уникальные имена атрибутом name (для корректной передачи и обработки формы обязательно указывайте для каждого элемента <input> этот атрибут). Кроме того атрибутом value установили для этих полей значения по умолчанию (при заполнении полей значение этого атрибута будет соответствовать пользовательскому вводу).
• Разместили две радиокнопки (<input type = «radio»>) для выбора одного из ограниченного числа вариантов. Обратите внимание, что для радиокнопок необходимо указывать одинаковое имя, чтобы была возможность выбрать только один вариант из предложенных.
• Заключительный элемент это кнопка, которая служит для отправки формы (<input type = «submit»>). У кнопки по аналогии с другими элементами имеется свое имя (атрибут name) и значение (атрибут value).

Результат нашего примера в браузере:

Текстовая метка

Тег <label> (англ. — метка) служит текстовой меткой для элемента <input>. По своему виду метка ничем не отличается от обычного текста, но благодаря ей пользователь может выбрать элемент формы кликом по тексту, расположенному внутри элемента <label>, а не по самому элементу <input>.

Чтобы определить к какому элементу формы относится текущая метка, необходимо использовать атрибут for тега <label>. Значение атрибута for должно соответствовать значению глобального атрибута id того элемента формы, к которому будет относится метка. Атрибут for можно не использовать, если элемент <input> будет находиться внутри элемента <label>.

Рассмотрим пример использования:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <label></title>
	</head>
	<body>
		<form>
			<label for = "yes">Да</label> <!--Здесь мы создаём метку для тега input c id = "yes"-->
			<input type = "radio" id = "yes"name = "choice" value = "yes" checked> 
			<label for = "no">Нет</label><!--Здесь мы создаём метку для тега input c id = "no"-->
			<input type = "radio"id = "no" name = "choice" value = "no">
		</form><br>
		<form>
			<label>Да <input type = "radio" name = "choice2" value = "yes"> </label><!--Здесь мы  помещаем теги <input>
			внутрь тегов <label> (при этом атрибут for не требуется)-->
			<label>Нет <input type = "radio"name = "choice2" value = "no" checked></label> 
		</form> 
	</body>
</html>

В этом примере мы:

• Внутри первой формы:
  • Разместили две радиокнопки (<input type = «radio»>) для выбора одного из ограниченного числа вариантов. Еще раз обратите внимание, что для радиокнопок внутри одной формы необходимо указывать одинаковое имя, значения мы указали разные. Для первой радиокнопки мы указали атрибут checked, который указывает, что элемент должен быть предварительно выбран при загрузке страницы (в данном случае радиокнопка со значением yes). Кроме того, мы указали для радиокнопок глобальные атрибуты id, которые определяют уникальный идентификатор для элемента.
  • Разместили два элемента <label>, которые определяют текстовые метки для наших текстовых полей. Обратите внимание, что мы использовали атрибут for, чтобы определить к какому элементу формы относится текущая метка. Значение атрибута for соответствует значению глобального атрибута id необходимой нам радиокнопки.
• Внутри второй формы:
  • Разместили две радиокнопки (<input type = «radio»>) для выбора одного из ограниченного числа вариантов. Для второй радиокнопки мы указали атрибут checked, который указывает, что элемент должен быть предварительно выбран при загрузке страницы (в данном случае радиокнопка со значением no). Кроме того, мы указали для радиокнопок уникальные значения в рамках формы и одинаковые имена.
  • Разместили два элемента <label>, внутри них мы разместили наши радиокнопки. В отличии от предыдущего метода отсутствует необходимость указывать для радиокнопок глобальные атрибуты id (идентификатор для элемента), а для текстовых меток использовать атрибут for, чтобы на них сослаться (сделать привязку).

В браузере оба варианта (метода) использования текстовых меток выглядят идентично:

Подсказка для полей ввода

Атрибут placeholder (HTML тега <input>) указывает подсказку, которая описывает ожидаемое значение для ввода в элемент. Подсказка отображается в поле ввода до того, как пользователь вводит значение.

Обратите внимание на то, что браузер Internet Explorer имеет поддержку данного атрибута только с 10-ой версии, в некоторых случаях вы можете использовать атрибут value в качестве подсказки для поддержки более ранних версий этого браузера (пример мы рассматривали выше).

Атрибут может быть использован с полями данных следующих типов (атрибут type):

• email (поле для адреса электронной почты).
• password (поле с паролем, в котором скрываются символы).
• search (текстовое поле для ввода строки поиска).
• text (однострочное текстовое поле).
• tel (поле для ввода номера телефона).
• url (поле для ввода URL-адреса).

Давайте рассмотри пример использования:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования атрибута placeholder</title>
	</head>
	<body>
		<form>
			Login: <input type = "text"  name = "login" placeholder = "Введите ваш логин"><br><br>
			Password: <input type = "password"  name = "password" placeholder = "Введите ваш пароль"><br>
			<button type = "submit">Далее</button>
		</form>
	</body>
</html>

В данном примере мы указали для элемента <input> с типом text (однострочное текстовое поле) и типом password (поле с паролем) текстовую подсказку для пользователя (атрибут placeholder), которая описывает ожидаемое значение для ввода.

Результат нашего примера:

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

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

Практическое задание № 22.

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

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

Выравнивание полей формы с помощью CSS / Habr

Задача

Решение

Шаг первый

Создадим HTML-разметку.

<div>
   <label for="n">Имя</label>
   <input type="text" />
</div>
<div>
   <label for="ln">Фамилия</label>
   <input type="text" />
</div>
<div>
   <label for="a">Место жительства</label>
   <input type="text" />
</div>

Шаг второй

Выровняем содержимое каждого дива по правому краю и назначим ему обновление потока.

.field {clear:both; text-align:right;}

Шаг третий

Заставим каждый элемент label «утечь» влево.

.field {clear:both; text-align:right;}
label {float:left;}

Теперь каждый заголовок встал напротив соответствующего поля, но ширина формы стала 100% от ширины родительского элемента.

Шаг четвертый

Для того, чтобы прижать поля к заголовкам, обернём всю конструкцию блоком:

<div>
   <div>
      <label for="n">Имя</label>
      <input type="text" />
   </div>
   <div>
      <label for="ln">Фамилия</label>
      <input type="text" />
   </div>
   <div>
      <label for="a">Место жительства</label>
      <input type="text" />
   </div>
</div>

Добавим в CSS обтекание для этого блока:

.field {clear:both; text-align:right;}
label {float:left;}
.main {float:left}

Шаг пятый

Теперь видно, что из-за float элементы перестали находится на одной линии. Vertical-align, к сожалению, работать не будет, но можно воспользоваться line-height.
Также зададим отступ между заголовком и полем:

.field {clear:both; text-align:right; line-height:25px;}
label {float:left; padding-right:10px;}
.main {float:left}

Работающий вариант можно посмотреть здесь. А также заходите на сайт piumosso ))

Формы HTML уроки для начинающих академия

Пример HTML-формы

Элемент <form>

Элемент HTML <form> определяет форму, которая используется для сбора данных пользователя:

<form>
.
form elements
.
</form>

HTML-форма содержит элементы формы.

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

Элемент < input >

Элемент <input> является наиболее важным элементом формы.

<input>элемент может отображаться несколькими способами в зависимости от атрибута Type .

Вот несколько примеров:

Далее в этом учебнике вы узнаете намного больше о типах ввода.

Ввод текста

<input type="text"> Определяет однострочное поле ввода для text input:

Пример

<form>
  First name:<br>
  <input type=»text» name=»firstname»><br>
  Last name:<br>
  <input type=»text» name=»lastname»>
</form>

Так будет выглядеть в браузере:

Примечание: Сама форма не видна. Также обратите внимание, что ширина текстового поля по умолчанию составляет 20 символов.

Входной сигнал переключателя

<input type="radio"> Определяет переключатель.

Переключатели позволяют пользователю выбрать одно из ограниченного числа вариантов:

Пример

<form>
  <input type=»radio» name=»gender» value=»male» checked> Male<br>
  <input type=»radio» name=»gender» value=»female»> Female<br>
  <input type=»radio» name=»gender» value=»other»> Other
</form>

Таким образом, HTML-код выше будет отображаться в браузере:

HTML Формы

Элемент <form>

Элемент <form> определяет форму, используемую для получения данных, вводимых пользователем:

<form>
.
элементы формы
.
</form>

Форма HTML содержит элементы формы.

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

Элемент ввода

Элемент <input> это самый важный элемент формы.

Элемент <input> может быть показан несколькими способами, в зависимости от атрибута type.

Вот некоторые примеры:

Вы узнаете намного больше о типах входных позже в этом учебнике.

Ввод Текста

<input type=»text»> определяет однострочное поле ввода ввод текста:

Пример

<form>
 Имя:<br>
 <input type=»text» name=»firstname»><br>
 Фамилия:<br>
 <input type=»text» name=»lastname»>
</form>

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

Примечание: Сама форма не видна. Также обратите внимание, что ширину по умолчанию для текстового поля 20 символов.

Переключатель входного сигнала

<input type=»radio»> определяет радио кнопку.

Переключатели позволяют пользователю выбрать один из ограниченного числа вариантов:

Пример

<form>
 <input type=»radio» name=»gender» value=»male» checked> Мужчина<br>
 <input type=»radio» name=»gender» value=»female»> Женщина<br>
 <input type=»radio» name=»gender» value=»other»> Другие
</form>

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

Кнопка Отправки

<input type=»submit»> определяет кнопку для представления данных формы форме-обработчику.

Форма обработчик обычно сервер со скриптом для обработки входных данных.

Форма обработчик, указанный в форме атрибута action:

Пример

<form action=»action_page.php»>
 Имя:<br>
 <input type=»text» name=»firstname» value=»Микки»><br>
 Фамилия:<br>
 <input type=»text» name=»lastname» value=»Маус»><br><br>
 <input type=»submit» value=»Отправить»>
</form>

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

Атрибут действие

Атрибут action определяет действие, которое будет выполнено при отправке формы.

Обычно, данные формы отправляются на веб-страницу на сервере, когда пользователь нажимает на кнопку «Отправить».

В приведенном выше примере, данные формы отправляются на страницу на сервере «action_page.php». На этой странице представлен серверный скрипт, который обрабатывает данные формы:

<form action=»action_page.php«>

Если атрибут аction отсутствует, действие разворачивается на текущей странице.

Атрибут метод

Атрибут method задает метод HTTP (GET или POST)для использования при отправки данных формы:

<form action=»action_page.php» method=»get»>

или:

<form action=»action_page.php» method=»post»>

Когда использовать GET?

Метод по умолчанию при отправке данных формы GET.

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

action_page.php?firstname=Микки&lastname=Маус

Примечание: GET не должен использоваться при передаче секретной информации! GET лучше всего подходит для не больших, объемов данных, поскольку он имеет и ограниченый размер.

Когда использовать POST?

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

POST не имеет ограничений по размеру и может использоваться для передачи больших объемов данных.

Атрибут name

Каждое поле ввода имеет атрибут name он должен быть представлен.

Если атрибут name не указан, сведения о том, что все поле ввода не будет отправлено.

Этот пример представляет только поле ввода «last name»:

Пример

<form action=»action_page.php»>
 Имя:<br>
 <input type=»text» value=»Микки»><br>
 Фамилия:<br>
 <input type=»text» name=»lastname» value=»Маус»><br><br>
 <input type=»submit» value=»Отправить»>
</form>

Группировка данных формы с <fieldset>

Элемент <fieldset> используется для группировки связанных данных в форме.

Элемент <legend> определяет название элемента <fieldset> .

Пример

<form action=»action_page.php»>
  <fieldset>
   <legend>Личная информация:</legend>
   Имя:<br>
   <input type=»text» name=»firstname» value=»Микки»><br>
   Фамилия:<br>
   <input type=»text» name=»lastname» value=»Маус»><br><br>
   <input type=»submit» value=»Отправить»>
  </fieldset>
</form>

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

Еще Примеры

Отправка электронной почтой из формы
Как отправить электронную почту из формы?

Проверьте себя с помощью упражнений!

Список атрибутов <form>:

Вы узнаете больше об атрибутах форме в следующих главах.

20 советов по работе с HTML формами на сайте

Работа с формами XHTML может быть несколько сложной, т.к. они не только используют некоторые элементы HTML, но и стирают грань между статическим содержанием и взаимодействием с пользователем. Давайте рассмотрим некоторые вещи, которые следует помнить при создании вашей следующей HTML-формы на сайте.

Хорошие html формы для сайта требуют внимания, по крайней мере, в четырех пунктах:

1.Семантика

2.Доступность

3.Функциональность

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

4.Дизайн

Форма может быть трудной, а иногда даже раздражающей для пользователей, часто, формы прерывают основное внимание пользователя и направление на странице: они намерены заказать подарок, или попробовать новое веб-приложение, не давая вам их адреса доставки или еще одного пароля. Эти советы будут делать формы проще для вас как для разработчика / дизайнера, и их пользователей.

Семантика

1: используйте fieldsets для инкапсуляции в аналогичных областях

Как правило, формы состоят из input внутри тега form. Когда вы получили много полей, которые пользователь должен заполнить, это может быть легче, как для пользователей, так и для вас, разработчиков, отслеживать ввод с помощью fieldsets. Многолетним примером этого является использование fieldsets, чтобы отделить платежный адрес и адрес доставки.

<fieldset> <span>Billing Address</span><input type=»text» /> <span>City</span><input type=»text» /> <span>Province</span><input type=»text» /> <span>Postal Code</span><input type=»text» /> </fieldset> <fieldset> <span>Shipping Address</span><input type=»text» /> <span>City</span><input type=»text» /> <span>Province</span><input type=»text» /> <span>Postal Code</span><input type=»text» /> </fieldset>

2: ярлыки fieldsets с легендами

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

<fieldset> <legend>Billing Address</legend> <span>Address</span><input type=»text» /> <span>City</span><input type=»text» /> <span>Province</span><input type=»text» /> <span>Postal Code</span><input type=»text» /> </fieldset>

3: Дайте имя inputs

Если вы хотите передать данные формы через скрипт, то каждый входной (input)элемент должен иметь имя, если вы используете PHP, эти имена станут ключом к глобальному массиву, как правило, $ _POST или $ _GET.

<fieldset> <span>Billing Address</span><input type=»text» name=»billAddress» /> <span>City</span><input type=»text» name=»billCity» /> <span>Province</span><input type=»text» name=»billProvince» /> <span>Postal Code</span><input type=»text» name=»billPC» /> </fieldset>

4: Используйте тег label

Давайте продолжать совершенствовать этот код, там нет ничего плохого в использовании тега label перед input.

<fieldset> <legend>Billing Affress</legend> <label>Address</label><input type=»text» name=»billAddress» /> <label>City</label><input type=»text» name=»billCity» /> <label>Province</label><input type=»text» name=»billProvince» /> <label>Postal Code</label><input type=»text» name=»billPC» /> </fieldset>

5: Дайте тегу label атрибут «for»

Мне очень нравится атрибут «for»; он дает возможность привязать тег label к input. Значение ‘for’ должно быть такое же, как идентификатор данных, с которыми вы хотите связать его.

<fieldset> <legend>Billing Affress</legend> <label for=»billAddress»>Address</label><input type=»text» name=»billAddress» /> <label for=»billCity»>City</label><input type=»text» name=»billCity» /> <label for=»billProvince»>Province</label><input type=»text» name=»billProvince» /> <label for=»billPC» >Postal Code</label><input type=»text» name=»billPC» /> </fieldset>

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

6: Используйте параметр OPTGROUP, чтобы классифицировать группы

Если у вас есть много вариантов выбора, обычно лучше сгруппировать их в optgroups. <optgroup> является малоизвестным элементом, который будет делать отступы для вариантов и давать им названия. Обратите внимание, что требуется метка атрибута.

<select> <optgroup label=»USA»> <option>Alabama</option> <option>Alaska</option> <option>Arizona</option> </optgroup> <optgroup label=»Canada»> <option>Alberta</option> <option>British Columbia</option> <option>Manitoba</option> </optgroup> </select>

Это дает нам следующие результаты:

7: Всегда назначайте полные атрибуты

При работе с формами в частности, соблазнительно написать так:

<label for=»live»>Living?</label> <input name=»live» type=»checkbox» checked disabled />

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

<label for=»live»>Living?</label> <input name=»live» type=»checkbox» checked=»checked» disabled=»disabled» />

8: Используйте кнопки вместо Submit Inputs

Как правило, <input type=»submit» /> была универсальной кнопкой «Отправить». Но HTML имеет элемент <button> (кнопка). Почему бы вам его использовать? Ну, обычно, легче стилизировать кнопки; Также, вы можете поместить изображения в пределах кнопки, поэтому кнопки действительно обеспечивают большую гибкость. Вы можете читать больше в этих двух статьях.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Доступность

9: Положите tabindex в inputs

Определенно легче сделать вкладку с помощью формы, чем использовать мышь… Однако, по умолчанию, ваш пользователь будет проходить вкладки в том порядке, в котором они прописаны в HTML. Если это не тот порядок, который вы хотите, вы можете легко добавить свойства TabIndex в input; TabIndex принимает числовое значение, и будет прыгать в input со следующего большего значения, когда вы нажмете клавишу табуляции.

<input type=»text» tabindex=»2″ /> <input type=»text» tabindex=»1″ /> <input type=»text» tabindex=»3″ />

10. Определите при необходимости ключ доступа

Ключ доступа атрибутов создает сочетание клавиш, которые будут определяться как ввод: Ярлык ALT (Option) + значения ключа доступа. Конечно, вы не установите ключ доступа на каждом вводе, но это, несомненно, будет полезно, например, поле поиска. Не забудьте указать пользователям о значении ярлыка, часто это делается подчеркиванием символа как части ярлыка.

<label for=»search»><span>S</span>earch</label> <input type=»text» name=»s» accesskey=»s» />

11. Используйте хорошие методы фокусировки

Можно утверждать, что этот пункт также на стороне дизайна, как и доступность. Это всегда хорошо, если поле формы (как правило, в текстовом поле, в данном случае) изменяет цвет при наведении, но для инвалидов по зрению, это почти требование, если использовать форму корректно. Для этого можно использовать наведение psuedoclass в вашем CSS; это будет работать во всех распространенных браузерах, кроме версии IE7 и ниже. Вы также можете использовать JavaScript для этого; Jquery имеет Hover .

input[type=text]:hover { background-color:#ffff66; border-color:#999999; }

12. Подумайте о людях, использующих программы чтения с экрана

Поскольку формы имеют тенденцию быть такими утомительным, то каждый любит хорошо продуманные формы. Но не позволяйте фантазийным формам
игнорировать программы чтения с экрана: убедитесь, что ваш ввод ясно помечен. Если вы не хотите, чтобы эти ярлыки показывались (может быть применена маркировка текста input со значениями, которые исчезают при фокусе), вы можете удалить их из визуального представления (не используйте Display: есть лучшие способы). Кроме того, программа чтения с экрана обычно ассоциируется с текстом, чтобы прямо перед input был ярлык для input. Исключением являются радио-кнопки и флажки.

Функциональность

13. Используйте правильное содержание тега type

В большинстве случаев вам не нужно будет делать ENCTYPE атрибут тега form, он по умолчанию будет в «Application / X-WWW-форм-urlencoded». Однако, если у вас есть файл ввода (input), который позволяет пользователю загрузить файл, вы должны использовать «составные формы-данных (multipart/form-data)».

<form action=»verify.php» method=»get» enctype=»multipart/form-data»> <label for=»avatar»>Upload your Avatar : </label> <input type=»file» name=»avatar» /> </form>

14: Знайте, когда использовать «Get» и когда использовать «Post»

Форма может отправить свои данные двумя способами: «Get» и «Post», вы определяете один из методов в атрибуте тега form. Какая разница, и когда вы должны их использовать? Игнорируя то, что происходит на сервере, основным отличием является то, как браузер посылает информацию. С GET, данные формы отправляются в качестве запроса, видимого в URL. Итак, эта форма. . .

<form action=»you.php» method=»get»> <label for=»fname»>First Name</label> <input type=»text» name=»fname» value=»Bill» /> <label for=»lname»>Last Name</label> <input type=»text» name=»lname» value=»Gates» /> </form>

. . . приведет к URL, когда это представляется: www.example.com/you.php?fname=Bill&lname=Gates

При использовании «Post», данные передаются в заголовке HTTP запроса. Таким образом, они не видны обычному пользователю. Итак, какие нужно использовать и когда? «Post» лучше для конфиденциальных данных (например, пароли) и любых данных, которые, как правило, что-то изменяют (например, добавить запись в базу данных). Кроме того, «Post» — единственный вариант, если вы загружаете файл. «Get» — хороший вариант для запросов к базе данных, и других запросов, которые не имеют прочного влияния ни на что (Spec называют «идемпотентным»). Вообще-то, я лишь поверхностно коснулся вопросов различия, затронутых здесь. Имеются другие статьи, которые рассматривают эту тему углубленно.

15. проверка на клиенте и сервере

Проверка — это бич формы. Но лучше проверять ввод (input), как на клиенте, так и на сервере; проверка в браузере позволяет предупредить пользователей об ошибках, прежде чем представить форму, которая требует менее одной транзакции с сервером. Тем не менее, всегда будьте готовы сделать проверку на сервере ради безопасности.

16. Дайте вашим пользователям хорошие предупреждения

Это идет рука об руку с предыдущим пунктом для улучшения практики использования форм. Слишком много раз я заполнял форму, и там говорилось: «поля не были заполнены правильно». Ты умеешь писать внятно, к какой форм это имело отношение? Как только вы определили, что ваш пользователь сделал ошибку, пусть он узнает скорее и как можно более четко. Пусть текст о некорректном вводе поля отображается рядом с некорректным полем, и пусть ваш пользователь знает, что случилось с их входом. Мне нравится использовать JQuery’s Blur () в этом случае: как только пользователь переходит в следующее окно, предыдущие проверяются.

17. Попробуйте использовать AJAX для submit

Много раз результаты после заполнения формы были следующими: «Спасибо», «Проверьте свою электронную почту для подтверждения», или «Мы вернемся к вам, когда мы сможем». В таком случае, это ли не лучшее место для использования AJAX? Вы можете просто снизить форму передачи данных с JQuery или (Ваша любимая библиотека), и исчезнуть в своем сообщении.

18. Убедитесь, что форма работает без Javascript

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

Дизайн

19. Стиль формирует последовательность

Я не дизайнер, и я не претендую на эту роль, но я знаю многое: не располагать ваши поля формы в хаотичном положении. Ваша форма должна быть последовательна в своем порядке. Решите, Ваш ярлык будет слева или справа (или, может быть выше или ниже) , и придерживайтесь этого. Сделать все ваши вводы текста и поля такой же ширины. В пространстве все ваши поля одинаковы. Сохраните, по крайней мере, один край всех полей на одной линии. Tuts + формы комментариев – замечательные примеры хорошо-стилизованных форм.

20. Подумайте об использовании JavaScript последовательных Стилевых форм над разными платформами

С возрастными браузерами /операционными системами, согласованность элементов формы вряд ли возможна. . . без помощи JavaScript. Если вы хотите, чтобы ваши формы выглядели так же, практически на любом браузере нужно проверить jqTransform плагина Jquery, плагины, которые направлены непосредственно на решение проблемы совместимости. Просто включите его, звоните, и настройте CSS файл на свой вкус, оно работает с IE6 +, Safari 2 +, Firefox 2 +, и Chrome.

21.Пусть Вас вдохновляют другие

Если у вас возникли проблемы с придумыванием уникального дизайна формы для своего сайта, ищите вдохновение! Smashing Magazine имеет большую подборку форм и Smileycat «Элементы дизайна» Галерея имеет кучу Блогов Комментариев к формам, которые стоит проверить.

Заключение

22: Смотри вперед в HTML 5 Формы

HTML 5 имеет много функций для веб-форм. Две наиболее интересных из них имеют новые type для input (например, URL, электронной почты и дату) и DataList элемент, который может быть использован для простого автозаполнения. Когда эти и другие части спецификации выполнены, динамичные формы будут намного проще!

Перевод и редакция: Рог Виктор и Андрей Бернацкий.

Будем надеяться, что эти двадцать с лишним советов по работе с HTML формами на сайте, помогут вам.

Автор: Andrew Burgess.

Источник: http://net.tutsplus.com

E-mail:[email protected]

Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля