Tutorial babagan Cara Nggunakake Mailto Forms

by Jennifer Kyrnin

Tutorial Formulir HTML

Fitur umum saka situs web sing akeh perancang web anyar nganggo formulir. Sampeyan bisa uga pengin nambah formulir menyang situs web minangka cara prasaja kanggo wong bisa ngupayakake sampeyan kanggo takon utawa menehi kapentingan ing produk utawa layanan sing sampeyan tawakake. Sayange, tutorial online babagan carane nambah formulir situs rumit bisa dadi bingung lan nguripake profesional web anyar adoh.

Wangun web ora kudu angel digarap, malah kanggo webbies anyar.

Mailto minangka cara sing gampang kanggo nggawe formulir. Iku gumantung marang klien email kanggo ngirim data formulir saka komputer customer menyang pemilik formulir. Data formulir sing wis rampung dening pangguna situs web kasebut yaiku alamat e-mail menyang alamat spesifik sing kasebut ing kode kasebut.

Yen sampeyan anyar kanggo desain web lan sampeyan ora ngerti carane program interaksi sing luwih rumit, utawa sampeyan lagi nggarap situs web cilik lan mung pengin cara sing prasaja kanggo nambah wangun, duwe formulir mailto minangka wangun kontak akeh luwih gampang tinimbang learning to write PHP. Iku uga luwih murah tinimbang tuku scrip sing wis ditulis kanggo nindakake kanggo sampeyan.

Kanthi tutorial iki cepet, sinau carane nggunakake formulir mailto. Sanajan sampeyan wis tau rampung sadurunge, nguwasani teknik iki gampang lan mesthi ing dunyo "desain web diwiwiti."

Miwiti

Wangun HTML bisa dadi tantangan kanggo pangembang web anyar amarga mbutuhake luwih saka mung sinau markup HTML. Saliyane elemen HTML sing dibutuhake kanggo nggawe formulir lan kothak, sampeyan uga kudu duwe cara kanggo entuk formulir supaya "bisa". Iki biasane mbutuhake akses menyang skrip CGI utawa program liyane kanggo nggawe ing "aksi" atribut saka formulir.

Tumindak iku minangka cara ngolah data lan apa sing ditindakake sakwise (nulis menyang basis data, ngirim email, lan liya-liyane)

Yen sampeyan ora nduweni akses menyang naskah sing bakal nggawe karya sampeyan, ana salah siji wangun tumindak sing paling ndhukung browser modern.

action = " mailto: youremailaddress "

Iki cara prasaja kanggo entuk data formulir saka situs web sampeyan menyang email sampeyan.

Matur nuwun, solusi iki winates banget babagan apa sing bisa dilakoni, nanging kanggo situs web sing cilik banget, panggonan sing becik kanggo miwiti.

Trik kanggo Nggunakake Mailto Forms

Gunakake enctype = "text / plain" atribut
Iki ngandhani browser lan uga klien email sing mbentuk ngirim teks kosong tinimbang sing luwih rumit. Sawetara browser lan klien email ngirim data formulir sing dikodekan kanggo kaca Web . Iki tegese data dikirim minangka salah siji garis sing dawa, spasi diganti dening plus (+) lan karakter liyane dienkode. Nggunakna atribut enctype = "text / plain" mbantu supaya data luwih gampang diwaca.

Gunakake metode GET utawa POST
Nalika metode POST kadhangkala bisa digunakake, asring mung nyebabake browser mbukak jendela kosong. Yen mengkono sampeyan karo metode GET, banjur coba ngalih menyang POST.

Sample Mailto Form

Punika wangun sampel kanthi nggunakake tindakan mailto (cathetan - iki markup sing prasaja. Saenipun sampeyan bakal kode kolom iki nggunakake markup lan elemen semantik, nanging conto iki cukup kanggo ruang lingkup tutorial iki):

Jeneng dhisik:

Jeneng Sampeyan:

