Langkah Pertama
Hal pertama yang Anda harus memberitahu komputer adalah bahwa Anda memulai formulir, dan apa yang
Anda inginkan dengan data formulir. Perintah untuk memperingatkan komputer adalah:
<form Method=”post” ACTION=”mailto:your email address”> Perhatikan perintah melakukan tiga hal:

Ini mengatakan kepada komputer FORMULIR sebuah awal.
Ini menyatakan METODE berurusan dengan bentuk ini adalah untuk POST itu.
Dan data sebaiknya dikirim ke alamat e-mail Anda melalui “mailto:” ACTION.

Ingat Anda akan perlu untuk memasukkan alamat e-mail Anda segera setelah “mailto:” tanpa spasi! Di sinilah hasil form akan dikirim.Itu bagus dan sederhana. Sekarang bahwa komputer tahu formulir telah dimulai, itu cari salah satu dari sejumlah gaya bentuk untuk menangani. Saya akan pergi ke lima di sini, TEXT, TEXT AREA, TOMBOL RADIO, Checkbox, dan BOX POP-UP. Ini adalah yang paling digunakan di WWW. Juga, saya akan membahas pembuatan tombol yang mengirimkan formulir ke “mailto:” alamat atau membersihkan formulir.

Kotak untuk Memasukkan Teks

Kotak Teks

Ini adalah kotak panjang dasar yang memungkinkan untuk satu baris teks. Ketika ditempatkan pada halaman, pembaca akan dapat menulis dalam informasi seperti nama atau alamat e-mail mereka. Inilah yang kotak teks terlihat seperti: Silakan. Menulis sesuatu di dalamnya. Ia bekerja. Anda mungkin harus menggunakan pointer mouse anda dan klik pada kotak untuk mengaktifkannya – tetapi bekerja. Jika ini adalah pertama kalinya Anda membuat bentuk-bentuk, Anda mungkin berpikir bahwa kotak atas adalah gif atau. A. Jpeg. Tidak begitu. Kotak itu ditempatkan pada halaman melalui perintah HTML, bukan sebagai gambar. Perintah untuk menempatkannya pada halaman ini: <input Type=”text” NAME=”name” SIZE=”30″>

Ada tiga bagian untuk perintah. Inilah yang mereka dan apa yang mereka maksud:

JENIS INPUT memberitahu komputer bahwa item bentuk akan ditempatkan di sini. Ingat di atas Anda ditempatkan perintah untuk mengingatkan komputer yang item bentuk akan ditempatkan di halaman ini? Nah, inilah barang bentuk pertama Anda. Jenis bentuk adalah “teks”.
NAME adalah nama yang Anda menetapkan ke kotak. Ingatlah bahwa ini adalah bentuk yang akan dikirimkan kepada Anda melalui pos. Ketika Anda menerima email, tidak akan menjadi seperti halaman. Hanya teks akan tiba, sehingga Anda harus menunjukkan apa setiap bagian dari teks akan. Bila e-mail tiba dari kotak teks ini, ia akan berkata:nama = (apa yang ditulis dalam kotak)Dengan begitu Anda mengetahui informasi ini ditulis di kotak yang bertanda “nama”. Juga, ingat Anda tidak perlu memanggil kotak “nama.” Sebut saja apa pun yang Anda inginkan.Ini akan tiba kepada Anda dengan nama itu. Jika Anda menggunakan kotak untuk mendapatkan nama pembaca, sebut saja “nama.” Jika Anda menggunakan kotak untuk mendapatkan e-mail pembaca, sebut saja “e-mail.” dll, dll
SIZE menunjukkan berapa banyak karakter kotak ini akan. Buatlah 60 atau 100, jika Anda ingin. Saya baru saja menemukan 30 biasanya ukuran yang baik.

Kotak Text Area

