Форма за обратна връзка html5 css3. Красива форма за обратна връзка без изображения, използваща чист CSS. Формуляр за подаване на данни

И така, завършваме поредицата от уроци по verst сайт от нулатас апартаментдизайн. Нека ви напомня, че ние проектирахме хедъра на уебсайта. Включено - раздел с картина на целия екран. Ето галерия с портфолио от творби. На - триколонно оформление. И като последна стъпка, днес го правим оформление на формата за обратна връзкаи мазе.

Това трябва да получим.

Няма да показвам целия код тук, твърде е дълъг. Можете да видите целия код и готовия резултат на jsfiddle.

Моята задача е да ви покажа принципите на оформлението, логиката, така да се каже, как мисли дизайнерът на оформление, когато гледа оформление. Първо, той мислено разделя цялото оформление на големи секции. След това всяка секция вътре е разделена на малки блокове. Вижте екранната снимка по-долу.

Самата форма за обратна връзка се поставя в тага дивс класа част_2_от_3и заема две трети от ширината на родителя.

След това идва вторият блок в тага дивс класа част_1_от_3. Ширината, която заема, е съответно една трета от родителския блок.

IN CSSстилове:

против (
дисплей: блок;
float:left;
марж: 3% 0 3% 1.5%;
}
.con:първо дете(
margin-left:0; /* натискане на блока с формата към левия ръб */
}
.part_2_of_3 (
ширина: 66%; /* ширина на блока с формата */
}
.part_1_of_3 (
ширина: 32%; /* ширина на информационния блок */
}
.cont-form(
padding-bottom: 25px; /* долен отстъп от формата на блок */
}
.cont-form div(
подложка: 5px 0 15px;
}
.cont-form input, .cont-form input, .cont-form textarea(
ширина: 42%; /* ширина на полетата за въвеждане на текст и имейл */
подложка: 15px;
дисплей: блок;
контур: няма;
цвят на фона: #fff; /* цвят на клетките на формуляра */
цвят: #888282; /* цвят на формата за въвеждане на текст */
размер на шрифта: 0.8em; /* размер на шрифта на въведения текст от формата */
float:left;
поле-дясно: 2em; /* десен отстъп */

стил на шрифта: курсив; /* въвеждане на текст в курсив */
рамка: 2px плътна #cacaca; /* граница на клетките на формуляра */
}
въвеждане на .cont-form(
margin-right: 0em; /* десен отстъп */
}
.cont-form textarea( /* стойности за текстовата област на формуляра */
подложка: 18px; /* всички полета в текстовата област */
дисплей: блок;
ширина: 93%; /* ширина на формата на текстовата област */
височина:180px; /* височина на формата на текстовата област */
цвят на фона: #fff; /* wdtn на фона на текстовата област */
контур: няма;
цвят: #888282; /* цвят на текста, въведен в текстовата област */
размер на шрифта: 0.8em; /* размер на шрифта на текстовата област */
стил на шрифта: курсив; /* курсив за текстовата област на формуляра */
border:2px solid #cacaca;
поле-отдолу: 2em;
}
въвеждане на .cont-form (
семейство шрифтове: Verdana, sans-serif;
размер на шрифта: 1em;
цвят:#fff;
подложка: 0.7em 1.4em;
поле-дясно: 2%;
цвят на фона: #a97b7b;
граница:няма;
дисплей: блок;
курсор: показалец;
контур: няма;
преобразуване на текст: главни букви; /* трансформиране в главни букви */
плаващ: надясно;
}
.comp_addp(
font-size:0.8em;
цвят:#525252;
височина на линията: 1.8em;
марж-долно: 2%;
}
.comp_add a(
font-size:1.1em;
цвят:#525252;
височина на линията: 1.8em;
марж-долно: 2%;
}
.list2 li img(
margin-top: 4px;
float:left;
}
.list2 li .icon(
float:left;
padding-left: 1em;
}

Разпределение на мазето

С оформлението на сутерена ситуацията е много по-проста. Вътре в етикет долен колонтитул, има блок дивс авторски права и линк.

