Sabtu, 09 Maret 2013

Membuat HTML untuk Form Register

Sebelum membuat kode HTML, apa sih yang dimaksud dengan HTML itu??
HTML(Hyper Text Markup Language) adalah sekumpulan simbol-simbol atau tag-tag yang dituliskan dalam sebuah file yang dimaksudkan untuk menampilkan halaman pada web browser. Tag-tag atau simbo-simbol HTML selalu diawali dengan <x> dan diakhiri dengan </x> dimana x tag HTML seperti b, i, u dan sebagainya. Namun ada juga tag yang tidak diakhiri dengan tanda </x> seperti tag <br>, <input> dan lainnya.
Pada kasus ini saya hanya akan menjelaskan fungsi-fungsi tag yang digunakan untuk Form Registrasi dari HTML.



Berikut ini adalah kode HTML untuk form registrasi
<!DOCTYPE HTML>
<html>
<head>
<title>Tugas_1 Pemrograman Berbasis WEB<P> </title>
</head>
<body>
<p align="center"><font face="Buitenzorg" size="6" color="blue"><b>Form Registrasi</b></font></p>
<form action="" method="get">
<pre>
Nama           :  <input type="text" name="nama" maxlength="50"> <br />
Alamat         :  <input type="text" name="alamat" maxlength="300"> <br />
Tanggal Lahir  :  <input type="date" name="tgl" /><br />
No. Telp       :  <input type="text" name="nama" maxlength="12"> <br />
Alamat Web     :  <input type="url" name="web" /><br />
E-mail         :  <input type="email" name="email" /><br />
Kecamatan      :  <select>
  <option value=" "> </option>
  <option value="ajung">Ajung</option>
  <option value="ambulu">Ambulu</option>
  <option value="arjasa">Arjasa</option>
  <option value="balung">Balung</option>
  <option value="bangsalsari">Bangsalsari</option>
  <option value="gumukmas">Gumukmas</option>
  <option value="jelbuk">Jelbuk</option>
  <option value="jenggawah">Jenggawah</option>
  <option value="jombang">Jombang</option>
  <option value="kalisat">Kalisat</option>
  <option value="kaliwates">Kaliwates</option>
  <option value="kencong">Kencong</option>
  <option value="ledokombo">Ledokombo</option>
  <option value="mayang">Mayang</option>
  <option value="mumbulsari">Mumbulsari</option>
  <option value="pakusari">Pakusari</option>
  <option value="panti">Panti</option>
  <option value="patrang">Patrang</option>
  <option value="puger">Puger</option>
  <option value="rambipuji">Rambipuji</option>
  <option value="semboro">Semboro</option>
  <option value="silo">Silo</option>
  <option value="sukorambi">Sukorambi</option>
  <option value="sukowono">Sukowono</option>
  <option value="sumberbaru">Sumberbaru</option>
  <option value="sumberjambe">Sumberjambe</option>
  <option value="sumbersari">Sumbersari</option>
  <option value="tanggul">Tanggul</option>
  <option value="tempurejo">Tempurejo</option>
  <option value="umbulsari">Umbulsari</option>
  <option value="wuluhan">Wuluhan</option>
</select><br />
<input type="submit" value="Submit"/>
</pre>
</form>
</body>
</html>

Silahkan download HTML form registrasi disini.

Pada pembuatan form registrasi ini saya menggunakan HTML 5. Untuk menggunakan HTML 5 hanya mendeklarasikan kode berikut :
<!DOCTYPE HTML>

Struktur kode HTML yang harus selalu ada di setiap halaman situs adalah:
<html>
<head>
<title>Tugas_1 Pemrograman Berbasis WEB<P> </title>
</head>
<body>
---isi halaman---
</body>
</html>


Struktur kode HTML yang ada pada isi halaman form registrasi :
<p align="center"><font face="Buitenzorg" size="6" color="blue"><b>Form Registrasi</b></font></p>
<form action="" method="get">
<pre>
Nama           :  <input type="text" name="nama" maxlength="50"> <br />
Alamat         :  <input type="text" name="alamat" maxlength="300"> <br />
Tanggal Lahir  :  <input type="date" name="tgl" /><br />
No. Telp       :  <input type="text" name="nama" maxlength="12"> <br />
Alamat Web     :  <input type="url" name="web" /><br />
E-mail         :  <input type="email" name="email" /><br />
Kecamatan      :  <select>
  <option value=" "> </option>
  <option value="ajung">Ajung</option>
  <option value="ambulu">Ambulu</option>
  <option value="arjasa">Arjasa</option>
  <option value="balung">Balung</option>
  <option value="bangsalsari">Bangsalsari</option>
  <option value="gumukmas">Gumukmas</option>
  <option value="jelbuk">Jelbuk</option>
  <option value="jenggawah">Jenggawah</option>
  <option value="jombang">Jombang</option>
  <option value="kalisat">Kalisat</option>
  <option value="kaliwates">Kaliwates</option>
  <option value="kencong">Kencong</option>
  <option value="ledokombo">Ledokombo</option>
  <option value="mayang">Mayang</option>
  <option value="mumbulsari">Mumbulsari</option>
  <option value="pakusari">Pakusari</option>
  <option value="panti">Panti</option>
  <option value="patrang">Patrang</option>
  <option value="puger">Puger</option>
  <option value="rambipuji">Rambipuji</option>
  <option value="semboro">Semboro</option>
  <option value="silo">Silo</option>
  <option value="sukorambi">Sukorambi</option>
  <option value="sukowono">Sukowono</option>
  <option value="sumberbaru">Sumberbaru</option>
  <option value="sumberjambe">Sumberjambe</option>
  <option value="sumbersari">Sumbersari</option>
  <option value="tanggul">Tanggul</option>
  <option value="tempurejo">Tempurejo</option>
  <option value="umbulsari">Umbulsari</option>
  <option value="wuluhan">Wuluhan</option>
</select><br />
<input type="submit" value="Submit"/>
</pre>
</form>

Fungsi tag-tag yang ada pada kode HTML diatas :
Tag
Deskripsi
<html> </html>
Baris paling atas dari setiap file HTML
<head> </head>
Informasi umum dari sebuah halaman web
<title> </title>
Judul halaman. Terdapat pada head
<body> </body>
Settingan atribut untuk seluruh dokumen
<p> </p>
Paragraf
<font> </font>
Mengubah gaya suatu huruf.
<b> </b>
Teks tebal
<form></form>
Mengatur elemen dari form
<input type=>
Variasi dari tipe elemen form
</br>
Ganti baris
<select></select>
Membuat combo-box. Digunakan bersama dengan option
<option></option>
<pre></pre>
Membuat text dengan ukuran huruf yang sama

Sedangkan fungsi atribut yang digunakan pada tag pada kode HTML diatas :
Atribut
Deskripsi
align
mengatur huruf rata tengah, kanan, atau kiri
face
menentukan jenis huruf
size
menentukan ukuran huruf
color
menentukan warna tulisan
action
menentukan URL tujuan dari script yang akan menerima data dari form
method
menentukan jenis pengiriman data ke script tujuan
type
menentukan tipe kotak masukan
name
menentukan nama data
maxlength
menentukan jumlah karakter yang dapat dimasukkan dalam kotak isian
value
menentukan nilai awal untuk kotak masukan