Komentar: </ textarea></em> <br> <em><input type = "submit" value = "Send"></em> <br> <em></ form></em> </p> </blockquote><p> Pelanggan bakal ndeleng pesen sing ngandhut yen formulir dikirim liwat email. Iki minangka asil kaya: </p> <blockquote> <em>first_name = Jennifer</em> <br> <em>last_name = Kyrnin</em> <br> <em>Komentar = Hi there!</em> </blockquote><h3> Cathetan Khusus babagan Mailto Forms </h3><p> Sawise maneh, cara iki, nalika gampang, uga diwatesi. Temenan, wigati dicathet yen <a href="https://jw.eyewated.com/apa-apa-nalika-formulir-mailto-ora-bisa/">wujud formulir ora bisa digunakake</a> kanggo kabeh kombinasi browser lan klien email. Yen sampeyan wis nyoba nggunakake formulir mailto lan ora sukses, iki bisa uga sebabe - ana uga kombinasi teknologi sing nyebabake fungsi gagal. Kanggo informasi sing luwih rinci babagan apa sing bisa ngganggu gawe sampeyan nggunakake formulir kasebut, takon " <a href="https://jw.eyewated.com/apa-apa-nalika-formulir-mailto-ora-bisa/">Kapan Formulir Mailto Ora Bisa</a> ." </p> <p> Nalika cara iki minangka upaya pertama sing apik kanggo nggawe formulir web sing nggawe email lan ngirim data formulir, nalika sampeyan luwih maju ing kemampuan web sampeyan, sampeyan mesthi bakal pengin njelajah opsi luwih kuat. Saka skrip CGI kanggo formulir PHP kanggo platform CMS sing duwe wangun widget sing gedhé, sampeyan duwe opsi luwih maju kanggo nimbang kabutuhan situs web mangsa ngarep sampeyan! </p> <p> Artikel asli dening Jennifer Krynin. Diedit dening Jeremy Girard ing 9/12/17 </p> </div> <div class="amp-related-wrapper"> <h2>Alike posts</h2> <div class="amp-related-content"> <a href="https://jw.eyewated.com/web-aman-fonts/"> <amp-img src="https://exse.eyewated.com/pict/736e40c00f082f8e-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://jw.eyewated.com/web-aman-fonts/">Web Aman Fonts</a></h3> <div class="amp-related-meta"> Desain Web & Alat </div> </div> </div> <div class="amp-related-content"> <a href="https://jw.eyewated.com/sertifikat-ssl-termurah-validasi-ev-termurah/"> <amp-img src="https://exse.eyewated.com/pict/81f8c2f409533225-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://jw.eyewated.com/sertifikat-ssl-termurah-validasi-ev-termurah/">Sertifikat SSL Termurah Validasi (EV) Termurah</a></h3> <div class="amp-related-meta"> Desain Web & Alat </div> </div> </div> <div class="amp-related-content"> <a href="https://jw.eyewated.com/progressive-enhancement/"> <amp-img src="https://exse.eyewated.com/pict/6b571d36670c33c4-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://jw.eyewated.com/progressive-enhancement/">Progressive Enhancement</a></h3> <div class="amp-related-meta"> Desain Web & Alat </div> </div> </div> <div class="amp-related-content"> <a href="https://jw.eyewated.com/sinau-babagan-atribut-saka-tag-pigura/"> <amp-img src="https://exse.eyewated.com/pict/a4979fed709d33ef-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://jw.eyewated.com/sinau-babagan-atribut-saka-tag-pigura/">Sinau Babagan Atribut saka Tag Pigura</a></h3> <div class="amp-related-meta"> Desain Web & Alat </div> </div> </div> <div class="amp-related-content"> <a href="https://jw.eyewated.com/singkatan-web/"> <amp-img src="https://exse.eyewated.com/pict/08cc41cb73363451-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://jw.eyewated.com/singkatan-web/">Singkatan Web</a></h3> <div class="amp-related-meta"> Desain Web & Alat </div> </div> </div> <div class="amp-related-content"> <a href="https://jw.eyewated.com/web-server-lan-workflow/"> <amp-img src="https://exse.eyewated.com/pict/04769a57f6313053-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://jw.eyewated.com/web-server-lan-workflow/">Web Server lan Workflow</a></h3> <div class="amp-related-meta"> Desain Web & Alat </div> </div> </div> <div class="amp-related-content"> <a href="https://jw.eyewated.com/cara-nulis-proposal-desain-web/"> <amp-img src="https://exse.eyewated.com/pict/997a889f13603030-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://jw.eyewated.com/cara-nulis-proposal-desain-web/">Cara Nulis Proposal Desain Web</a></h3> <div class="amp-related-meta"> Desain Web & Alat </div> </div> </div> <div class="amp-related-content"> <a href="https://jw.eyewated.com/tip-cara-instal-apache-ing-linux/"> <amp-img src="https://exse.eyewated.com/pict/4b47a5947c5b344d-120x86.gif" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://jw.eyewated.com/tip-cara-instal-apache-ing-linux/">Tip Cara Instal Apache ing Linux</a></h3> <div class="amp-related-meta"> Desain Web & Alat </div> </div> </div> <div class="amp-related-content"> <a href="https://jw.eyewated.com/web-hosting-requirements/"> <amp-img src="https://exse.eyewated.com/pict/da69cfcc5cfa3aac-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://jw.eyewated.com/web-hosting-requirements/">Web Hosting Requirements</a></h3> <div class="amp-related-meta"> Desain Web & Alat </div> </div> </div> </div> <div class="amp-related-wrapper"> <h2>See Newest</h2> <div class="amp-related-content"> <div class="amp-related-text"> <h3><a href="https://jw.eyewated.com/sadurunge-nyambungake-menyang-hotspot-wi-fi/">Sadurunge Nyambungake menyang Hotspot Wi-Fi</a></h3> <div class="amp-related-meta"> Internet & Jaringan </div> </div> </div> <div class="amp-related-content"> <a href="https://jw.eyewated.com/carane-nggawe-akun-itunes-tanpa-kertu-kredit/"> <amp-img src="https://exse.eyewated.com/pict/41364a9fb8043b18-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://jw.eyewated.com/carane-nggawe-akun-itunes-tanpa-kertu-kredit/">Carane Nggawe Akun iTunes Tanpa Kertu Kredit</a></h3> <div class="amp-related-meta"> IPhone & iPod </div> </div> </div> <div class="amp-related-content"> <a href="https://jw.eyewated.com/review-freemake-video-konverter/"> <amp-img src="https://exse.eyewated.com/pict/940e7c377ed0370d-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://jw.eyewated.com/review-freemake-video-konverter/">Review Freemake Video Konverter</a></h3> <div class="amp-related-meta"> Perangkat Lunak & Aplikasi </div> </div> </div> <div class="amp-related-content"> <a href="https://jw.eyewated.com/memeter-gadget/"> <amp-img src="https://exse.eyewated.com/pict/0e7fe432c93f320f-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://jw.eyewated.com/memeter-gadget/">Memeter Gadget</a></h3> <div class="amp-related-meta"> Perangkat Lunak & Aplikasi </div> </div> </div> <div class="amp-related-content"> <a href="https://jw.eyewated.com/kapan-apa-baterai-perlu-elektrolit-tinimbang-banyu/"> <amp-img src="https://exse.eyewated.com/pict/34e2bc73f67938f8-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://jw.eyewated.com/kapan-apa-baterai-perlu-elektrolit-tinimbang-banyu/">Kapan Apa Baterai Perlu Elektrolit tinimbang Banyu?</a></h3> <div class="amp-related-meta"> Car Tech </div> </div> </div> <div class="amp-related-content"> <a href="https://jw.eyewated.com/kang-etis-lan-profesional-kanthi-ora-wis-telpon/"> <amp-img src="https://exse.eyewated.com/pict/d0d46ec9348b3aae-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://jw.eyewated.com/kang-etis-lan-profesional-kanthi-ora-wis-telpon/">Kang Etis lan Profesional Kanthi Ora Wis Telpon</a></h3> <div class="amp-related-meta"> Email & Olahpesen </div> </div> </div> </div> <div class="amp-related-wrapper"> <h2>Sapid posts</h2> <div class="amp-related-content"> <a href="https://jw.eyewated.com/carane-tundha-wong-ing-facebook/"> <amp-img src="https://exse.eyewated.com/pict/3c669f8e9112348b-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://jw.eyewated.com/carane-tundha-wong-ing-facebook/">Carane Tundha Wong ing Facebook</a></h3> <div class="amp-related-meta"> Media sosial </div> </div> </div> <div class="amp-related-content"> <div class="amp-related-text"> <h3><a href="https://jw.eyewated.com/10-best-games-real-time-strategy-pc-games-buy-in-2018/">10 Best Games Real-Time Strategy PC Games Buy in 2018</a></h3> <div class="amp-related-meta"> Tuku Guides </div> </div> </div> <div class="amp-related-content"> <div class="amp-related-text"> <h3><a href="https://jw.eyewated.com/apa-iku-legal-kanggo-ngedol-akun-twitter/">Apa Iku Legal Kanggo Ngedol akun Twitter?</a></h3> <div class="amp-related-meta"> Media sosial </div> </div> </div> <div class="amp-related-content"> <div class="amp-related-text"> <h3><a href="https://jw.eyewated.com/carane-ndandani-kesalahan-ora-sah-401/">Carane Ndandani kesalahan ora sah 401</a></h3> <div class="amp-related-meta"> Internet & Jaringan </div> </div> </div> <div class="amp-related-content"> <a href="https://jw.eyewated.com/apa-rasio-kontras-apa-sampeyan-babagan-tv-sampeyan/"> <amp-img src="https://exse.eyewated.com/pict/409df3881f555601-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://jw.eyewated.com/apa-rasio-kontras-apa-sampeyan-babagan-tv-sampeyan/">Apa Rasio Kontras Apa Sampeyan Babagan TV Sampeyan?</a></h3> <div class="amp-related-meta"> Ngarep Theater </div> </div> </div> <div class="amp-related-content"> <a href="https://jw.eyewated.com/produk-utama-teater-paling-laris-ing-ces-2014/"> <amp-img src="https://exse.eyewated.com/pict/064e1fc48ed93a07-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://jw.eyewated.com/produk-utama-teater-paling-laris-ing-ces-2014/">Produk Utama Teater Paling Laris ing CES 2014</a></h3> <div class="amp-related-meta"> Review Produk </div> </div> </div> <div class="amp-related-content"> <a href="https://jw.eyewated.com/car-owners-guide-to-buy-a-head-unit/"> <amp-img src="https://exse.eyewated.com/pict/fde025dec2ef360f-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://jw.eyewated.com/car-owners-guide-to-buy-a-head-unit/">Car Owners Guide to Buy a Head Unit</a></h3> <div class="amp-related-meta"> Car Tech </div> </div> </div> <div class="amp-related-content"> <a href="https://jw.eyewated.com/the-aftermaster-pro-audio-remixer-profil-produk/"> <amp-img src="https://exse.eyewated.com/pict/6dcbab1a548c39dd-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://jw.eyewated.com/the-aftermaster-pro-audio-remixer-profil-produk/">The Aftermaster Pro Audio Remixer - Profil Produk</a></h3> <div class="amp-related-meta"> Tuku Guides </div> </div> </div> <div class="amp-related-content"> <a href="https://jw.eyewated.com/walmart-annual-thanksgiving-lan-black-friday-sale-iklan/"> <amp-img src="https://exse.eyewated.com/pict/d797b64f78613761-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://jw.eyewated.com/walmart-annual-thanksgiving-lan-black-friday-sale-iklan/">Walmart Annual Thanksgiving lan Black Friday Sale Iklan</a></h3> <div class="amp-related-meta"> Tuku Guides </div> </div> </div> <div class="amp-related-content"> <a href="https://jw.eyewated.com/mobil-cidra-xbox-360/"> <amp-img src="https://exse.eyewated.com/pict/6229bdadd916345b-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://jw.eyewated.com/mobil-cidra-xbox-360/">Mobil Cidra - Xbox 360</a></h3> <div class="amp-related-meta"> Gaming </div> </div> </div> <div class="amp-related-content"> <a href="https://jw.eyewated.com/cara-mlebu-gmail/"> <amp-img src="https://exse.eyewated.com/pict/79f5da9e2aff3ae8-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://jw.eyewated.com/cara-mlebu-gmail/">Cara Mlebu Gmail</a></h3> <div class="amp-related-meta"> Email & Olahpesen </div> </div> </div> <div class="amp-related-content"> <a href="https://jw.eyewated.com/nginstal-unit-kepala-kanthi-ora-ana-wiring-harness/"> <amp-img src="https://exse.eyewated.com/pict/24888658496534fd-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://jw.eyewated.com/nginstal-unit-kepala-kanthi-ora-ana-wiring-harness/">Nginstal Unit Kepala Kanthi Ora Ana Wiring Harness</a></h3> <div class="amp-related-meta"> Car Tech </div> </div> </div> <div class="amp-related-content"> <a href="https://jw.eyewated.com/cara-mulihake-file-dibusak-saka-recycle-bin/"> <amp-img src="https://exse.eyewated.com/pict/4d07724a935d3f58-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://jw.eyewated.com/cara-mulihake-file-dibusak-saka-recycle-bin/">Cara Mulihake File Dibusak Saka Recycle Bin</a></h3> <div class="amp-related-meta"> Windows </div> </div> </div> <div class="amp-related-content"> <a href="https://jw.eyewated.com/candy-crush-jelly-saga-review/"> <amp-img src="https://exse.eyewated.com/pict/1ff3682a000030af-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://jw.eyewated.com/candy-crush-jelly-saga-review/">Candy Crush Jelly Saga Review</a></h3> <div class="amp-related-meta"> Review Produk </div> </div> </div> <div class="amp-related-content"> <a href="https://jw.eyewated.com/apa-byte-ing-jaringan-komputer/"> <amp-img src="https://exse.eyewated.com/pict/5d30a7b323ad3368-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://jw.eyewated.com/apa-byte-ing-jaringan-komputer/">Apa Byte ing Jaringan Komputer?</a></h3> <div class="amp-related-meta"> Internet & Jaringan </div> </div> </div> <div class="amp-related-content"> <a href="https://jw.eyewated.com/cara-gunakake-tripod/"> <amp-img src="https://exse.eyewated.com/pict/252f6472742934d1-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://jw.eyewated.com/cara-gunakake-tripod/">Cara Gunakake Tripod</a></h3> <div class="amp-related-meta"> Digital Cameras </div> </div> </div> </div></article> <footer class="amp-wp-footer"> <div class="amp-wp-footer-inner"> <a href="#" class="back-to-top">Back to top</a> <p class="copyright"> © 2024 jw.eyewated.com </p> <div class="amp-wp-social-footer"> <a href="#" class="jeg_facebook"><i class="fa fa-facebook"></i> </a><a href="#" class="jeg_twitter"><i class="fa fa-twitter"></i> </a><a href="#" class="jeg_google-plus"><i class="fa fa-google-plus"></i> </a><a href="#" class="jeg_pinterest"><i class="fa fa-pinterest"></i> </a><a href="" class="jeg_rss"><i class="fa fa-rss"></i> </a> </div> </div> </footer> <div id="statcounter"> <amp-pixel src="https://c.statcounter.com/12022999/0/02d06b5d/1/"> </amp-pixel> </div> </body> </html>