Cara Membuat Form HTML

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

01	<form name="htmlform" method="post" action="html_form_send.php">

02	<table width="450px" border="0">

03

</tr>

04

<tr>

05	<td valign="top">

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

07

</td>

08	<td valign="top">

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

10

</td>

11

</tr>

12

13

<tr>

14	<td valign="top"">

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

16

</td>

17	<td valign="top">

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

19

</td>

20

</tr>

21

<tr>

22	<td valign="top">

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

24

</td>

25	<td valign="top">

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

27

</td>

28

29

</tr>

30

<tr>

31	<td valign="top">

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

33

</td>

34	<td valign="top">

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

36

</td>

37

</tr>

38

<tr>

39	<td valign="top">

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

41

</td>

42	<td valign="top">

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

44

</td>

45

46

</tr>

47

<tr>

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

49	<input type="submit" value="Kirim"/>

50

</td>

51

</tr>

52

</table>

53

</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

01

<?php

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

03

04	// Ubah dua baris di bawah ini

05	$email_to = "you@yourdomain.com";

06

07	$email_subject = "website html form submissions";

08

09

10	function died($error) {

11	// your error code can go here

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

13	echo "These errors appear below.

14

15

";

16	echo $error."

17

18

";

19	echo "Please go back and fix these errors.

20

21

";

22

die();

23

}

24

25	// validation expected data exists

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

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

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

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

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

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

32

}

33

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

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

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

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

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

39

40	$error_message = "";

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

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

43	$error_message .= 'The Email Address you entered does not appear to be valid.

44

';

45

}

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

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

48	$error_message .= 'The First Name you entered does not appear to be valid.

49

';

50

}

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

52	$error_message .= 'The Last Name you entered does not appear to be valid.

53

';

54

}

55	if(strlen($comments) < 2) {

56	$error_message .= 'The Comments you entered do not appear to be valid.

57

';

58

}

59	if(strlen($error_message) > 0) {

60	died($error_message);

61

}

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

63

64	function clean_string($string) {

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

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

67

}

68

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

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

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

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

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

74

75

76	// create email headers

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

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

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

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

81

?>

82

83	<!-- place your own success html below -->

84

85	Terima kasih sudah mengontak kami!

86

87

<?php

88

}

89

die();

90

?>

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).

1	<form action="index.php" name="myform" method="POST">

2	contoh: <input type="text" name="example"/>

3

</form>

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

1	<form action="index.php">

2	Masukkan nama anda: <input type="text" name="your_name"/>

3

</form>

Hasilnya:

Masukkan nama anda:

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

1	<form action="index.php">

2	Komentar: <textarea rows="5" cols="30"></textarea>

3

</form>

Hasilnya:

Komentar:

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

01	<form action="index.php">

02	<input type="radio" name="color" value="red" /> Red

03

04	<input type="radio" name="color" value="white" /> White

05

06	<input type="radio" name="color" value="blue" /> Blue

07

08	<input type="radio" name="color" value="green" /> Green

09

10

</form>

Hasilnya:

Red
White
Blue
Green

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

01	<form action="index.php">

02	<input type="checkbox" name="friut" value="apples" /> Apples

03

04	<input type="checkbox" name="friut" value="oranges" /> Oranges

05

06	<input type="checkbox" name="friut" value="pears" /> Pears

07

08	<input type="checkbox" name="friut" value="peaches" /> Peaches

09

10

</form>

Hasilnya:

Apples
Oranges
Pears
Peaches

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"

1	<form action="index.php" enctype="multipart/form-data">

2	Select a file to upload: <input type="file" name="selectedfile" />

3

</form>

Hasilnya:

Select a file to upload:

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.

1	<form action="index.php">

2	Enter your password: <input type="password" name="password"/>

3

</form>

Hasilnya:

Enter your password:

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).

1	<form action="index.php">

2	Select Something:

3	<select name="something">

4	<option value="Google">Google</option>

5	<option value="Bing">Bing</option>

6	<option value="Yahoo">Yahoo</opton>

7

</select>

8

</form>

Hasilnya:

Select Something:

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').

1	<form action="index.php">

2	<input type="submit" value="Kirim Formulir" name="submit">

3

</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.

1	<form action="index.php" name="resettest">

2	Masukkan nama anda: <input type="text" name="your_name"/>

3

4	<input type="reset" value="Ulang Form" name="submit"/>

5

</form>

Hasilnya:

Masukkan nama anda :

 

 Terima Kasih.