Как да направите красива форма за обратна връзка за сайт в html, css, php безплатно с примерен код,
Моето дълбоко убеждение е, че е много важно да сме наясно с [положителното] въздействие на HTML5 върху формулярите за контакт и как те ще функционират през следващите години.
Наистина не можем да внедрим всички нови функции днес, но не искате да сте сред изоставащите, когато тези функции най-накрая станат широко разпространени, нали?
Първо, искам да обърна внимание на факта, че това не е урок за Photoshop. Създадох красив формуляр за контакт, но в това, което следва, ще се съсредоточим върху изграждането му с помощта на най-новите техники за кодиране и как да го накараме да функционира правилно.
HTML5 маркиране
Първо отворете нов PHP файл и го запазете като индекс. php. За да създадем функциите на формуляра, ще трябва да използваме езика за програмиране PHP, така че ще ни трябва достъп до уеб сървър, за да проверим кода. В идеалния случай можете да използвате компютъра си като сървър с Xampp; или използвайте свободното място на онлайн хостинга, само в този случай ще трябва да качвате отново файловете всеки път, когато искате да ги проверите.
Имаме празен PHP документ, нека започнем да създаваме съответния doctype, който между другото е много по-лесен за създаване с HTML5, отколкото с предишната версия!
Да Да точно. Тук (т.е. в HTML5) няма да видите ужасяващи комбинации от букви и цифри. Всичко е много по-лесно -! DOCTYPE HTML > .
За сравнение, doctype на XHTML изглежда така: ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > .
Нашият следващстъпката трябва да бъде кодиране на основната структура на страницата. За целта трябва да погледнем отново дизайна на контактната форма и да я разделим логически на секции.
В този случай имаме секции: "заглавка", "съдържание" и "долен колонтитул". Всичко е много просто, нали? И с HTML5 пак ще бъде много по-лесно!
Точно така, не се шегувам. Без divs. Новите HTML5 тагове имат истинско значение и цели, които са много по-умни от залепването на div навсякъде.
Както можете да видите, дадох на всеки елемент клас "body", за да покажа, че принадлежат към основното съдържание и да гарантирам, че са стилизирани по съответния начин. Можете да направите всичко това с divs, разбира се, но само с няколко основни елемента на тялото; ще бъде толкова просто, колкото присвояването на класове.
Е, сега е моментът най-накрая да преминем към формата за контакт, нали? Очевидно маркирането за формата за контакт ще бъде в главния раздел > .
Ето как изглежда това маркиране. Нека изясня някои неща в него.
Може би сте забелязали, че входните тагове вече изглеждат малко по-различно: в XHTML те се затварят със знака "/", т.е. вход / > , докато в HTML5 те са опростени до въвеждане > .
входно име
Към всички входове > таговете получават атрибута "име". Ще говорим повече за това малко по-късно, когато преминем към създаването на PHP скрипт, който ще обработва данните, въведени във формата за контакт.
тип вход
Въвеждането на атрибута "type" демонстрира значителното предимство на HTML5 пред XHTML. Но, за съжаление, много нови въведени > типовете не могат да бъдат използвани в пълния си потенциал поради все още минимална поддръжка; радвам се, че ситуацията е скоровремето трябва да се промени и тези атрибути ще поемат огромна част от работата, правейки живота ни много по-лесен.
Въпреки това, вече можем да видим някои предимства, макар и малки, при използването на новите типове атрибути. Като изцяло положителния атрибут type="email" например. Въпреки че положителното му влияние не е толкова значимо, си струва
да се регистрира, въпреки че всички браузъри, които не го поддържат, разпознават този атрибут като type="text". Но при iPhone ситуацията е съвсем различна: този атрибут причинява промени в оформлението на клавиатурата, когато отидете в полето за въвеждане на „имейл“: клавишът за интервал става по-малък по размер и знакът „@“ се появява в центъра.
Атрибут заместител
Атрибутът "placeholder" се поддържа доста добре от най-новите браузъри. Тя ви позволява да присвоите стойност (т.е. текст) на текстово поле, което изчезва при поставяне на курсора и ако текстът не е въведен в избраното поле и курсорът бъде премахнат, той се появява отново.
И ето какво се случва след добавяне на всички маркировки към страницата:
Не е много сладък, нали? Така че е време да преминем към таблицата със стилове на CSS, за да дадем на нашата CSS форма за обратна връзка, така да се каже, презентация, а именно да я доближим до оригиналния дизайн, който беше представен в началото на статията. Нека дадем на текста на формуляра обичайната ориентация: така че текстът на полетата да е разположен не отляво надясно, а отгоре надолу.