Yuni Permatasari: Cara Membuat Form di HTML

From HTML merupakan tag yang paling penting dalam pemrograman HTML khususnya dalam pembuatan aplikasi berbasis web. Form menyediakan property masukan yang dapat berupa textbox, check box, radio button, dan button. Untuk mendkelariskan sebuah from digunakan tag <form>…</form>. Di dalam tag ini di definisikan elemen – elemen form sperti yang telah di sebutkan di atas. Selain tag, elemen form juga dapat menuliskan sembarang teks, tag, maupun image.

Properti masukan pada elemen form

1. Text box<input type=”text”>

Dignakan untuk memasukan input yang berupa teks.

Size = ukuran dari textbox dalam karakter

Maxsize = maksimal jumlah karakter yang dapat di input

Nama = nama variable yang dikirim ke suatu aplikasi

Value = akan menampilkan isinya sebagai nilai default

2. Password<input type=”password”>

Di gunakan untuk memasukan password

Size = ukuran textbox dalam karakter

Maxsize = maksimal jumlah karakter yang dapat di input

Name = nama variable yang dikirim ke suatu aplikasi

3. Hidden<input type”hidden”>

Digunkan untuk mengirim data ke suatu aplikasi yang tidak dingginkan untuk dilihat oleh browser.

Name = nama dari variable yang dikirim ke suatu aplikasi

Value = nilai dari variable

4. Check Box<input type=”checkbox”>

Check box digunakan untuk dapat memilih lebih dari satu pilihan.

Name = nama dari variable yang dikirim ke suatu aplikasi

Value = nilai dari variable

Checked (checkbox yang sudah ditandai)

5. Radio Button<input type=”radio”>

Radio button digunakan agar dapat memilih ahnya salah satu pilihan.

Name = nama veriabel yang dikirim ke suatu aplikasi

Value = nilai dari variable

Checked (radio button yang sudah di tandai)

6. Push Button<input type=”button”>

Elemen ini biasanya digunakan dengan JavaScript atau VBScript untuk menghasilkan suatu aksi.

Name = nama dari variable yang dikirim ke suatu aplikasi

Value = label teks di atas tombol

7. Submit<input type=”submit”>

Setiap elemen form membutuhkan tombol submit untuk mengirimkan nama dan nilinya ke suatu aplikasi yang di tentukan dlam atribut ACTION dlam elemen FORM.

Name = nama dari variable yang dikirim ke suatu aplikasi

Value = label teks di atas tombol

8. Image Submit Button<input type=”image” src=”url”>

Digunakan untuk menggantikan tombol standar submit dengan image.

Name = nama dari variable ayng dikirim ke suatu aplikasi

9. Reset<input type=”reset”>

Digunakan untuk mereset semua masukan dalam form.

Value = label teks di button

10. Text Area<textarea>…</textarea>

Elemen untuk memasukan teks secara leluasa seperti notepad.

Nama = nama dari veriabel yang dikirim ke suatu aplikasi

Rows = panjang baris dalam karakter

Cols = tiggi kotak

Select<select>…</select>

Daftar isi dalam property select menggunakan tag <option>

Size = jumlah pilihan yang dapat terlihat

Name = nama dari veriabel yang dikirim ke suatu aplikasi

Untuk mencobanya ketikan scrpt berikut pada notepad lalu simpan dengan estensi .HTML lalu jalankan.

<html>

<body>

<p>

Nama : <input type="text" name="nama">

<p>

Alamat : <input type="text" name="alamat">

<p>

Jenis Kelamin :

<input type="radio" name="sex" value="man">laki - laki

<input type="radio" name="sex" value="woman">Perempuan

<p>

Pekerjaan :

<option value="pelajar">Pelajar</option>

<option value="Peg_negri">Pegawai Negri</option>

<option value="Buruh">Buruh</option>

</select>

<p>

Hobby :

<input type="checkbox" name="hobby" value="Sepakbola">Facebookan

<input type="checkbox" name="hobby" value="Main Komputer">Main Komputer

<input type="checkbox" name="hobby" value="Tidur">Tidur

<p>

</form>

</body>

</html>

Maka hasilnya akan seperti di bawah, akan tetapi jangan kaget jika ketika anda mengklik “Kirim Data” semua tulisan yang ada dalam form akan menghilang karena semua tulisan yang anda masukan sedang dalam proses pengiriman namun karna disini kita belum memberi tujuan pada form ini maka data tersebut hanya akan menghilang.

Untuk menampilkan data yang di submit maka kita harus membuat sebuah file baru dengan nama cetak.php berikut ini adalah scriptnya :

<?php

$nama=$_POST['nama'];

$alamat=$_POST['alamat'];

$sex=$_POST['sex'];

$pekerjaan=$_POST['pekerjaan'];

$hobby=$_POST['hobby'];

echo "Nama : ";

echo $nama;

echo "<br>";

echo "Alamat : ";

echo $alamat;

echo "<br>";

echo "Jenis Kelamin : ";

echo $sex;

echo "<br>";

echo "Pekerjaan : ";

echo $pekerjaan;

echo "<br>";

echo "Hobby :";

echo $hobby;

simpan kedua file tersebut dalam satu folder lalu jalankan.

Berikut ini adalah element-element untuk pembuatan form

ELEMENT FORM
Element FORM berfungsi untuk mendefinisikan form interaktif. Element ini mempunyai attribute yaitu action, dan method. Attribute action berisikan aksi terhadap form yang dikirim (URI) dan attribute method berisikan metode form melakukan proses pengiriman(GET/POST).

Sintaks:
<form action="action" method="GET"|"POST">
...........................
</form>

ELEMENT INPUT
Element INPUT berfungsi untuk mendefinisikan input yang akan dimasukkan pengguna. Element ini mempunyai attribute yaitu name, size, type, value, checked.
Attribute name mendefinisikan nama dari input kontrol form, attribute size mendefinisikan ukuran teks pada input kontrol, type mendefinisikan bentuk-bentuk input kontrol, value mendefinisikan nilai awal/reset/submit, checked mendefinisikan pilihan terpilih pada type radio/checkbox. Element ini tidak mempunyai tag penutup dan harus berada di dalam element FORM.

Sintaks:
<input
name="name"
size="number"
type="text"|"checkbox"|"radio"|"submit"|"reset"
value="value"
checked >

ELEMENT SELECT
Element SELECT berfungsi untuk mendefinisikan opsi pilihan pada form kontrol. Element ini mempunyai attribute yaitu name, size, multiple(diizinkan banyak pilihan). Element ini harus berada di dalam element FORM.

Sintaks:
<select
name="name"
size="number"
multiple >
.....................
</select>

ELEMENT OPTION
Element OPTION mendefinisikan opsi pilihan pada menu SELECT. Element ini mempunyai attribute selected, dan value. Attribute selected opsi terpilih dan attribute value berisikan nilai element OPTION.

Sintaks:
<option
selected
value="number" >
.....................
</option>

ELEMENT TEXTAREA
Element TEXTAREA berfungsi sebagai input kontrol form untuk memasukkan teks lebih dari satu baris. Element ini mempunyai attribute yaitu name, cols, rows. Attribute name mendefinisikan nama input kontrol form element textarea, attribute cols mendefinisikan jumlah kolom textarea yang terlihat, dan attribute rows mendefinisikan jumlah baris textarea yang terlihat. Element ini harus berada di dalam element FORM

Sintaks:
<textarea
name="name"
cols="number"
rows="number" >
.....................
</textarea>

Yuni Permatasari

Jumat, 11 Januari 2013

Cara Membuat Form di HTML

Tidak ada komentar:

Posting Komentar

Mengenai Saya