Borang maklum balas html5 mudah. Susun atur borang. Contoh susun atur borang maklum balas. Pemalam untuk membuat borang dalam talian "jFormer"

Dalam artikel ini kita akan bercakap tentang borang maklum balas dinamik, yang, apabila saiz tetingkap berubah, akan menjadi penyesuaian kepada tontonan. Iaitu, borang maklum balas akan tersedia untuk dilihat pada semua jenis peranti, pada komputer peribadi, komputer riba, telefon pintar dan tablet.

Borang maklum balas akan terdiri daripada 3 medan kemasukan data - nama, alamat e-mel dan teks surat. Semua medan akan diperlukan dan anda tidak akan dapat menghantar e-mel kosong. Medan input alamat e-mel juga akan disahkan untuk ketepatan kemasukan. Data akan dibentangkan dalam kod html, gaya reka bentuk borang maklum balas akan ditulis dalam fail CSS yang berasingan. Berdasarkan prinsip skrip ini, adalah mungkin untuk mencipta, dengan analogi, bilangan medan input yang lebih besar atau lebih kecil.

Kelebihan menggunakan borang ini ialah operasi berterusan tapak dan penyerahan data dinamik daripada borang, tanpa memuatkan semula halaman. Ia juga harus diperhatikan bahawa ia mudah dilihat pada peranti mudah alih.

Dalam fail send.php, edit baris berikut: $to = " [e-mel dilindungi]"; $subject= "Mesej daripada site.ru"; $header="From: site.ru";;

Menulis surat

* Semua medan diperlukan

Hantar @import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto"); html, badan ( ketinggian: 100%; padding: 0; margin: 0; ) badan ( latar belakang: #d3dce1; font-family: "Roboto", sans-serif; saiz fon: 14px; ) .luar ( paparan: jadual ; lebar: 100%; tinggi: 100%; penjajaran teks: tengah . tengah ( paparan: sel-meja; penjajaran menegak: tengah; ) .dalam ( penjajaran teks: tengah; lebar: 0 15px ; ) .log masuk-wr ( kedudukan: relatif; jidar: 0 auto; latar belakang: #fff; lebar maks: 550px; bayang kotak: 3px 3px 24px #999; padding: 15px 15px 15px 15px; ) h2 ( penjajaran teks : kiri; saiz fon: 1.6em; padding: 0 0 10px 0; 40px; outline: 0; -moz-outline-style: none; ) butang ( height: 40px; outline: 0; -moz-outline-style: none; ) input ( background: url("img/user.png") tiada ulangan kiri 10px tengah; ) input ( latar belakang: url("img/email.png") tiada ulangan kiri 10px tengah; ) textarea ( latar belakang: url("img/pencil.png") tiada ulangan kiri 10px atas 10px; ) textarea (lebar: calc(100% - 55px); tinggi: 120px; sempadan: 1px pepejal #bbb; padding: 10px 10px 10px 45px; saiz fon: 14px; ) input, input ( lebar: calc(100% - 45px); lebar maks: 250px; jidar: 1px pepejal #bbb; padding: 0 0 0 45px; saiz fon: 14px ; ) input:focus, input:focus ( sempadan: 1px pepejal #2196f3; ) p ( padding-bawah: 10px; ) butang ( lebar: 100%; lebar maksimum: 150px; latar belakang: #e6ebee; sempadan: tiada; sempadan -bawah: 5px pepejal #d3dce1; saiz fon: 14px;