Ini adalah sebuah kotak yang lebih besar, seperti di atas, yang memungkinkan pembaca untuk menulis sesuatu. Perbedaan antara Text Box (atas) dan Text Area adalah bahwa Text Box hanya memungkinkan untuk satu baris. Luas Teks, bagaimanapun, adalah jauh lebih besar dan akan memungkinkan untuk sebagai kata-kata yang Anda inginkan.
Berikut adalah Kotak Text Area: Rapi, ya? Sekali lagi, maju dan menulis di dalamnya. Itu akan bekerja. Anda mungkin harus mengklik pada kotak untuk mengaktifkannya. Berikut ini perintah yang membuatnya muncul:
<textarea NAME=”comment” ROWS=6 COLS=40>
</ TEXTAREA>
Harap dicatat bahwa textarea memerlukan perintah </ TEXTAREA>, sedangkan BOX TEKS perintah di atas tidak.

Sama seperti sebelumnya … berikut adalah bagian-bagiannya dan artinya:

TEXTAREA (semua satu kata): Ini berteriak dengan perintah formulir di atas bahwa di sini akan duduk item lain bentuk. Yang satu ini akan menjadi kotak area teks.
NAMA adalah sama seperti sebelumnya. Informasi yang menempatkan pembaca dalam kotak ini akan tiba di kotak e-mail Anda dinotasikan dengan nama apapun yang Anda gunakan. Dalam hal ini, apa yang tertulis dalam kotak ini akan tiba di kotak e-mail Anda dengan kata-kata, “komentar =”.
ROWS memberitahu komputer berapa banyak baris teks akan menerima, dan …
COLS memberitahu komputer berapa banyak karakter akan berada di setiap baris. Kotak teks ini akan menerima 6 baris teks setiap 40 menjadi karakter. Silakan membuat kotak lebih besar atau lebih kecil. Kau yang bertanggung jawab di sini.

Masukan Tombol

Tombol Radio

Ini adalah kesepakatan kecil yang rapi yang menempatkan lingkaran di halaman. Lingkaran yang aktif dan pembaca dapat menggunakan mouse untuk klik di atasnya. Ketika tombol radio dipilih, menggelapkan. Berikut adalah tiga tombol radio: Silakan. Klik pada mereka. Aku tahu kau ingin sekali. Saya memiliki tiga dari mereka ada untuk membuktikan suatu hal. Intinya adalah bahwa tombol radio banyak pilihan satu-satunya. Bila Anda menggunakan tombol radio, hanya satu dapat diperiksa. Ketika lain diperiksa, yang pertama menyerah seleksi. Silakan – mencobanya.
Rapi, ya? Tapi mengapa mereka disebut tombol radio? Alasannya adalah bahwa mereka bertindak sebagai tombol radio yang digunakan di radio mobil tua. Ketika Anda mendorong satu, dial dipindahkan. Ketika Anda mendorong yang lain, pilihan pertama dijatuhkan dan dial pindah lagi. Anda mungkin terlalu muda untuk mengingat. Itu kembali ketika hanya AM adalah radio jual besar, kembali sebelum kotoran. (Man, aku sudah tua.)
Berikut ini perintah untuk menempatkan tombol radio pada halaman Anda.
<input Type=”radio” NAME=”heading dari button” name”> VALUE=”button
Anda lihat, JENIS dalam perintah adalah “radio.” Perintah panjang, tapi itu tidak sulit untuk mengerti. Berikut adalah bagian empat dan artinya:

INPUT: ini berteriak ke komputer “!! HEY Berikut adalah item yang bentuk untuk menangani”
JENIS: Ini memberitahu komputer apa jenis item bentuk akan. Dalam hal ini, ini adalah tombol radio.
NAMA: Ini menamai kategori tombol ini pada halaman di formulir Anda. Katakanlah Anda memiliki enam pilihan yang berbeda di bawah satu judul. Seperti enam rasa es krim semua di bawah, judul “Ice Cream Favorit.” “Ice Cream” akan menjadi kategori. Ini adalah judul dari kelompok tombol radio.
NILAI adalah nama yang ditetapkan ke tombol. Seperti dalam contoh es krim di atas, Anda memiliki enam tombol masing-masing diberi label dengan enam rasa yang berbeda.Nah, Anda akan memberikan satu nilai vanili, satu coklat, dll, dll