Формата за обратна връзка, или казано по друг начин, е един от най-важните елементи на всеки уебсайт. И разбира се, както всички други елементи на потребителския интерфейс, елементите за контакт трябва да бъдат някак външно стилизирани и проектирани, за да привлекат вниманието на потребителите и да насърчат комуникацията.
Предлагам на вашето внимание няколко опции за стилове на формуляри за обратна връзка, изключително чрез 3, без използването на допълнителни изображения в дизайна. Нищо излишно, само кратки кодови фрагменти (снипети) за формуляри за контакт, направени в светли и тъмни цветове.

1. Форма за контакт в тъмни цветове

В зависимост от цвета на основния фон на страницата, основният фонов цвят на самата форма ще се променя визуално. Размерът на формата зависи от големината на съда, в който ще се постави формата.

Html рамката на формуляра е стандартна, необходимите полета за въвеждане и бутон „Изпращане“ са необходими за свързване с CSS, на всеки елемент от формуляра е присвоен определен клас, нищо сложно, няма да е трудно за разбиране.

CSS

Няма да навлизам в подробности за стиловете, само ще отбележа едно нещо: използвах някои свойства на CSS3 в дизайна, линеен градиент, ефект на сянка, леко заоблени ъгли и т.н., опитах се да постигна някакъв кръст -съвместимост с браузър за тези свойства, но в по-старите версии на браузърите формулярът все още ще изглежда малко по-различно ((.

/* Основен стил на формуляр */ форма ( margin: 0 auto; max-width: 95%; padding: 30px 30px 6px 30px; border: 1px solid rgba(0,0,0,.2); -moz-border-radius : 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; background: rgba( 0, 0, 0, 0.5); -moz-box-shadow: 0 0 13px 3px rgba(0,0,0,.5); -webkit-box-shadow: 0 0 13px 3px rgba(0,0,0) ,.5); box-shadow: 0 0 13px 3px rgba(0,0,0,.5); overflow: hidden; ) /* Поле за съобщение */ textarea( фон: rgba(255, 255, 255, 0.4) ; ширина: 100%; височина: 110px; граница: 1px solid rgba(255,255,255,.6); -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-background -clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; display: block; font-family: "Open Sans", sans-serif; font-size:18px; font-weight : 300; цвят: #fff; подложка-отляво:25px; подложка-отдясно:20px; подложка-отгоре:12px; margin-отдолу:20px; преливане: скрит; ) /* Полета за въвеждане */ вход (ширина: 100%; височина: 48px; граница: 1px solid rgba(255,255,255,.4); -moz-border-radius: 4px; -webkit-border-radius: 4px; border- радиус: 4px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; display: block; font-family: "Open Sans", sans-serif; шрифт -size:18px; font-weight: 300; color:#fff; padding-left:20px; padding-right:20px; margin-bottom:20px; ) input ( cursor:pointer; ) input.name ( background: rgba( 255, 255, 255, 0.4); padding-left:25px; ) input.email (фон: rgba(255, 255, 255, 0.4); padding-left:25px; ) input.message (фон: rgba(255, 255, 255, 0.4); padding-left:25px; ) ::-webkit-placeholder ( цвят: #fff; ) :-moz-placeholder ( цвят: #fff; ) ::-moz-placeholder ( цвят: #fff; ) :-ms-input-placeholder (цвят: #fff; ) input:focus, textarea:focus (фонов цвят: rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);-webkit-box-shadow: 0 0 5px 1px rgba(255,255,255,.5); кутия-сянка: 0 0 5px 1px rgba(255,255,255,.5); преливане: скрито; ) /* Стилове за бутона за изпращане */ .btn ( ширина: 138px; височина: 44px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; float:right; border : 1px плътен #253737; фон: #416b68; фон: -webkit-gradient(линеен, ляво горе, ляво долу, от(#6da5a3), до(#416b68)); фон: -webkit-linear-gradient(горе, # 6da5a3, #416b68); фон: -moz-linear-gradient(top, #6da5a3, #416b68); background: -ms-linear-gradient(top, #6da5a3, #416b68); background: -o-linear- градиент (отгоре, #6da5a3, #416b68); фоново изображение: -ms-linear-gradient(отгоре, #6da5a3 0%, #416b68 100%); подложка: 10. 5px 21px; -webkit-border-radius: 6px; -moz-border-radius: 6px; радиус на границата: 6px; -webkit-box-shadow: rgba(255,255,255,0.1) 0 1px 0, вмъкване rgba(255,255,255,0.7) 0 1px 0; -moz-box-shadow: rgba(255,255,255,0.1) 0 1px 0, вмъкване rgba(255,255,255,0.7) 0 1px 0; кутия-сянка: rgba(255,255,255,0.1) 0 1px 0, вмъкване rgba(255,255,255,0.7) 0 1px 0; текстова сянка: #333333 0 1px 0; цвят: #e1e1e1; ) .btn:hover ( граница: 1px плътен #253737; text-shadow: #333333 0 1px 0; фон: #416b68; фон: -webkit-градиент(линеен, ляво горе, ляво долу, от(#77b2b0), до (#416b68)); фон: -webkit-linear-gradient(top, #77b2b0, #416b68); background: -moz-linear-gradient(top, #77b2b0, #416b68); background: -ms-linear-gradient (отгоре, #77b2b0, #416b68); фон: -o-линеен градиент(отгоре, #77b2b0, #416b68); фоново изображение: -ms-линеен градиент(отгоре, #77b2b0 0%, #416b68 100% ); цвят: #fff;) .btn:active ( margin-top:1px; text-shadow: #333333 0 -1px 0; border: 1px solid #333333; background: #ffCC00; background: -webkit-gradient(linear) , ляво горе, ляво долу, от (#ffCC00), до (#ff6600)); фон: -webkit-linear-gradient(top, #ffcc00, #ff6600); фон: -moz-linear-gradient(top, # ffcc00, #ff6600); фон: -ms-линеен градиент(отгоре, #ffcc00, #ff6600); фон: -o-линеен градиент(отгоре, #ffcc00, #ff6600); фоново изображение: -ms-линеен -градиент (отгоре, #ffcc00 0%, #ff6600 100%); цвят: #fff; -webkit-box-shadow: rgba(255,255,255,0) 0 1px 0, вмъкване rgba(255,255,255,0.7) 0 1px 0; -moz-box-shadow: rgba(255,255,255,0) 0 1px 0, вмъкване rgba(255,255,255,0.7) 0 1px 0; кутия-сянка: rgba(255,255,255,0) 0 1px 0, вмъкване rgba(255,255,255,0.7) 0 1px 0; контур: няма; )

Може би това ще ви бъде интересно:

2. Форма за контакт в светли цветове

Втората опция за дизайн на формата за обратна връзка е представена в светли цветове; размерите на формуляра (ширина, височина), както в първия вариант, не са фиксирани и лесно ще се поберат в размерите на контейнера, където ще бъде този формуляр разположен.

HTML

Както и в първия вариант, Html структурата на формата за контакт е стандартна, елементите на формата с определени класове съответстват на класовете в CSS.

CSS

При оформянето на основните размери на форми и вътрешни елементи използвах процентни стойности за ширината, благодарение на които формата лесно може да се нагоди към размерите на контейнера, в който ще се намира. Цветовата схема на бутона „Изпращане“, неговият размер и местоположение могат лесно да се променят; просто експериментирайте с определени стойности.

/* Основни стилове на формуляри */ form( margin:0 auto; max-width:95%; box-sizing:border-box; padding:40px; border-radius:5px; background:RGBA(255,255,255,1); -webkit -box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .45); box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .45); ) /* Стилове на полето за въвеждане */ . текстово поле (височина:50px; ширина:100%; border-radius:3px; border:rgba(0,0,0,.3) 2px solid; box-sizing:border-box; font-family: "Open Sans", sans-serif; font-size:18px; padding:10px; margin-bottom:30px; ) .message:focus, .textbox:focus( outline:none; border:rgba(24,149,215,1) 2px solid; color:rgba( 24,149,215,1); ) /* Стилове на текстово поле */ .message( фон: rgba(255, 255, 255, 0.4); ширина:100%; височина: 120px; граница:rgba(0,0,0,.3 ) 2px solid; box-sizing:border-box; -moz-border-radius: 3px; font-size:18px; font-family: "Open Sans", sans-serif; -webkit-border-radius: 3px; border -radius: 3px; display:block; padding:10px; margin-bottom:30px; overflow:hidden; ) /* Основни стилове на бутони */ .button( height:50px; ширина:100%; border-radius:3px; border:rgba(0,0,0,.3) 0px плътен; кутия-оразмеряване: граница-кутия; padding:10px; фон:#90c843; цвят:#FFF; семейство шрифтове: "Open Sans", sans-serif; тегло на шрифта:400; размер на шрифта: 16pt; преход: фон .4s; курсор:показател; ) /* Промяна на фона на бутона при задържане */ .button:hover( background:#80b438; )

Има много опции за дизайн на формуляри за контакт, основното е да имате малко въображение и основни познания за CSS. На страниците на моя блог можете да намерите други и примери за стил на формуляри за обратна връзка.
За тези, които са особено невнимателни, искам да обясня още веднъж: формулярите, представени в статията, са само външна обвивка; за да могат формите действително да изпълняват функциите си, трябва да прикачите към тях манипулатор на скриптове, от които има много от тях, разпръснати в интернет, така че е убедително, моля, не пишете в коментарите, че формулярите не работят и т.н., всичко работи чудесно, просто трябва да разберете какво, къде и защо))).

