Katika makala hii tutazungumza juu ya fomu ya maoni yenye nguvu, ambayo, wakati saizi ya dirisha inabadilika, itabadilika kwa kutazama. Hiyo ni, fomu ya maoni itapatikana kwa kutazamwa kwa kila aina ya vifaa, kwenye kompyuta za kibinafsi, kompyuta ndogo, simu mahiri na kompyuta kibao.

Fomu ya maoni itakuwa na sehemu 3 za kuingiza data - jina, barua pepe na maandishi ya barua. Sehemu zote zitahitajika, na hutaweza kutuma barua pepe tupu. Sehemu ya kuingiza anwani ya barua pepe pia itathibitishwa kwa usahihi wa ingizo. Data itawasilishwa katika msimbo wa html, mitindo ya muundo wa fomu ya maoni itaandikwa katika faili tofauti ya CSS. Kulingana na kanuni ya script hii, inawezekana kuunda, kwa kufanana, idadi kubwa au ndogo ya mashamba ya pembejeo.

Faida za kutumia fomu hii ni uendeshaji unaoendelea wa tovuti na uwasilishaji wa data kutoka kwa fomu, bila kupakia upya ukurasa. Inapaswa pia kuzingatiwa kuwa ni rahisi kutazama kwenye vifaa vya simu.

Katika faili ya send.php, hariri mistari ifuatayo: $to = " [barua pepe imelindwa]"; $subject= "Ujumbe kutoka site.ru"; $header="Kutoka: site.ru";;

Andika barua

* Sehemu zote zinahitajika

Tuma @import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto"); html, mwili ( urefu: 100%; pedi: 0; ukingo: 0; ) mwili ( usuli: #d3dce1; fonti-familia: "Roboto", sans-serif; ukubwa wa fonti: 14px; ) .nje ( onyesho: jedwali ; upana: 100% urefu: 100% linganisha maandishi: katikati ( onyesho: kisanduku cha meza; panga kwa wima: katikati; ) .ndani ( panga maandishi: katikati; upana: otomatiki; tambarare: 0 15px; ; ) .login-wr ( nafasi: jamaa; ukingo: 0 otomatiki; usuli: #fff; upana wa juu: 550px; kivuli-kisanduku: 3px 3px 24px #999; pedi: 15px 15px 15px 15px; ) align- : kushoto-ukubwa: 1.6em pedi: 0 10px chini: 1px imara #474747: 20px; 40px muhtasari: 0; -moz-mtindo-wa-muhtasari: hakuna) kitufe ( urefu: 40px; muhtasari: 0; -moz-style-style: none; ) ingizo ( background: url("img/user.png") hakuna kurudia kushoto katikati ya 10px; ) eneo la maandishi ( mandharinyuma: url("img/pencil.png") hakuna kurudia kushoto 10px top 10px; ) eneo la maandishi ( upana: calc(100% - 55px); urefu: 120px; mpaka: 1px imara #bbb; pedi: 10px 10px 10px 45px; saizi ya fonti: 14px) ingizo, ingizo ( upana: calc (100% - 45px); upana wa juu: 250px; mpaka: 1px imara #bbb; padding: 0 0 0 45px; ukubwa wa fonti: 1 ; ) pembejeo:zingatia, ingizo:zingatia (mpaka: 1px imara #2196f3; ) p ( pedi-chini: 10px; ) kitufe ( upana: 100%; upana wa juu: 150px; usuli: #e6ebee; mpaka: hakuna; mpaka -chini: 5px imara #d3dce1; ukubwa wa fonti: 14px: mpito wa kisanduku .4s;