Kenapa saya ingin label semua itu?
Ingatlah bahwa ini akan dikirimkan kepada Anda melalui pos. Anda harus dapat membaca apa yang orang pilih. Katakanlah Anda memiliki buku tamu dengan bagian tombol radio yang meminta halaman yang pengguna masuk dari. “NAMA” Anda dalam perintah mungkin “signing_in_from.”Kemudian masing-masing tombol radio diberi “VALUE” dari setiap halaman Anda. Katakanlah seseorang memilih tombol radio ditugaskan untuk halaman rumah Anda. Itu NILAI tombol itu mungkin, “home_page.”
Jadi, ketika formulir tiba untuk Anda, e-mail akan membaca:
“Signing_in_from_ home_page”
Licin pretty darn, ya?

Checkbox ini

Kotak centang ini merupakan klon yang tepat dari tombol radio kecuali dua fitur yang berbeda:

Item ia menempatkan pada halaman adalah persegi dan ditandai dengan cek ketika dipilih.
Anda dapat memeriksa sebanyak yang Anda suka.

Berikut adalah beberapa kotak centang:
Silakan. Klik sekitar sedikit. Anda akan perhatikan bahwa hanya satu atau setiap orang dapat dipilih. Checkbox ini pada dasarnya adalah sebuah tombol radio mewah. Berikut ini perintah yang menempatkan kotak centang pada halaman:
<input TYPE=”checkbox” NAME=”Signing_from” VALUE=”Joes_page”>
Setiap item berarti sama seperti di atas sehingga tidak perlu pergi ke mereka lagi. Harap dicatat, bagaimanapun, JENIS kini “checkbox” bukan “radio.”
Ingat bahwa ketika teks dari kotak centang tiba di kotak e-mail Anda, lebih dari satu dapat muncul. Dengan radio button, hanya satu item di bawah NAMA pos akan tiba. Dengan kotak centang, setiap item dapat diperiksa, sehingga setiap item dapat tiba.
Saya suka tombol radio lebih dari kotak centang. Alasannya adalah bahwa tombol radio memaksa pilihan. Checkbox mengundang orang untuk hanya memeriksa semuanya setiap saat.Itu bisa membuang waktu Anda jika Anda harus membaca semuanya. Saya suka membuat kesepakatan satu pilihan. Lebih mudah pada saya dan jika orang ingin meninggalkan info lebih lanjut, selalu ada AREA TEKS kotak untuk tujuan itu.

Kotak Pop-Up

Aku CINTA ini Pop-Up kotak, tapi saya tidak menggunakannya terlalu sering. Saya ingin memiliki semua item yang orang dapat memilih di tempat terbuka. Kotak Pop-Up, kecuali diklik, hanya menunjukkan satu item. Tapi, ini formulir Anda dan Anda dapat melakukan apa pun yang Anda inginkan. Berikut adalah kotak Pop-Up. Anda harus klik di atasnya untuk melihat semua pilihan.Yang satu ini bagi orang untuk memilih warna favorit mereka:

Berikut adalah perintah yang ditempatkan kotak Pop-Up pada halaman:
<select NAME=”Favorite_Color” SIZE=”1″>
<option Dipilih> Biru
<option> Merah
<option> Kuning
<option> Hijau
<option> Hitam
<option> Oranye
<option> Purple
</ SELECT>
Meskipun ini terlihat sedikit lebih terlibat, sebenarnya tidak. Ini hal yang sama lagi dan lagi.Berikut adalah bagian-bagian dan artinya:

