Страница за вход в HTML5 урок с HTML5 формуляри
HTML5 носи много функции и подобрения уеб формуляри, Въведени са нови атрибути и типове входни данни главно да улесни живота на уеб разработчиците и да осигури по-добър опит на уеб потребителите.
Така че в този пост ще създадем страница за вход, използвайки HTML5 формуляри за да видите как работят новите добавени функции.
- Демонстрация
- Изтеглете Източник
Въвеждане на HTML5
Нека разгледаме следната маркировка.
Ако преди сте работили с HTML форми, това ще ви изглежда познато. Но ще забележите и различия там. Входовете са контейнер и длъжен атрибути, които са нови атрибути в HTML5.
Заместител
Най- контейнер атрибутът ни позволява да дадем първоначален текст на входа, който ще изчезне, когато е в a фокус По-рано го използвахме с JavaScript, но сега става много по-лесно с този нов атрибут.
Задължителен атрибут
Най- длъжен атрибутът ще определи полето като задължително и затова не трябва да се оставя празно преди подаването на формуляра, така че когато потребителят не е попълнил полето, ще се появи следната грешка..
Нов селектор също е въведен в CSS3, необходима към целевите полета с длъжен атрибут. Ето един пример;
вход: задължителен border: 1px плътно червен;
Тип въвеждане на имейл
Първият тип вход е електронна поща което всъщност е нов тип поле добавени и в HTML5. Най- електронна поща тип ще даде основна проверка на имейл адреса в полето. Когато потребителят не попълни полето с имейл адрес, браузърът ще покаже следното уведомление;
Използването на входни типове за електронна поща може да даде по-добър опит за мобилни потребители, като потребители на iPhone и Android, където ще покаже оптимизирана за електронна поща клавиатура на екрана със специално предназначение “@” за по-бързо въвеждане на имейл адреса.
Недостатъците
Новите функции на формата, предлагани в HTML5, са мощни и лесни за изпълнение, но все още им липсва в някои области. Например;
Най- контейнер атрибут, се поддържа само в модерни браузъри - Firefox 3.7+, Safari 4+, Chrome 4+ и Opera 11+. Така че, ако се нуждаете от това, за да работите в неподдържани браузъри, можете да използвате тези полифункции заедно с Modernizr.
Същото се случва и с длъжен атрибут. Уведомлението за грешка не може да бъде персонализирано, грешката ще остане “Моля, попълнете това поле” отколкото “Моля, попълнете Вашето Име”, тази атрибутна поддръжка също е ограничена до най-новите браузъри.
Така че, използването на JavaScript за потвърждаване на задължителното поле е (досега) по-добър вариант.
функция validateForm () var x = document.forms ["login"] ["username"]. if (x == null || x == "") alert ("Моля, попълнете потребителското име"); return false; Оформяне на формулярите
Добре, сега нека украсим формата си за вход с CSS. Първо ще дадем на фона дървесен модел в HTML свободен край.
html фон: url ('wood_pattern.png'); размер на шрифта: 10pt; След това трябва да премахнем подложката по подразбиране и маржа в ул таг, който обгръща целия входове и плува Ли наляво, така че входовете да се показват хоризонтално, един до друг.
.loginform ul подложка: 0; марж: 0; .loginform li display: inline; поплавък: наляво;
Тъй като ние плаваме Ли, родителите ще се сринат, така че ние трябва да изчистим нещата около родителя с clearfix hack.
етикет display: block; цвят: # 999; .cf: before, .cf: after content: ""; дисплей: маса; .cf: след ясно: и двете; .cf * zoom: 1; : фокус контур: 0;
В CSS3 имаме селектора за отрицание. Така че ще го използваме, за да се насочим входове различни от. \ t Изпращане тип, което в този случай ще се насочи към въвеждането на имейли и пароли;
.loginform input: not ([type = submit]) запълване: 5px; margin-right: 10px; граница: 1px твърдо rgba (0, 0, 0, 0.3); граничен радиус: 3px; box-shadow: вмъкване 0px 1px 3px 0px rgba (0, 0, 0, 0.1), 0px 1px 0px 0px rgba (250, 250, 250, 0.5);
И накрая, ще дадем малко стилна украса за Изпращане бутон, както следва.
.loginform вход [type = представя] border: 1px твърдо rgba (0, 0, 0, 0.3); фон: # 64c8ef; / * Стари браузъри * / background: -moz-linear-gradient (отгоре, # 64c8ef 0%, # 00a2e2 100%); / * FF3.6 + * / фон: -webkit-градиент (линеен, ляв отгоре, ляво долу, цветен стоп (0%, # 64c8ef), стоп-цвят (100%, # 00a2e2)); / * Chrome, Safari4 + * / background: -webkit-линеен градиент (отгоре, # 64c8ef 0%, # 00a2e2 100%); / * Chrome10 +, Safari5.1 + * / фон: -о-линеен градиент (отгоре, # 64c8ef 0%, # 00a2e2 100%); / * Opera 11.10+ * / background: -ms-linear-gradient (отгоре, # 64c8ef 0%, # 00a2e2 100%); / * IE10 + * / фон: линеен градиент (до дъното, # 64c8ef 0%, # 00a2e2 100%); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 64c8ef", endColorstr = "# 00a2e2", GradientType = 0); / * IE6-9 * / цвят: #fff; пълнеж: 5px 15px; margin-right: 0; margin-top: 15px; граничен радиус: 3px; text-shadow: 1px 1px 0px rgba (0, 0, 0, 0.3);
Това е, сега можете да опитате формата за влизане от следните връзки.
- Демонстрация
- Изтеглете Източник
Заключителни думи
В този урок разгледахме няколко нови функции в HTML5 формулярите:контейнер, длъжен и електронна поща входни типове, за да създадете проста страница за вход. Ние също така сме преминали през недостатъците на атрибутите, така че можем да решим по-добър подход, който да се прилага.
В следващия пост ще разгледаме още един нов HTML5 формуляр, така че останете на линия.