С цялото си уважение, Андрю.

В тази кратка публикация ще ви покажа стъпка по стъпка как да създадете красива форма за контакт с помощта на чист CSS, без да използвате изображения. Формулярът ще има полета със следната информация: име, имейл, URL адрес, тема и текст на съобщението. За съвместимост между различни браузъри ще използваме префикси на доставчици, но за да съкратим кода, тук ще разгледаме оформлението без тях. .

Създаване на формуляр в HTML

Първо, малко обяснение на формата.

• Тип на въвеждане = имейл се използва за указване на поле, където потребителят може да въведе имейл адрес. Браузърите, които поддържат този тип поле, ще могат да определят дали потребителят е въвел валиден имейл адрес или не.
• Input type = url се използва за проверка дали е въведен валиден или валиден URL.
• Require = required указва състоянието на елемента на формуляра според изискванията. Браузърите, които поддържат този атрибут, блокират подаването на формуляра, докато не бъдат попълнени всички задължителни полета.
• Placeholder Този атрибут предоставя подсказка, така че потребителят да знае какво и в какъв формат да въвежда данни. Контейнерът изчезва, когато щракнете върху полето.

Създаване на раиран фон

За да създадете ефекта на обвивката, започнете със запълване на фона с райета.

#content( position:relative; margin:50px auto; width:400px; min-height:200px; z-index:100; padding:30px; border:1px solid #383838; background: #D1D1D1; /* Моят оголен фон * / фон: повтарящ се линеен градиент (-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px); border-radius:8px; box-shadow:0px 1px 6px #3F3F3F; )

