Membuat Form di HTML

Assalamualaikum wr wb sahabat blogger, kali ini admin ingin berbagi sedikit ilmu mengenai cara membuat form di HTML. Form merupakan tag HTML yang sering digunakan dalam pembuatan aplikasi berbasis web. Untuk mendeklarasikan suatu form digunakan tag sebagai berikut <form>.....</form>, dan di dalam tag ini di definisikan elemen-elemen form seperti action dan method.

Untuk properti masukkan pada elemen formsebagai berikut :

Text box<input type=”text”>

Digunakan 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

contoh : <input type=text name=nama size="50" maxlength="100"/>

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

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

contoh : <input type="hidden" name="hiddenField">

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)

contoh : <input type=checkbox name=hobi value=sport>

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)

contoh : <input type=”radio”>

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

contoh : <input type="submit" name="button" value="button">

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

contoh : <input type=submit value=kirim data/>

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

Reset<input type=”reset”>

Digunakan untuk mereset semua masukan dalam form.

Value = label teks di button

contoh : <input type=reset value=ulang>

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

contoh : <textarea name="Alamat" cols="25" rows="4"></textarea>

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

contoh : <select name=Pekerjaan>
<option value=Pelajar>Pelajar/Mahasiswa
<option value=Wiraswasta>Karyawan
</select>
Berikut contoh dari form yang sudah jadi :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<table width="385" border="0" align="center" bgcolor="#993399">
<tr>
<td colspan="3"><div align="center"><b>MEMBUAT FORM DI HTML</b> </div></td>
</tr>
<tr>
<td width="74">Nama</td>
<td width="4">:</td>
<td width="293"><input type="text" name="nama" size="30" maxlength="100"/></td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td><textarea name="Alamat" cols="25" rows="4"></textarea></td>
</tr>
<tr>
<td>Jenis Kelamin </td>
<td>:</td>
<td><label>
<input name="radiobutton" type="radio" value="radiobutton" />
laki-laki</label>
<label>
<input name="radiobutton" type="radio" value="radiobutton" />
perempuan</label></td>
</tr>
<tr>
<td>Tanggal lahir </td>
<td>:</td>
<td><select name="tgl">
<option value="1">01 </option>
<option value="2">02 </option>
<option value="3">03 </option>
<option value="4">4 </option>
</select>
<select name="bln">
<option value="1">01 </option>
<option value="2">02 </option>
<option valie="3">03 </option>
<option value="4">4 </option>
</select>
<select name="tahun">
<option value="1991">1991 </option>
<option value="1992">1992 </option>
<option value="1993">1993 </option>
<option value="1995">1995 </option>
<option value="1996">1996 </option>
</select></td>
</tr>
<tr>
<td>Pekerjaan</td>
<td>:</td>
<td><select name="Pekerjaan">
<option value="Pelajar">Pelajar/Mahasiswa </option>
<option value="PNS">Pegawai Negeri Sipil </option>
<option value="Karyawan">Wiraswasta </option>
<option value="Wiraswasta">Karyawan </option>
</select></td>
</tr>
<tr>
<td>Hobi</td>
<td>:</td>
<td><input type="checkbox" name="hobi" value="Traveling" />
Traveling
<input type="checkbox" name="hobi2" value="Traveling" />
Browsing
<input type="checkbox" name="hobi3" value="Traveling" />
koding </td>
</tr>
<tr>
<td>Komentar</td>
<td>:</td>
<td><textarea name="komentar" cols="25" rows="4"></textarea></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input name="submit" type="submit" value="submit" data="data"/>
<input name="reset" type="reset" value="reset" /></td>
</tr>
</table>
</body>
</html>

hasilnya seperti berikut :

Mudah kan sahabat blogger mengenai cara membuat form di HTML, mungkin sekian dulu dari admin, wassalamualaikum wr wb.

Membuat Form di HTML

Membuat Form di HTML

Related Post

0 comments:

Posting Komentar