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
|
Tidak ada komentar:
Posting Komentar