Cara Membuat Form HTML

Cara Membuat Form HTML - Salah satu halaman yang paling berguna dari suatu situs web adalah halaman kontak. Halaman kontak tersebut biasanya menggunakan tag form. Di tag form terdapat beberapa property masukan yang seperti textbox, check box, radio button dan button.

Cara Membuat Form HTML

Gulir ke bawah sedikit untuk melihat formulir kami yang dibuat menggunakan HTML. Dan ebih jauh ke bawah Anda akan melihat kode PHP untuk pengolahannya. Ini digunakan untuk membuat form pengiriman dan mengirimkannya kepada Anda melalui email.

Indeks halaman ini:

Kode HTML Form

Pemrosesan Kode Form

Contoh HTML Form

Form Tag

HTML Text Field

HTML Textarea Field

HTML Radio Buttons

HTML Checkboxes

HTML File Upload

HTML Password Field

HTML Drop down menus

HTML Submit Buttons

HTML Reset Buttons

Cara Membuat Form HTML

Cotnoh formulir yang dibuat menggunakan HTML
Copy dan paste kode ini langsung ke halaman web HTML Anda.

<form name="htmlform" method="post" action="html_form_send.php">
<table width="450px" border="0">
</tr>
<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="Kirim"/>
 </td>
</tr>
</table>
</form>

Pemrosesan HTML menggunakan PHP Script
Anda juga perlu untuk membuat beberapa baris kode yang menggunakan PHP. Ini digunakan untuk menerima pengiriman form dan mengirimkan email kepada Anda. Ada dua bagian yang harus diubah oleh Anda yaitu email dan subjeknya pada kode-kode di bawah ini.
Simpan file ini sebagai html_form_send.php

<?php
if(isset($_POST['email'])) {
     
    // Ubah dua baris di bawah ini
    $email_to = "you@yourdomain.com";
     
    $email_subject = "website html form submissions";
     
     
    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); 
?>
 
<!-- place your own success html below -->
 
Terima kasih sudah mengontak kami!
 
<?php
}
die();
?>

Contoh HTML Form (hasilnya)

First Name *

Last Name *

Email Address *

Telephone Number

Comments *

Untuk menambahkan kolom baru untuk membentuk form Anda, tinggal copy dan paste jenis bidang yang Anda butuhkan dari contoh-contoh di bawah ini.
Kami telah memasukkan beberapa rincian yang berbeda tentang HTML tag Form.

HTML Form Tags
Ada berbagai pilihan parameter yang tersedia, yang paling umum adalah:
action - ini memungkinkan Anda untuk memberitahu formulir kemana harus pergi (biasanya nama file script yang akan membaca dan memproses data formulir yang telah disampaikan).
name - nama variable yang dikirim ke suatu aplikasi
method - nilai ini harus POST atau GET. Ini memberitahu bentuk cara pengiriman data. Formulir biasanya harus selalu diatur untuk menggunakan POST (karena GET akan dilampirkan data formulir ke URL halaman yang hampir selalu buruk untuk alasan keamanan).

<form action="index.php" name="myform" method="POST">
 contoh: <input type="text" name="example"/>
</form>

Bidang Teks HTML - Single Line
Ini biasanya yang paling umum untuk ditemukan.

<form action="index.php">
 Masukkan nama anda: <input type="text" name="your_name"/>
</form>

Hasilnya:

HTML Textarea (beberapa baris bidang teks)
Bidang textarea lebih cocok untuk mengambil blok besar untuk teks dari pengunjung Anda. Ini adalah contoh untuk komentar.

<form action="index.php">
 Komentar: <textarea rows="5" cols="30"></textarea>
</form>

Hasilnya:

HTML Radio Buttons
Bila Anda ingin pengunjung atau pengguna Anda untuk memilih salah satu item dari suatu daftar, dapat menggunakan tombol radio.

<form action="index.php">
 <input type="radio" name="color" value="red" /> Red<br />
 <input type="radio" name="color" value="white" /> White<br />
 <input type="radio" name="color" value="blue" /> Blue<br />
 <input type="radio" name="color" value="green" /> Green<br />
</form>

Hasilnya:

HTML Check Box
Hampir sama seperti radio button, tetapi ini bentuknya kotak.

<form action="index.php">
 <input type="checkbox" name="friut" value="apples" /> Apples<br />
 <input type="checkbox" name="friut" value="oranges" /> Oranges<br />
 <input type="checkbox" name="friut" value="pears" /> Pears<br />
 <input type="checkbox" name="friut" value="peaches" /> Peaches<br />
</form>

Hasilnya:

HTML File Upload Field (field selector)
Kadang-kadang mungkin baik untuk menawarkan pengguna website Anda pilihan untuk meng-upload file. Untuk ini Anda bisa menggunakan file tipe field HTML. Jika Anda menggunakan opsi ini Anda juga perlu menyertakan opsi tambahan untuk tag FORM yaitu enctype="multipart/form-data"

<form action="index.php" enctype="multipart/form-data">
 Select a file to upload: <input type="file" name="selectedfile" />
</form>

Hasilnya:

HTML Password Field
Jika Anda merasa perlu untuk meminta pengguna Anda untuk memasukkan sesuatu ke dalam bentuk password, maka Anda harus menggunakan bidang teks sandi jenis khusus. Menggunakan opsi ini akan menutupi setiap karakter sebagai jenis pengguna, yang memungkinkan mereka untuk mengetik secara rahasia.

<form action="index.php">
 Enter your password: <input type="password" name="password"/>
</form>

Hasilnya:

HTML drop-downs (aka selects or combo-boxes)
Bila Anda ingin pengunjung Anda untuk memilih sesuatu dari daftar, Anda bisa menggunakan daftar drop-down. Secara default hanya satu pilihan yang bisa dipilih, namun Anda dapat membuat beberapa pilihan dengan memasukkan kata yang lain untuk tag pilihan Anda (ini juga akan mengubah tampilan).

<form action="index.php">
 Select Something:
 <select name="something">
  <option value="Google">Google</option>
  <option value="Bing">Bing</option>
  <option value="Yahoo">Yahoo</opton>
 </select>
</form>

Hasilnya:

HTML Submit button
Akhirnya, setiap bentuk biasanya harus dapat memungkinkan pengguna untuk mengirimkan formulir. Pengiriman form biasanya ditangani dengan menggunakan tombol HTML. Sekali lagi bidang tombol adalah jenis masukan lapangan (sebagai teks dan password field), namun bidang ini khusus untuk mengirimkan. Untuk menentukan teks yang muncul pada tombol, kita dapat menggunakan nilai parameter (value) untuk menyatakan nilai keluar (dalam contoh di bawah ini kita menyatakan 'Kirim Formulir').

<form action="index.php">
 <input type="submit" value="Kirim Formulir" name="submit">
</form>

Hasilnya:

HTML Reset button (Tombol Reset)
Kadang-kadang Anda mungkin ingin untuk memungkinkan pengunjung Anda untuk me-reset form kembali ke keadaan default. Hal ini dapat dicapai dengan menggunakan tipe input reset. Seperti tombol Submit, Anda menentukan teks tombol menggunakan nilai parameter (value). Tombol reset sangat tidak umum, tetapi masih bisa berguna dalam keadaan tertentu.

<form action="index.php" name="resettest">
 Masukkan nama anda: <input type="text" name="your_name"/><br />
 <input type="reset" value="Ulang Form" name="submit"/>
</form>

Hasilnya:

Referensi: Free Contact Form