Свойството repeating-linear-gradient ви позволява да създадете безкрайно повтарящ се линеен градиент. Първо наклонихме ивиците под ъгъл от 45 градуса и след това последователно оцветихме ивиците и им дадохме ширина в пиксели. Сега имаме градиентен фон. Остава само да добавите светлосив фон. Нека използваме псевдо-класа after:

/** моят „фалшив“ фон, който ще се движи върху ивиците **/ #content:after( background:#F9F9F9; margin:10px; position: absolute; content: " "; bottom: 0; left: 0; right: 0 ; отгоре: 0; z-индекс: -1; border:1px #E5E5E5 плътен; border-radius:8px; )

Създаване на H1 Header

За H1 хедъра избрах шрифта Questrial, за тялото на формата за контакт - Droid Sans, а за амперсанда - Alice. Всички тези шрифтове са в директорията с шрифтове на Google, така че всичко, което трябва да направя, е да използвам API кода на Google:

Сега нека създадем заглавието.

H1 (семейство шрифтове: "Questrial", Verdana, sans-serif; text-align:center; font-size:40px; padding:0; margin:0 0 20px 0; position:relative; color:#8C8C8C; ) / ** има хубав амперсанд **/ h1:after ( font-size:25px; color:#D6CFCB; content: "&"; text-align:center; display:block; width:100%; font-family: " Alice", Verdana, serif; text-shadow: 0px 1px 0px #fff; ) /** създаване на градиент отдолу **/ h1:before ( position:absolute; bottom:15px; content: " "; text-align:center ; дисплей:блок; височина:2px; ширина:100%; фон: линеен градиент(ляво, rgba(255,255,255,0) 0%,rgba(182,180,180,0.7) 42%,rgba(180,178,178,0) 43%,rgba (168,166,166.0) 50%, RGBA (180,178,178.0) 57%, RGBA (182,180,180.0.7) 58%, RGBA (238,237,237.0.3) 90%, RGBA (255,255,255.0) 100%); / * w3c * / / / / / / / / / / / / / / / / / / / / / / / / / / )

Нека добавим икони, без да използваме изображения

Ще направим това с помощта на икони на шрифтове. Можете да използвате шрифта на иконата, който е в прикачения файл, или можете да използвате всеки друг, обичам да създавам пакети с икони от сайта flaticon.com. Ползите от използването на шрифтове в нашия контекст са очевидни. Можем да манипулираме размера, цвета и дори анимацията на иконите. Не може да се каже същото за обикновените изображения. В допълнение, ние винаги печелим от качеството на дисплея на ретина дисплеите.

/** добавяме нашия шрифт на иконата !! */ @font-face ( font-family: "IconicStroke"; src: url("font/iconic_stroke-webfont.eot"); src: url("font/iconic_stroke-webfont.eot?#iefix") format(" embedded-opentype"), url("font/iconic_stroke-webfont.woff") format("woff"), url("font/iconic_stroke-webfont.ttf") format("truetype"), url("font/iconic_stroke -webfont.svg#IconicStrokeRegular") format("svg"); font-weight: normal; font-style: normal; ) .iconic:before( font-size:25px; font-family: "IconicStroke"; ) .iconic .link:before (съдържание: "/";) .iconic.quote-alt:before (съдържание: """;) .iconic.comment:before (съдържание: "q";) .iconic.user:before ( съдържание : "u"; ) .iconic.mail-alt:before ( съдържание: "M"; )

Сега можем да проектираме нашите полета за въвеждане на данни в неактивно и активно състояние.

/** премахваме червеното сияние около задължителните полета, тъй като вече използваме червената звезда */ input:required, textarea:required ( -moz-box-shadow:none; -webkit-box-shadow:none; -o- box-shadow:none; box-shadow:none; ) /** inputs and textarea**/ input:not(), textarea( outline:none; display:block; width:380px; padding:4px 8px; border:1px пунктиран #DBDBDB; цвят:#3F3F3F; семейство шрифтове: "Droid Sans", Tahoma,Arial,Verdana sans-serif; размер на шрифта:14px; border-radius:2px; преход:фон 0,2s линеен, box-shadow 0,6 s linear; ) input:not():active, textarea:active, input:not():focus, textarea:focus( background:#F7F7F7; border:dashed 1px #969696; box-shadow:2px 2px 7px #E8E8E8 inset ; ) input:not() ( height: 20px; ) textarea( min-height:150px; resize: vertical ) /* placeholder */ ::-webkit-input-placeholder ( color:#BABABA; font-style:italic; ) input:-moz-placeholder, textarea:-moz-placeholder( цвят:#BABABA; font-style:italic; )

Дизайн на бутона „Изпрати“ и подписи

За бутона Изпращане използваме типа поле type=submit. За съжаление, за да проектираме този тип поле, няма да можем да използваме псевдо-класовете:before и:after. Така че внедрих специалния символ директно в HTML кода. Разбира се, това не е най-доброто решение, така че можете просто да го премахнете.

/** Оформяне на бутона за изпращане **/ input( margin-left:235px; cursor:pointer; background:none; border:none; font-family: "Alice",serif; color:#767676; font-size:18px ; padding:10px 4px; border:1px solid #E0E0E0; text-shadow: 0px 1px 1px #E8E8E8; background: rgb(247,247,247); background: linear-gradient(top, rgba(247,247,247,1) 1%,rgba(242,242,242) ,1) 100%); border-radius:5px; box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #EAEAEA; преход:всички 0,2s линейни; ) input:hover( цвят:#686868; border- цвят: #CECECE; фон: линеен градиент (отгоре, rgba (244,244,244,1) 0%, rgba (242,242,242,1) 100%); кутия-сянка: 0px 1px 1px #FFF вмъкване, 0 0 0px 5px #E0E0E0; ) input:active, input:focus(position:relative; top:1px; color:#515151; background: linear-gradient(top, rgba(234,234,234,1) 0%,rgba(242,242,242,1) 100%); кутия -shadow:0px -1px 1px #FFF вмъкване, 0 0 0px 5px #E0E0E0; )

За да изглежда формата завършена, нека добавим хубави цветове и преходи към надписите, когато задържите курсора на мишката върху тях.

Label( цвят:#7F7E7E; -webkit-transition: цвят 1s лекота; -moz-transition: цвят 1s лекота; преход: цвят 1s лекота; ) label:hover( цвят:#191919; ) label:before( цвят:#C1BFBD ; преход: цвят 1s лекота; ) label:hover:before( цвят:#969696; преход: цвят 1s лекота; ) p( margin-bottom:20px;) .indication( цвят:#878787; font-size:12px; шрифт -style:italic; text-align:right; padding-right:10px; ) .required( цвят:#E5224C; )

Вместо заключение

Надявам се, че тази кратка публикация ви е помогнала да разберете по-добре възможностите на HTML5 и CSS3. Нека още веднъж подчертая, че това е само заготовка, която можете да използвате като основа за вашите разработки. В прикачения файл към публикацията формата за обратна връзка е адаптивна.

В тази статия ще научим как да оформяме формуляри, като използваме обратна връзка като пример и да използваме семантично маркиране за тях, ще разгледаме няколко тънкости и нюанси и ще се опитаме да направим формата ни да се показва възможно най-идентично в различни браузъри, до IE6.

Тази статия е последно актуализирана на 27 август 2013 г.

Бърз старт

Тагът се използва за създаване на формуляра

Нека се опитаме да добавим полета за попълване на потребителско име, имейл и бутон за изпращане на формуляра:

Таговете най-често се използват за създаване на низове

, в по-сложни форми към тях е прикрепен клас за стилизиране:

твоето име

електронна поща

Можете да използвате опция със списък с дефиниции, неномериран списък или таблица, което също ще бъде семантично доста правилно:

1. Полетата на формуляра са организирани с помощта на списък с дефиниции:

   твоето име

2. Опция за неподреден списък:
   • твоето име
3. Таблица като маркиране:

   твоето име

Обърнете внимание, че ние също така задаваме атрибут на име за всички полета, така че да имаме достъп до тях по-късно с помощта на скриптове. името трябва да е уникално и е препоръчително да му присвоите същата стойност като за id. Също така изрично задаваме празна стойност, за да защитим срещу грешки в браузърите.

И така, ето какво имаме в момента, без CSS стила за сега:

Форма за обратна връзка

Сега нашата форма изглежда доста проста и скучна, нека я усложним, добавим допълнителни полета и направим дизайн, например като този:

Дизайн на формуляр

Както можете да видите, тук добавихме възможност за избор на опция от списък с помощта на тагове И и възможност за въвеждане на потребителско съобщение . За да създадем две колони, използваме допълнителни тагове <div>с обвиване и сега маркирането ще бъде така:</p><p> <h2>Обратна връзка</h2> <form action="#" class="user-form"> <div class="wrap-form-element"> <div> <label for="user-name">твоето име ^*</label> <input type="text" id="user-name" name="user-name" class="form-element" placeholder="потребител" value="" required/> </div> <div> <label for="email">електронна поща ^*</label> <input type="email" id="email" name="email" class="form-element" placeholder="example@example.com" value="" required/> </div> <div> <label for="choice">Изберете опция</label> <select id="choice" name="choice" class="form-element"> <option value="Опция 1">Опция 1</option> <option value="Вариант 2">Вариант 2</option> <option value="Вариант 3">Вариант 3</option> </select> </div> </div> <div class="wrap-message"> <label for="message">Съобщение</label> <textarea id="message" name="message" class="form-element" placeholder="Текст на съобщението">

Кодът показва, че се използват функции на HTML5, като типа на имейл полето, контейнера и задължителните атрибути (те ви позволяват да правите без валидиране на JS форма) - ще ги разгледаме малко по-късно. За по-стари браузъри ще позволим частично грациозно влошаване, например ще пропуснем текстовите съвети в полетата (въпреки че те могат да бъдат внедрени с помощта на jQuery и плъгини) и ще валидираме въведените данни с помощта на JS и PHP. За да поддържаме IE под версия 9 на CSS3 свойства, нека свържем PIE скрипта.

Валидиране на формуляр в HTML5

Нека добавим валидиране към нашата форма. С HTML5 това е доста лесно за изпълнение, така че нека разгледаме тази опция.

Например, нека направим полето задължително.

Както можете да видите, добавен е само един задължителен атрибут. Сега, когато се опитате да изпратите формуляр с празно поле, ще се появи известие:

Появата на съобщението се различава в браузърите и, за съжаление, не се променя.

Можем също да посочим типа имейл за полето за въвеждане на имейл:

Това означава, че това поле предполага имейл адрес и елементът ще получи подходящо валидиране. Ясно демонстрирано на екранната снимка:

Подобна е ситуацията с url, дата и числови полета:

Всичко става много лесно, без JS/PHP скриптове.

Валидирането в HTML5 работи по подразбиране, но може също да бъде деактивирано - нека го добавим към елемента

Характеристики на оформлението на елементите на формата

текстово поле

В браузъри, базирани на двигателя на webkit, можете да промените размера , което може да бъде доста удобно. Но много често това свойство нарушава дизайна, така че трябва да използвате свойството resize: none, за да предотвратите преоразмеряването. Също така е възможно полето да се разтяга само хоризонтално или вертикално. <br>(за Safari и Chrome)</p> <p>IE за <textarea>добавя лента за превъртане; за да я премахнете, трябва да укажете overflow: auto .</p> <h3>Маркиране на полета в браузърите Chrome, Safari</h3> <p>Когато фокусирате върху полета в браузърите Chrome и Safari, те започват да се осветяват. За да премахнете това подчертаване, трябва да напишете следния CSS код:</p><p>Въвеждане, текстово поле ( контур: няма; )</p><h3>Точкова рамка във Firefox</h3> <p>FF, когато фокусира върху някои полета, ги подчертава с пунктирана рамка, което не винаги изглежда красиво. За да ги премахнем, ще напишем следните стилове:</p><p>Бутон::-moz-focus-inner, input ::-moz-focus-inner, input ::-moz-focus-inner, input::-moz-focus-inner ( граница: няма; )</p><p>Разбира се, препоръчително е да замените липсата на пунктирана рамка с друг еквивалент - за удобство на потребителя.</p> <h3>Премахване на бутона за чист текст и парола за показване в IE10</h3> <p>IE10 по подразбиране добавя бутон за ясен текст за текстови полета и бутон за показване на парола за полета за парола. И двете функции са много полезни, но понякога могат да развалят намерението на дизайнера. За щастие, те са много лесни за премахване; този малък фрагмент ще ви спести от тази функция на браузъра:</p><p>::-ms-clear ( дисплей: няма; )</p><h3>Нестандартни форми елементи</h3> <p>Оформянето на елементи на формата се обсъжда в отделни статии.</p> <p>В тази статия ще говорим за динамична форма за обратна връзка, която при промяна на размера на прозореца ще стане адаптивна към гледане. Тоест формулярът за обратна връзка ще бъде достъпен за преглед на всички видове устройства, на персонални компютри, лаптопи, смартфони и таблети.</p><p>Формата за обратна връзка ще се състои от 3 полета за въвеждане на данни - име, имейл адрес и текст на писмото. Всички полета ще бъдат задължителни и няма да можете да изпратите празен имейл. Полето за въвеждане на имейл адрес допълнително ще бъде валидирано за коректност на въвеждането. Данните ще бъдат представени в html код, стиловете за дизайн на формата за обратна връзка ще бъдат написани в отделен CSS файл. Въз основа на принципа на този скрипт е възможно по аналогия да се създават по-голям или по-малък брой полета за въвеждане.</p><p>Предимствата на използването на тази форма са непрекъснатата работа на сайта и динамичното подаване на данните от формата, без презареждане на страницата. Трябва също да се отбележи, че е лесно да се гледа на мобилни устройства.</p><p>Във файла send.php редактирайте следните редове: $to = "admin@site.ru"; $subject= "Съобщение от site.ru"; $header="От: site.ru";;</p><p> <div class="outer"> <div class="middle"> <div class="inner"> <div class="login-wr"> <h2>Напиши писмо</h2> <div class="form"> <form action="send.php" method="POST"> <input type="text" id="name" placeholder="Име" required> <input type="email" id="email" placeholder="електронна поща" required> <textarea id="message" required>

* Всички полета са задължителни