SELECT memberitahu komputer bentuk lain yang terjadi di sini. Kali ini bentuk SELECT atau Pop-Up.
NAMA: Sama seperti di atas. Ini adalah judul dari item bentuk. Ini menunjukkan bagaimana hasil dari pembaca akan tiba di kotak e-mail Anda. Dalam hal ini ia akan berkata; “Favorite_Color =” dan kemudian pilihan pembaca.
UKURAN menunjukkan ukuran kotak. Di sini, 1 berarti satu baris atau item ditampilkan.Cobalah menempatkan dua di sana jika Anda ingin melihat apa yang dilakukannya. Saya lebih memilih hanya satu. Lebih dari satu item cenderung mengalahkan tujuan dari Kotak Pop-Up.
OPSI TERPILIH menandakan pilihan mana yang akan muncul dalam kotak. Perhatikan di halaman yang “Blue” terlihat.
OPSI menunjukkan pilihan lain yang akan terlihat apabila Anda klik pada item.
/ SELECT selesai dari kesepakatan seluruh.

Orang menulis dan menanyakan apakah itu mungkin untuk membuat kotak pop-up atas serangkaian link bagi orang untuk memilih dan kemudian pergi ke. Dengan HTML saja, tidak mungkin. Menggunakan Java Applet bersama dengan kode – itu. Pergi ke Script Tips halaman dan membaca seri dimulai dengan nomor 38.

Kirim dan Reset Tombol

Nah, sekarang bahwa Anda telah menempatkan semua item formulir yang Anda inginkan pada halaman Anda, Anda perlu cara untuk memiliki hasil dikirim ke kotak e-mail Anda (atau di mana pun Anda mengatakan hal ini akan pergi dalam laporan bentuk aslinya).
Ini mungkin yang paling mudah dari semua item yang telah saya tunjukkan di halaman ini. Berikut adalah tombol:

Harap tidak menggunakan tombol. Mereka aktif dan akan mencoba untuk bekerja – tetapi, saya telah dimasukkan ke dalam alamat e-mail palsu jadi saya tidak mengisi kotak saya sendiri dengan e-mail dari tutorial ini. Kau hanya akan dimarahi!

Dan di sini adalah perintah untuk menempatkan tombol-tombol pada halaman:
<input TYPE=”submit”>
<input TYPE=”reset”>
Mudah, ya? Sekarang ketika Anda klik pada tombol, form akan memberlakukan TINDAKAN Anda catat dalam perintah FORMULIR asli. Disini, telah dikirim ke kotak e-mail saya (atau tidak, dalam kasus ini).

Akhirnya!

Pastikan Anda mengakhiri halaman Anda dengan ini:

</ FORM>

Itu awal pada bentuk, tapi ada banyak lagi yang dapat Anda lakukan daripada apa yang saya miliki di sini. Ada bentuk-bentuk Anda dapat terhubung ke CGIS lain (Common Gateway Interface), database, atau pengumpulan data devisa. Semua ingin saya lakukan di sini adalah memberikan bentuk yang sangat dasar sangat mudah bagi Anda untuk digunakan pada halaman Web Anda.

Contoh :

1 . contactform.htm (you can change the filename to anything you like)

<form name="contactform" method="post" action="send_form_email.php">

<table width="450px">

<tr>

<td valign="top">

<label for="first_name">First Name *</label>

</td>

<td valign="top">

<input type="text" name="first_name" maxlength="50" size="30">

</td>

</tr>

<tr>

<td valign="top"">

<label for="last_name">Last Name *</label>

</td>

<td valign="top">

<input type="text" name="last_name" maxlength="50" size="30">

</td>

</tr>

<tr>

<td valign="top">

<label for="email">Email Address *</label>

</td>

<td valign="top">

<input type="text" name="email" maxlength="80" size="30">

</td>

</tr>

<tr>

<td valign="top">

<label for="telephone">Telephone Number</label>

</td>

<td valign="top">

<input type="text" name="telephone" maxlength="30" size="30">

</td>

</tr>

<tr>

<td valign="top">

<label for="comments">Comments *</label>

</td>

<td valign="top">

<textarea name="comments" maxlength="1000" cols="25" rows="6"></textarea>