$(function() ($("#loader").hide(); $("form").submit(function(e) ( var name = $("#name").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(); success: function(html)( $("#loader").hide(); $("#result").html(html); ) )); ) kembali palsu;

1. Pemalam untuk membuat borang dalam talian "jFormer"

Penciptaan borang hubungan: maklum balas, komen, borang log masuk, borang pendaftaran dengan menyemak ketepatan maklumat yang dimasukkan.

2. Borang pendaftaran langkah demi langkah menggunakan jQuery

Borang yang kemas dengan pengisian langkah demi langkah. Di bawah ialah penunjuk pelengkapan borang.

3. Borang langkah demi langkah

Mengisi borang dalam beberapa langkah dan menyemak sama ada ia diisi dengan betul.

4. Borang hubungan untuk tapak

Pengesahan ketepatan maklumat yang dimasukkan dilakukan dengan cepat sebelum menghantar mesej menggunakan javascript.

5. Penukaran animasi antara borang menggunakan jQuery

Penukaran animasi menggunakan jQuery antara borang log masuk tapak, borang pendaftaran dan medan pemulihan kata laluan. Pada halaman demo, klik pada pautan kuning untuk melihat kesannya.

6. Borang maklum balas PHP pelepasan

Penyelesaian yang serupa boleh digunakan untuk memberi pelawat peluang untuk menghubungi pemilik tapak dengan pantas dari mana-mana halaman. Pada halaman demo, klik pada anak panah di bawah untuk membuka borang.

7. Borang pendaftaran PHP menggunakan jQuery dan CSS3

Borang dengan pengesahan ketepatan maklumat yang dimasukkan.

8. Borang pendaftaran PHP dalam gaya Facebook

Borang pendaftaran yang bagus dilaksanakan menggunakan CSS, PHP dan jQuery.

9. Borang hubungan jQuery "SheepIt"

Keupayaan untuk menambah medan baharu sebelum menghantar mesej telah dilaksanakan.

10. Borang Perhubungan AJAX yang Fancy

Borang maklum balas PHP yang kemas dengan pengesahan ketepatan maklumat yang dimasukkan. Teknologi: CSS, PHP, jQuery.

11. Sistem kebenaran/pendaftaran di tapak 12. Borang penyerahan data

Dengan pengesahan pengisian yang betul.

13. pemalam jQuery "Boleh Dihubungi".

Untuk melaksanakan borang maklum balas keluar untuk menghantar mesej dengan cepat.

Jadi, kami sedang melengkapkan siri pelajaran tentang mencipta tapak web dari awal dengan reka bentuk rata. Biar saya ingatkan anda bahawa kami mereka bentuk pengepala tapak. Hidup - bahagian dengan gambar pada keseluruhan skrin. Berikut ialah galeri dengan karya portfolio. Pada - susun atur tiga lajur. Dan sebagai peringkat akhir, hari ini kami melakukan reka letak borang maklum balas dan pengaki.

Ini yang patut kita dapat.

Saya tidak akan menunjukkan semua kod di sini, ia terlalu panjang. Anda boleh melihat keseluruhan kod dan hasil siap pada jsfiddle.

Tugas saya ialah untuk menunjukkan kepada anda prinsip susun atur, logik, boleh dikatakan, bagaimana pereka reka letak berfikir apabila melihat reka letak. Pertama, dia secara mental memecahkan keseluruhan susun atur kepada bahagian besar. Kemudian setiap bahagian di dalam dibahagikan kepada blok kecil. Lihat tangkapan skrin di bawah.

Borang maklum balas itu sendiri diletakkan dalam teg div dengan bahagian kelas_2_of_3 dan ia menduduki dua pertiga daripada lebar induk.

















Kemudian datang blok kedua dalam tag div dengan kelas part_1_of_3 . Lebar yang didudukinya adalah sama dengan satu pertiga daripada blok induk.

Dalam gaya CSS:

Con(
paparan: blok;
float:left;
margin: 3% 0 3% 1.5%;
}
.con:anak pertama(
jidar-kiri:0; /* menekan blok dengan borang ke tepi kiri */
}
.bahagian_2_daripada_3 (
lebar: 66%; /* lebar blok dengan bentuk */
}
.part_1_of_3 (
lebar: 32%; /* lebar blok maklumat */
}
.cont-form(
padding-bawah: 25px; /* inden bawah dari bentuk blok */
}
.cont-form div(
pelapik: 5px 0 15px;
}
.cont-form input,.cont-form input,.cont-form textarea(
lebar: 42%; /* lebar medan untuk memasukkan teks dan e-mel */
padding: 15px;
paparan: blok;
garis besar: tiada;
warna latar belakang: #fff; /* warna sel bentuk */
warna: #888282; /* warna input teks borang */
saiz fon: 0.8em; /* saiz fon input teks borang */
float:left;
margin-kanan: 2em; /* lekukan kanan */

gaya fon: condong; /* masukkan teks dalam huruf condong */
sempadan: 2px pepejal #cacaca; /* sempadan sel bentuk */
}
.cont-form input(
margin-kanan: 0em; /* lekukan kanan */
}
.cont-form textarea( /* nilai untuk kawasan teks borang */
padding: 18px; /* semua medan dalam kawasan teks */
paparan: blok;
lebar: 93%; /* lebar bentuk kawasan teks */
ketinggian:180px; /* ketinggian bentuk kawasan teks */
warna latar belakang: #fff; /* wdtn latar belakang kawasan teks */
garis besar: tiada;
warna: #888282; /* warna teks yang dimasukkan ke dalam kawasan teks */
saiz fon: 0.8em; /* saiz fon kawasan teks */
gaya fon: italik; /* italik untuk kawasan teks bentuk */
sempadan:2px pepejal #cacaca;
margin-bawah: 2em;
}
.cont-form input (
font-family: Verdana, sans-serif;
saiz fon: 1em;
warna:#fff;
pelapik: 0.7em 1.4em;
margin-kanan: 2%;
warna latar belakang: #a97b7b;
sempadan:tiada;
paparan: blok;
kursor: penunjuk;
garis besar: tiada;
text-transform: huruf besar; /* tukar kepada huruf besar */
terapung: betul;
}
.comp_addp(
saiz fon: 0.8em;
warna:#525252;
ketinggian garisan: 1.8em;
margin-bawah: 2%;
}
.comp_add a(
saiz fon:1.1em;
warna:#525252;
ketinggian garisan: 1.8em;
margin-bawah: 2%;
}
.list2 li img(
jidar atas: 4px;
float:left;
}
.list2 li .icon(
float:left;
padding-left: 1em;
}

Susun atur bawah tanah

Dengan susun atur ruang bawah tanah, keadaannya lebih mudah. Di dalam teg pengaki, terdapat blok div dengan hak cipta dan pautan.

Struktur Borang HTML

Setiap baris diletakkan dalam bekas DIV, jadi lebih mudah untuk meletakkan label di sebelah medan input. Keseluruhan borang diletakkan dalam DIV lebar 660px di tengah halaman.


Menulis surat!

*Medan dengan asterisk diperlukan



Nama awak *


Alamat emel *


Subjek *


Mesej *





Struktur Borang CSS

Semua animasi dibuat dengan sifat CSS 3 baharu Semua latar belakang dibuat dengan kecerunan biasa. Beri perhatian kepada animasi butang. Bayang-bayang hover juga dilakukan dalam CSS3.

/* gaya bentuk */
form.row(
paparan: blok;
padding: 7px 8px;
margin-bawah: 7px;
}
form .row:hover (
latar belakang: #f1f7fa;
}

Label borang (
paparan: inline-block;
saiz fon: 1.2em;
font-weight: tebal;
lebar: 120px;
pelapik: 6px 0;
warna: #464646;
vertical-align: atas;
}
borang .req ( warna: #ca5354; )

Form.note(
saiz fon: 1.2em;
garis-ketinggian: 1.33em;
berat fon: normal;
padding: 2px 7px;
margin-bawah: 10px;
}

Input borang:fokus, bentuk textarea:fokus ( garis besar: tiada; )

/* gaya pemegang tempat: http://stackoverflow.com/a/2610741/477958 */
::-webkit-input-placeholder ( warna: #aaafbd; gaya fon: condong; ) /* WebKit */
:-moz-placeholder ( color: #aaafbd; font-style: italic; ) /* Mozilla Firefox 4 hingga 18 */
::-moz-placeholder ( warna: #aaafbd; gaya fon: condong; ) /* Mozilla Firefox 19+ */
:-ms-input-placeholder ( color: #aaafbd; font-style: italic; ) /* Internet Explorer 10+ */

Form.txt(
paparan: inline-block;
padding: 8px 9px;
padding-kanan: 30px;
lebar: 240px;
font-family: "Oksigen", sans-serif;
saiz fon: 1.35em;
berat fon: normal;
warna: #898989;
}

Sebagai kesimpulan, saya ingin mengatakan bahawa dengan pembangunan CSS3 dan HTML5, mencipta borang maklum balas dengan animasi, bayang-bayang, dll. menjadi tugas yang tidak begitu sukar. Saya harap pelajaran ini akan membantu anda dalam mencipta borang anda sendiri untuk tapak web anda.

Beginilah rupa bentuk maklum balas akhirnya

Mari segera lihat semua medan yang akan tersedia untuk anda dalam borang ini.

Struktur medan borang maklum balas
  • Nama pengirim
  • alamat surat menyurat
  • telefon
  • syarikat penghantar
  • laman web penghantar
  • produk (arah)
  • senarai perkhidmatan yang diperlukan
  • Maklumat tambahan
  • perlindungan antispam / robot
Ciri dan keupayaan
  • menyekat butang "hantar" sehingga syarat yang diperlukan dipenuhi
  • pemilih mudah untuk menyemak dan melindungi daripada robot
  • butang tambahan "kosongkan semua medan"
Apakah yang disertakan dalam borang maklum balas?
  • Penanda HTML (penciptaan reka letak)
  • Menggayakan medan borang dengan CSS/SCSS
  • jQuery + js
  • Pengendali PHP
Mencipta penanda HTML

Jadi, mari kita lihat penanda borang:

Sila perkenalkan diri anda: * Nyatakan e-mel anda: * Nyatakan nombor telefon anda: * Tulis dari syarikat mana anda berasal: Nyatakan tapak web anda: Produk: Pilih perkhidmatan: Tiada perkhidmatan dipilih Perkhidmatan_ Perkhidmatan_ Perkhidmatan_ Perkhidmatan_ Perkhidmatan_ Perkhidmatan_ Perkhidmatan_ Perkhidmatan_ Tambahan. Maklumat: Saya Robot Saya adalah manusia Clear Fields yang ditanda dengan asterisk * diperlukan.

  • Terdapat tiga medan pertama yang mempunyai id dan acara js tertentu onkeyup="checkParams()" (kami akan memerlukannya kemudian). Mereka akan tertakluk kepada pengesahan mandatori tentang ketepatan kemasukan data. Atribut yang diperlukan bertanggungjawab untuk ini. Jika anda perlu mengalih keluar atau mewajibkan medan lain, cuma alih keluar/tambah atribut ini.
  • Beberapa medan tambahan yang tidak diperlukan.
  • Pemilih untuk memilih perkhidmatan yang disediakan pilih .
  • Textarea medan maklumat tambahan .
  • Pemilih untuk menyemak "kemanusiaan" - Saya bekerja | saya manusia.
  • Dua butang: Hantar dan Padam maklumat dalam medan yang diisi.
  • Dengan cara yang baik, masih terdapat tiada kotak pilihan untuk mengesahkan kebenaran pemprosesan data, tetapi menambahkannya, saya harap, tidak akan menyebabkan anda mengalami sebarang kesulitan.
    • Penggayaan bentuk CSS/SCSS

    Semua medan borang digayakan menggunakan CSS flexbox (Modul Susun Atur Kotak Fleksibel) dan dibahagikan kepada kumpulan dengan kelas tambahan. Sudah tentu, anda boleh mencipta gaya anda sendiri. Jika anda tahu CSS, maka anda boleh menetapkan reka bentuk untuk semua elemen bentuk tanpa sebarang masalah, malah anda tidak memerlukan bantuan saya.

    Borang ( input, input, input, textarea, pilih ( paparan: blok; padding: 12px 15px; line-height: 1.5; lebar: 100%; font-size: 16px; border: 1px solid #ced4da; border-radius: . 25rem; latar belakang-klip: padding-kotak; latar belakang-warna: #fff; .05); &:fokus ( outline: none; ) .form-row ( paparan: flex; flex-wrap: wrap; justify-content: space-antara; .form-group:nth-child(1) ( input ( lebar: 95%; ) ) .col-6 ( kedudukan: relatif; flex: 0 0 50%; lebar maks: 50%; ) .pt-3 ( padding-top: 1rem; ) .form-group ( margin- bawah: 1rem; label ( line-height: 1.7; letter-spacing: .3px; text-transform: uppercase; font-size: 14px; font-weight: 900; ) textarea (min-height: 110px; ubah saiz: menegak; ) ) )

    Menyediakan kod PHP

    Sekarang mari kita beralih kepada pengendali borang, di mana semua tindakan bermula bergantung pada pemilih yang dipilih - Bot/Manusia.

    Apa yang ada di sana?
    • header("Refresh: 5; URL=https://www.site.ru"); — selepas mengisi borang oleh bot, ia menghantarnya ke halaman pemberitahuan dan selepas 5 saat kembali kepada yang dinyatakan dalam medan.
    • mel, nama, telefon, ... — menyediakan pemadanan medan html. Di sini anda perlu memberikan semua nama yang berkaitan = "" dalam borang maklum balas. Oleh itu, dalam medan perkhidmatan anda perlu menentukan susunan pilihan yang sama seperti dalam markup html.
    • $mess ialah badan mesej yang akan tiba dalam surat. Anda boleh menukarnya, menukar nama mereka, atau hanya memadam/mengulas nama yang anda tidak perlukan.
    • $headers ialah baris yang diperlukan yang menunjukkan pengekodan huruf. Jika anda secara tidak sengaja memadam atau menukar charset=utf-8, maka semua perkataan anda akan bertukar menjadi hieroglif.
    • header - selepas berjaya mengklik butang, pelawat akan dihantar ke halaman pemberitahuan dan selepas 5 saat akan dilencongkan ke halaman yang ditentukan. Atau sebaliknya (ia akan menerima pemberitahuan ralat.
    Barangan tambahan untuk js dan jQuery

    Sebelum ini, kami melihat templat borang html, di mana kami melihat id dan fungsi tambahan untuk tiga medan yang diperlukan. Sudah tiba masanya untuk mengetahui sebab ia ditambah.

    Lihat kod js. Ini ialah penyekat butang yang, apabila dilumpuhkan, menghalang pelawat daripada mengkliknya sebelum medan yang anda perlukan diisi.

    function checkParams() ( var name = $("#name").val(); var email = $("#email").val(); var phone = $("#phone").val(); jika (name.length != 0 && email.length >= 6 && phone.length >= 10) ( $("#submit").removeAttr("disabled"); ) else ( $("#submit"). attr("disabled", "disabled");

    Kami memasukkan id ke dalam medan yang diperlukan dan dilumpuhkan ke dalam butang untuk mengikatnya pada skrip ini. Anda boleh menukar nama dan kuantiti mereka dengan menambah/mengalih keluar baris var yang diperlukan. Tetapi jika anda menambah atau mengalih keluarnya, jangan lupa untuk menukar syarat dalam baris jika (name.length != 0 && email.length >= 6 && phone.length >= 10) ( .

    Bagaimanakah talian ini berfungsi?

    Segala-galanya bergantung pada bilangan aksara dalam medan yang ditentukan, i.e. panjang panjangnya.

    • if (name.length != 0 - menunjukkan bahawa medan tidak seharusnya kosong. Baca sebagai - "jika bilangan aksara dalam medan itu bukan sifar, maka ..."
    • && - menggabungkan syarat (dan)
    • email.length >= 6 — bilangan aksara mestilah lebih besar daripada atau sama dengan 6. Mengapa enam? Saya menunjukkan nombor ini kerana alamat surat-menyurat minimum ialah 6 aksara. Adakah kita periksa? @bk.ru - 6 aksara.
    • phone.length >= 10 - lebih besar daripada atau sama dengan sepuluh aksara. Kenapa 10 dan bukan 11? Apabila mengisi medan ini, pelawat boleh menunjukkan nombor telefonnya sama ada dengan +7 atau dengan 8. Oleh itu, adalah lebih baik untuk menunjukkan 10.

    Itu sahaja. Sambungkan borang, uji dan gunakan.

    Jika anda mempunyai sebarang soalan, tulis dalam komen dan jangan kedekut dalam menilai artikel. Terima kasih terlebih dahulu :)



    ARTIKEL BERKAITAN