ХТМЛ5 Туториал за пријављивање са ХТМЛ5 обрасцима
ХТМЛ5 доноси многе могућности и побољшања веб обрасци, уведени су нови атрибути и типови уноса углавном како би олакшали живот веб програмера и омогућили боље искуство корисницима веба.
Дакле, у овом посту ћемо креирати страницу за пријаву користећи ХТМЛ5 обрасци да бисте видели како нове додане функције функционишу.
- Демо
- Довнлоад Соурце
ХТМЛ5 Инпут
Погледајмо следећу ознаку.
Ако сте раније радили са ХТМЛ обрасцима, ово ће вам изгледати познато. Али, такође ћете приметити разлике тамо. Улази имају плацехолдер и потребан атрибути, који су нови атрибути у ХТМЛ5.
Плацехолдер
Тхе плацехолдер атрибут дозвољава нам да дамо почетни текст у улазу који ће нестати када је у а фокус Претходно смо то радили са ЈаваСцрипт-ом, али сада постаје много лакше са овим новим атрибутом.
Обавезни атрибут
Тхе потребан атрибут ће поставити поље као обавезан и стога не би требало да буде празан пре него што се образац достави, тако да када корисник није попунио поље, појављује се следећа грешка.
Нови селектор је такође уведен у ЦСС3, :потребан да циљате поља са потребан аттрибуте. Ево примера;
инпут: рекуиред бордер: 1пк солид ред;
Тип улаза е-поште
Први тип улаза је емаил што је заправо нови тип поља додато у ХТМЛ5. Тхе емаил тип ће дати основну валидацију адресе е-поште у пољу. Када корисник не попуни поље са адресом е-поште, прегледач ће приказати следеће обавештење;
Помоћу типова уноса е-поште можете пружити и боље искуство за мобилне кориснике, као што су иПхоне и Андроид корисници, гдје ће приказати тастатура на екрану оптимизована за е-пошту са посвећеним “@” да бисте брже унели адресу е-поште.
Тхе Довнсидес
Нове карактеристике форме које се нуде у ХТМЛ5 су моћне и једноставне за имплементацију, али у неким областима још увек недостају. На пример;
Тхе плацехолдер аттрибуте, је подржан само у модерним претраживачима - Фирефок 3.7+, Сафари 4+, Цхроме 4+ и Опера 11+. Дакле, ако вам је потребна за рад у неподржаним прегледачима, можете користити ове полифиллове заједно са Модернизр.
Иста ствар иде и са потребан аттрибуте. Обавештење о грешци се не може персонализовати, грешка ће остати “Молим вас попуните ово поље” радије него “Молимо попуните Ваше Име”, ова подршка за атрибуте је такође ограничена на најновије претраживаче.
Дакле, употреба ЈаваСцрипт-а за провјеру обавезног поља је (за сада) боља опција.
фунцтион валидатеФорм () вар к = доцумент.формс ["логин"] ["усернаме"]. иф (к == нулл || к == "") алерт ("Мола, изполните име"); ретурн фалсе; Стилинг форме
У реду, сада ћемо украсити наш образац за пријаву са ЦСС-ом. Прво ћемо дати позадини узорак дрва у хтмл таг.
хтмл позадина: урл ('воод_паттерн.пнг'); фонт-сизе: 10пт; Затим, морамо уклонити дефаулт паддинг и маргин ин ул која обмотава целу улази и плута ли лево, тако да се улази приказују хоризонтално, један поред другог.
.логинформ ул паддинг: 0; маргин: 0; .логинформ ли дисплаи: инлине; флоат: лефт;
Од када плутамо ли, родитељи ће се срушити, тако да морамо да разјаснимо ствари око родитеља са цлеарфик хацком.
етикета дисплаи: блоцк; цолор: # 999; .цф: бефоре, .цф: афтер цонтент: ""; дисплаи: табле; .цф: после цлеар: ботх; .цф * зоом: 1; : фокус оутлине: 0;
У ЦСС3 имамо селектор негације. Дакле, ми ћемо га користити за циљање улази осим прихвати тип, који у овом случају ће циљати унос е-поште и лозинке;
.логинформ инпут: нот ([типе = субмит]) паддинг: 5пк; маргин-ригхт: 10пк; бордер: 1пк солид ргба (0, 0, 0, 0.3); бордер-радиус: 3пк; бок-схадов: инсет 0пк 1пк 3пк 0пк ргба (0, 0, 0, 0.1), 0пк 1пк 0пк 0пк ргба (250, 250, 250, 0.5);
На крају, дат ћемо малу стилску декорацију за прихвати на следећи начин.
.логинформ инпут [тип = пошаљи] бордер: 1пк солид ргба (0, 0, 0, 0.3); бацкгроунд: # 64ц8еф; / * Стари претраживачи * / бацкгроунд: -моз-линеар-градиент (топ, # 64ц8еф 0%, # 00а2е2 100%); / * ФФ3.6 + * / бацкгроунд: -вебкит-градиент (линеарни, леви врх, леви дно, боја-стоп (0%, # 64ц8еф), боја-стоп (100%, # 00а2е2)); / * Цхроме, Сафари4 + * / бацкгроунд: -вебкит-линеар-градиент (врх, # 64ц8еф 0%, # 00а2е2 100%); / * Цхроме10 +, Сафари5.1 + * / бацкгроунд: -о-линеар-градиент (топ, # 64ц8еф 0%, # 00а2е2 100%); / * Опера 11.10+ * / бацкгроунд: -мс-линеар-градиент (топ, # 64ц8еф 0%, # 00а2е2 100%); / * ИЕ10 + * / бацкгроунд: линеарно-градијент (до дна, # 64ц8еф 0%, # 00а2е2 100%); / * В3Ц * / филтер: прогид: ДКСИмагеТрансформ.Мицрософт.градиент (стартЦолорстр = "# 64ц8еф", ендЦолорстр = "# 00а2е2", ГрадиентТипе = 0); / * ИЕ6-9 * / цолор: #ффф; паддинг: 5пк 15пк; маргин-ригхт: 0; маргин-топ: 15пк; бордер-радиус: 3пк; текст-сенка: 1пк 1пк 0пк ргба (0, 0, 0, 0.3);
То је то, сада можете испробати образац за пријаву са следећих линкова.
- Демо
- Довнлоад Соурце
Финал Вордс
У овом водичу смо погледали неколико нових функција у ХТМЛ5 обрасцима:плацехолдер, потребан и емаил врсте уноса за креирање једноставне странице за пријаву. Такође смо дошли до недостатака атрибута, тако да можемо одлучити да се примени бољи приступ.
У следећем посту ћемо погледати још једну нову ХТМЛ5 форму, зато останите у току.