</td>

</tr>

<tr>

<td colspan="2" style="text-align:center">

<input type="submit" value="Submit"> <a href="http://www.freecontactform.com/email_form.php">Email Form</a>

</td>

</tr>

</table>

</form>

2. send_form_email.php (you must use this filename exactly)

<?php

if(isset($_POST['email'])) {

// EDIT THE 2 LINES BELOW AS REQUIRED

$email_to = "you@yourdomain.com";

$email_subject = "Your email subject line";

function died($error) {

// your error code can go here

echo "We are very sorry, but there were error(s) found with the form you submitted. ";

echo "These errors appear below.<br /><br />";

echo $error."<br /><br />";

echo "Please go back and fix these errors.<br /><br />";

die();

}

// validation expected data exists

if(!isset($_POST['first_name']) ||

!isset($_POST['last_name']) ||

!isset($_POST['email']) ||

!isset($_POST['telephone']) ||

!isset($_POST['comments'])) {

died('We are sorry, but there appears to be a problem with the form you submitted.');

}

$first_name = $_POST['first_name']; // required

$last_name = $_POST['last_name']; // required

$email_from = $_POST['email']; // required

$telephone = $_POST['telephone']; // not required

$comments = $_POST['comments']; // required

$error_message = "";

$email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';

if(!preg_match($email_exp,$email_from)) {

$error_message .= 'The Email Address you entered does not appear to be valid.<br />';

}

$string_exp = "/^[A-Za-z .'-]+$/";

if(!preg_match($string_exp,$first_name)) {

$error_message .= 'The First Name you entered does not appear to be valid.<br />';

}

if(!preg_match($string_exp,$last_name)) {

$error_message .= 'The Last Name you entered does not appear to be valid.<br />';

}

if(strlen($comments) < 2) {

$error_message .= 'The Comments you entered do not appear to be valid.<br />';

}

if(strlen($error_message) > 0) {

died($error_message);

}

$email_message = "Form details below.\n\n";

function clean_string($string) {

$bad = array("content-type","bcc:","to:","cc:","href");

return str_replace($bad,"",$string);

}

$email_message .= "First Name: ".clean_string($first_name)."\n";

$email_message .= "Last Name: ".clean_string($last_name)."\n";

$email_message .= "Email: ".clean_string($email_from)."\n";

$email_message .= "Telephone: ".clean_string($telephone)."\n";

$email_message .= "Comments: ".clean_string($comments)."\n";

// create email headers

$headers = 'From: '.$email_from."\r\n".

'Reply-To: '.$email_from."\r\n" .

'X-Mailer: PHP/' . phpversion();

@mail($email_to, $email_subject, $email_message, $headers);

?>

Thank you for contacting us. We will be in touch with you very soon.

<?php

}

?>

Example Form

Place your Footer Content here

sumber

http://www.freecontactform.com/email_form.php
http://www.htmlgoodies.com/tutorials/forms/article.php/3479121
http://www.w3schools.com/html/html_forms.asp

http://www.ehow.com/search.html?s=shopping+cart+code+script&skin=tech&t=all

PasangInfo

Kontak Form (mail order bisajuga)

Kotak untuk Memasukkan Teks

Kotak Teks

Kotak Text Area

Masukan Tombol

Tombol Radio

Checkbox ini

Kotak Pop-Up

Kirim dan Reset Tombol

Harap tidak menggunakan tombol. Mereka aktif dan akan mencoba untuk bekerja – tetapi, saya telah dimasukkan ke dalam alamat e-mail palsu jadi saya tidak mengisi kotak saya sendiri dengan e-mail dari tutorial ini. Kau hanya akan dimarahi!

Akhirnya!

Pastikan Anda mengakhiri halaman Anda dengan ini:

</ FORM>

Example Form

Leave a Reply

Artikel Terkait Joomla ,Web

First Name *
Last Name *
Email Address *
Telephone Number
Comments *
Email Form