$(kazi() ( $("#loader").hide(); $("fomu").wasilisha(kazi(e) ( var name = $("#jina").val(); var email = $("#email").val(); var message = $("#message").val( var data = "name=" + name + "&email=" + email + "&message=" + message). ; if(data) ( $.ajax(( type: "POST", url: "./send.php), data: data, beforeSend: function(html) ( $("#loader") .show(); $("#submit").hide(); ), mafanikio: function(html)( $("#loader").hide(); $("#matokeo").html(html); ) )); ) kurudi kwa uwongo);

1. Programu-jalizi ya kuunda fomu za mtandaoni "jFormer"

Uundaji wa fomu za mawasiliano: maoni, maoni, fomu ya kuingia, fomu ya usajili na kuangalia usahihi wa habari iliyoingia.

2. Fomu ya usajili ya hatua kwa hatua kwa kutumia jQuery

Fomu nadhifu na kujaza hatua kwa hatua. Chini ni kiashiria cha kukamilisha fomu.

3. Hatua kwa hatua fomu

Kujaza fomu kwa hatua kadhaa na kuangalia ikiwa imejazwa kwa usahihi.

4. Fomu ya mawasiliano ya tovuti

Uthibitishaji wa usahihi wa taarifa iliyoingia unafanywa kwa kuruka kabla ya kutuma ujumbe kwa kutumia javascript.

5. Uhuishaji byte kati ya fomu kwa kutumia jQuery

Kubadili uhuishaji kwa kutumia jQuery kati ya fomu ya kuingia kwenye tovuti, fomu ya usajili na uga wa kurejesha nenosiri. Kwenye ukurasa wa onyesho, bofya kiungo cha njano ili kuona athari.

6. Fomu ya maoni ya PHP ya kuondoka

Suluhisho sawa linaweza kutumika kumpa mgeni fursa ya kuwasiliana haraka na mmiliki wa tovuti kutoka kwa ukurasa wowote. Kwenye ukurasa wa onyesho, bofya kwenye kishale kilicho hapa chini ili kufungua fomu.

7. Fomu ya usajili ya PHP kwa kutumia jQuery na CSS3

Fomu iliyo na uthibitishaji wa usahihi wa habari iliyoingizwa.

8. Fomu ya usajili ya PHP katika mtindo wa Facebook

Fomu nzuri ya usajili inayotekelezwa kwa kutumia CSS, PHP na jQuery.

9. Fomu ya mawasiliano ya jQuery "SheepIt"

Uwezo wa kuongeza sehemu mpya kabla ya kutuma ujumbe umetekelezwa.

10. Fancy AJAX Fomu ya Mawasiliano

Fomu nzuri ya maoni nadhifu ya PHP iliyo na uthibitishaji wa usahihi wa habari iliyoingizwa. Teknolojia: CSS, PHP, jQuery.

11. Mfumo wa uidhinishaji/usajili kwenye tovuti 12. Fomu ya kuwasilisha data

Kwa uthibitisho wa kujaza sahihi.

13. jQuery "Inayoweza Kuwasiliana" Plugin

Ili kutekeleza fomu ya maoni inayotoka kwa kutuma ujumbe haraka.

Kwa hivyo, tunakamilisha mfululizo wa masomo ya kuunda tovuti kutoka mwanzo na muundo wa gorofa. Acha nikukumbushe kwamba tulitengeneza kichwa cha tovuti. Imewashwa - sehemu iliyo na picha kwenye skrini nzima. Hapa kuna nyumba ya sanaa iliyo na kazi za kwingineko. Washa - mpangilio wa safu wima tatu. Na kama hatua ya mwisho, leo tunafanya mpangilio wa fomu ya maoni na kijachini.

Hivi ndivyo tunapaswa kupata.

Sitaonyesha nambari zote hapa, ni ndefu sana. Unaweza kuona nambari nzima na matokeo ya kumaliza kwenye jsfiddle.

Kazi yangu ni kukuonyesha kanuni za mpangilio, mantiki, kwa kusema, jinsi mbuni wa mpangilio anavyofikiria wakati wa kuangalia mpangilio. Kwanza, anavunja kiakili mpangilio mzima katika sehemu kubwa. Kisha kila sehemu ndani imegawanywa katika vitalu vidogo. Tazama picha ya skrini hapa chini.

Fomu ya maoni yenyewe imewekwa kwenye div tag na darasa part_2_of_3 na inachukua theluthi mbili ya upana wa mzazi.

Kisha inakuja kizuizi cha pili kwenye tepe ya div na darasa part_1_of_3 . Upana unaochukua ni sawa na theluthi moja ya kizuizi cha mzazi.

Katika mitindo ya CSS:

Con(
kuonyesha: kuzuia;
kuelea:kushoto;
kiasi: 3% 0 3% 1.5%;
}
.con:mtoto wa kwanza(
ukingo-kushoto:0; /* kubonyeza kizuizi na fomu kwenye ukingo wa kushoto */
}
.sehemu_2_ya_3 (
upana: 66%; /* upana wa kizuizi na fomu */
}
.sehemu_1_ya_3 (
upana: 32%; /* upana wa kizuizi cha habari */
}
.fomu ya kuendelea(
padding-chini: 25px; /* ujongezaji wa chini kutoka kwa umbo la kuzuia */
}
.cont-form div(
pedi: 5px 0 15px;
}
.cont-form input,.cont-form input,.cont-form textarea(
upana: 42%; /* upana wa uwanja wa kuingiza maandishi na barua pepe */
pedi: 15px;
kuonyesha: kuzuia;
muhtasari: hakuna;
rangi ya mandharinyuma: #fff; /* rangi ya seli za fomu */
rangi: #888282; /* rangi ya ingizo la maandishi ya fomu */
saizi ya herufi: 0.8em; /* saizi ya fonti ya ingizo la maandishi ya fomu */
kuelea:kushoto;
ukingo-kulia: 2m; /* ujongezaji wa kulia */

mtindo wa fonti: italiki; /* ingiza maandishi kwa italiki */
mpaka: 2px imara #cacaca; /* mpaka wa seli za fomu */
}
.ingizo la fomu ya kuendelea(
ukingo-kulia: 0em; /* ujongezaji wa kulia */
}
.cont-form textarea( /* maadili ya eneo la maandishi ya fomu */
pedi: 18px; /* sehemu zote katika eneo la maandishi */
kuonyesha: kuzuia;
upana: 93%; /* upana wa umbo la eneo la maandishi */
urefu:180px; /* urefu wa umbo la eneo la maandishi */
rangi ya mandharinyuma: #fff; /* wdtn ya mandharinyuma ya eneo la maandishi */
muhtasari: hakuna;
rangi: #888282; /* rangi ya maandishi iliyoingia kwenye eneo la maandishi */
saizi ya herufi: 0.8em; /* ukubwa wa fonti wa eneo la maandishi */
mtindo wa fonti: italiki; /* italiki za eneo la maandishi ya umbo */
mpaka:2px imara #cacaca;
ukingo-chini: 2em;
}
.ingizo la fomu ya kuendelea (
font-familia: Verdana, sans-serif;
saizi ya herufi: 1em;
rangi:#fff;
padding: 0.7em 1.4em;
ukingo wa kulia: 2%;
rangi ya asili: #a97b7b;
mpaka: hakuna;
kuonyesha: kuzuia;
mshale: pointer;
muhtasari: hakuna;
maandishi-kubadilisha: herufi kubwa; /* badilisha kuwa herufi kubwa */
kuelea: kulia;
}
.comp_ongeza(
saizi ya herufi: 0.8em;
rangi:#525252;
urefu wa mstari: 1.8m;
ukingo-chini: 2%;
}
.comp_ongeza a(
saizi ya fonti: 1.1em;
rangi:#525252;
urefu wa mstari: 1.8m;
ukingo-chini: 2%;
}
.orodha2 li img(
ukingo-juu: 4px;
kuelea:kushoto;
}
.orodha2 ikoni ya .(
kuelea:kushoto;
padding-kushoto: 1em;
}

Mpangilio wa basement

Kwa mpangilio wa basement, hali ni rahisi zaidi. Ndani ya lebo ya kijachini, kuna kizuizi cha div kilicho na hakimiliki na kiungo.

Muundo wa Fomu ya HTML

Kila mstari umewekwa kwenye chombo cha DIV, kwa hivyo ni rahisi zaidi kuweka lebo karibu na sehemu ya ingizo. Fomu nzima imewekwa katika DIV pana ya 660px katikati ya ukurasa.

Andika barua!

*Nga zenye kinyota zinahitajika

Jina lako *

Barua pepe *

Mada*

Ujumbe *

Muundo wa Fomu ya CSS

Uhuishaji wote umetengenezwa na sifa mpya za CSS 3 Mandharinyuma yote yanafanywa kwa gradient za kawaida. Zingatia uhuishaji wa kitufe. Vivuli vya kuelea pia hufanywa katika CSS3.

/* mitindo ya fomu */
fomu.safu(
kuonyesha: kuzuia;
pedi: 7px 8px;
ukingo-chini: 7px;
}
fomu .safu:elea (
usuli: #f1f7fa;
}

Lebo ya fomu (
kuonyesha: inline-block;
saizi ya herufi: 1.2em;
font-uzito: ujasiri;
upana: 120px;
padding: 6px 0;
rangi: #464646;
wima-align: juu;
}
fomu .req ( rangi: #ca5354; )

Form.note(
saizi ya herufi: 1.2em;
urefu wa mstari: 1.33em;
font-uzito: kawaida;
padding: 2px 7px;
ukingo-chini: 10px;
}

Ingizo la fomu:focus, form textarea:focus ( muhtasari: hakuna; )

/* mitindo ya kishika nafasi: http://stackoverflow.com/a/2610741/477958 */
::-webkit-input-placeholder ( rangi: #aaafbd; mtindo wa fonti: italiki; ) /* WebKit */
:-moz-placeholder ( rangi: #aaafbd; mtindo-fonti: italiki; ) /* Mozilla Firefox 4 hadi 18 */
::-moz-kishika nafasi ( rangi: #aaafbd; mtindo wa fonti: italiki; ) /* Mozilla Firefox 19+ */
:-ms-input-placeholder ( rangi: #aaafbd; mtindo-fonti: italiki; ) /* Internet Explorer 10+ */

Form.txt(
kuonyesha: inline-block;
pedi: 8px 9px;
padding-kulia: 30px;
upana: 240px;
font-familia: "Oksijeni", sans-serif;
saizi ya herufi: 1.35em;
font-uzito: kawaida;
rangi: #898989;
}

Kwa kumalizia, ningependa kusema kwamba pamoja na maendeleo ya CSS3 na HTML5, kuunda fomu ya maoni na uhuishaji, vivuli, nk. ikawa sio kazi ngumu sana. Natumai somo hili litakusaidia katika kuunda fomu zako za wavuti yako.

Hivi ndivyo fomu ya maoni itakavyokuwa hatimaye

Hebu tuangalie mara moja nyanja zote ambazo zitapatikana kwako katika fomu hii.

Muundo wa sehemu za fomu za maoni

• Jina la mtumaji
• anwani ya posta
• simu
• kampuni ya mtumaji
• tovuti ya mtumaji
• bidhaa (mwelekeo)
• orodha ya huduma zinazohitajika
• Taarifa za ziada
• ulinzi wa antispam / roboti

Vipengele na uwezo

• kuzuia kitufe cha "tuma" hadi hali muhimu zifikiwe
• kichaguzi rahisi cha kuangalia na kulinda dhidi ya roboti
• kitufe cha ziada "futa sehemu zote"

Je, ni nini kimejumuishwa katika fomu ya maoni?

• Alama ya HTML (uundaji wa muundo)
• Kuunda sehemu za fomu kwa kutumia CSS/SCSS
• jQuery + js
• Kidhibiti cha PHP

Inaunda alama za HTML

Kwa hivyo, wacha tuangalie alama za fomu:

Tafadhali jitambulishe: * Onyesha barua pepe yako: * Onyesha nambari yako ya simu: * Andika ni kampuni gani unatoka: Onyesha tovuti yako: Bidhaa: Chagua huduma: Hakuna huduma iliyochaguliwa Huduma_ Huduma_ Huduma_ Huduma_ Huduma_ Huduma_ Huduma_ Ziada. Habari: Mimi ni Roboti Mimi ni mwanadamu Sehemu za Wazi zilizo na alama ya nyota * zinahitajika.

Kuna sehemu tatu za kwanza ambazo zina kitambulisho na tukio fulani la js onkeyup="checkParams()" (tutazihitaji baadaye). Watakuwa chini ya uthibitisho wa lazima wa usahihi wa kuingiza data. Sifa inayohitajika inawajibika kwa hili. Ikiwa unahitaji kuondoa au kufanya uga mwingine kuwa wa lazima, ondoa/ongeza tu sifa hii.

Sehemu kadhaa za ziada ambazo hazihitajiki.

Kiteuzi cha kuchagua huduma zinazotolewa chagua .

Sehemu ya maandishi ya habari ya ziada.

Kiteuzi cha kuangalia "ubinadamu" - Ninafanya kazi | Mimi ni binadamu.

Vifungo viwili: Tuma na Futa habari katika sehemu zilizojaa.

Kuwa waaminifu, bado hakuna kisanduku cha kuteua ili kuthibitisha idhini ya kuchakata data, lakini kuiongeza, natumaini, hakutakuletea matatizo yoyote.

Uundaji wa muundo wa CSS/SCSS

Sehemu zote za fomu zimeundwa kwa kutumia kisanduku cha kubadilika cha CSS (Moduli ya Mpangilio wa Sanduku Inayobadilika) na kugawanywa katika vikundi vilivyo na madarasa ya ziada. Bila shaka, unaweza kuunda mitindo yako mwenyewe. Ikiwa unajua CSS, basi unaweza kuweka muundo kwa vipengele vyote vya fomu bila matatizo yoyote, huhitaji hata msaada wangu.

Fomu ( ingizo, ingizo, ingizo, eneo la maandishi, chagua ( onyesho: kizuizi; pedi: 12px 15px; urefu wa mstari: 1.5; upana: 100%; saizi ya fonti: 16px; mpaka: 1px imara #ced4da; radius ya mpaka: . 25rem; klipu ya mandharinyuma: kisanduku-cha-nyuma: #fff kisanduku-kivuli: 0 1px 0 rgba(255, 255, 255, .05), kipengee 0 1px 0 rgba(0, 0, 0, upana: 95%; ) ) .col-6 ( nafasi: jamaa; flex: 0 0 50%; upana-max: 50%; ) .pt-3 ( padding-top: 1rem; ) .form-group ( margin- chini: 1rem; lebo ( urefu wa mstari: 1.7; nafasi ya herufi: .3px; kubadilisha maandishi: herufi kubwa; saizi ya fonti: 14px; uzani wa fonti: 900; ) eneo la maandishi ( urefu wa chini: 110px; resize: wima; )))

Kuweka msimbo wa PHP

Sasa tunaendelea kwenye kishughulikiaji cha fomu, ambapo vitendo vyote huanza kulingana na kiteuzi kilichochaguliwa - Bot/Binadamu.

Kuna nini hapo?

• kichwa ("Onyesha upya: 5; URL=https://www.site.ru"); - baada ya kujaza fomu na bot, hutuma kwenye ukurasa wa taarifa na baada ya sekunde 5 inarudi kwa moja iliyotajwa kwenye shamba.
• barua, jina, simu, ... - kuanzisha ulinganifu wa sehemu za html. Hapa unahitaji kutoa majina yote muhimu="" katika fomu ya maoni. Kwa hivyo, katika uwanja wa huduma unahitaji kutaja mpangilio sawa wa chaguzi kama kwenye markup ya html.
• $mess ni mwili wa ujumbe utakaofika katika barua. Unaweza kuzibadilisha, kubadilisha majina yao, au kufuta/kutoa maoni tu zile ambazo huzihitaji.
• $headers ni laini inayohitajika inayoonyesha usimbaji wa herufi. Ikiwa utafuta au kubadilisha charset=utf-8 kwa bahati mbaya, basi maneno yako yote yatageuka kuwa hieroglyphs.
• kichwa - baada ya kubofya kifungo kwa ufanisi, mgeni atatumwa kwenye ukurasa wa taarifa na baada ya sekunde 5 ataelekezwa kwenye ukurasa maalum. Au sivyo ( itapokea arifa ya hitilafu.

Vitu vya ziada vya js na jQuery

Hapo awali, tuliangalia kiolezo cha fomu ya html, ambamo tuliona vitambulisho na vitendakazi vilivyoongezwa kwa sehemu tatu zinazohitajika. Ni wakati wa kujua ni kwa nini waliongezwa.

Angalia msimbo wa js. Hiki ni kizuia vitufe ambacho, kikizimwa, humzuia mgeni kukibofya kabla ya sehemu unazohitaji kujazwa.

checkParams() ( var name = $("#jina").val(); var email = $("#email").val(); var phone = $("#simu").val(); ikiwa (name.length != 0 && email.length >= 6 && phone.length >= 10) ( $("#submit").removeAttr("disabled"); ) vinginevyo ( $("#submit"). attr("walemavu", "walemavu");

Tunaingiza kitambulisho kwenye sehemu zinazohitajika na kuzimwa kwenye kitufe ili kuzifunga kwenye hati hii. Unaweza kubadilisha majina na wingi wao kwa kuongeza/kuondoa mistari muhimu ya var. Lakini ukiziongeza au kuziondoa, usisahau kubadilisha masharti katika mstari ikiwa (name.length != 0 && email.length >= 6 && phone.length >= 10) ( .

Je, mstari huu unafanya kazi vipi?

Kila kitu kinategemea idadi ya wahusika katika uwanja maalum, i.e. urefu wake.

• ikiwa (jina.length != 0 - inaonyesha kwamba sehemu haipaswi kuwa tupu. Soma kama - "ikiwa idadi ya herufi kwenye sehemu si sifuri, basi ..."
• && - inachanganya masharti (na)
• email.length >= 6 — idadi ya herufi lazima iwe kubwa kuliko au sawa na 6. Kwa nini sita? Nilionyesha nambari hii kwa sababu anwani ya barua pepe ya chini zaidi ni herufi 6. Je, tuangalie? @bk.ru - wahusika 6.
• phone.length >= 10 - kubwa kuliko au sawa na herufi kumi. Kwa nini 10 na sio 11? Wakati wa kujaza uwanja huu, mgeni anaweza kuonyesha nambari yake ya simu ama na +7 au na 8. Kwa hivyo, ni bora kuashiria 10.

Ni hayo tu. Unganisha fomu, jaribu na utumie.

Ikiwa una maswali yoyote, andika kwenye maoni na usiwe mchoyo katika kukadiria nakala hiyo. Asante mapema :)