Akademia Informatika: Html

Panduan Html Form

Panduan Html Form - Setelah mempelajari materi ini diharapkan anda dapat memahami penggunaan element-element untuk pembuatan form.

Element FORM, Element INPUT, Element SELECT, Element OPTION, Element TEXTAREA

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 Text Area
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>

LATIHAN !

Gunakan teks editor misalkan "Notepad" untuk menyunting dan menyimpan script latihan di bawah ini. Untuk melihat hasilnya bukalah file tersebut dengan menggunakan web browser atau gunakan editor yang telah tersedia pada modul ini dengan mengklik menu Editor.

Latihan 1:
Buat form dengan input kontrol form seperti text, checkbox, radio, reset, submit, seperti tampilan di bawah ini:

form1

Nama file: latihan7_1.html

<html>
<head>
<title>Latihan7-1</title>
</head>
<body>
<FORM METHOD="POST" ACTION="mailto:teknisi@jardiknas.org">
   <H4>FORM</H4>
   <INPUT TYPE="text" NAME="var1" SIZE="30" VALUE="Enter your name here.">
   <BR><BR>
   <B>Are you a student?</B>
   <INPUT TYPE="checkbox" NAME="var2">
   <BR><BR>
   <B>How old are you?</B>
   <BR>
   <INPUT TYPE="radio" NAME="var3" VALUE="r1">10 - 15
   <BR>
   <INPUT TYPE="radio" NAME="var3" VALUE="r2">16 - 20
   <BR>
   <INPUT TYPE="radio" NAME="var3" VALUE="r3">21 - 25
   <BR><BR>
   <INPUT TYPE="submit" NAME="var4" VALUE="Send">
   <INPUT TYPE="reset" NAME="var5" VALUE="Clear">
</FORM>
</body>
</html>

Jika diisi namanya adalah Rahmat ; student di check ; umur 21-25 ; maka jika form ini di submit data form yang terkirim adalah var1="Rahmat"&var2="1"&var3="r3"

Latihan 2:
Dari latihan 1 tambahkan menu select seperti gambar di bawah ini:

form2

Nama file: latihan7_2.html

<html>
<head>
<title>Latihan7-2</title>
</head>
<body>
<FORM METHOD="POST" ACTION="mailto:teknisi@jardiknas.org">
   <H4>FORM</H4>
   <INPUT TYPE="text" NAME="var1" SIZE="30" VALUE="Enter your name here.">
   <BR><BR>
   <B>Are you a student?</B>
   <INPUT TYPE="checkbox" NAME="var2">
   <BR><BR>
   <B>How old are you?</B>
   <BR>
   <INPUT TYPE="radio" NAME="var3" VALUE="r1">10 - 15
   <BR>
   <INPUT TYPE="radio" NAME="var3" VALUE="r2">16 - 20
   <BR>
   <INPUT TYPE="radio" NAME="var3" VALUE="r3">21 - 25
   <BR><BR>
   <B>Where are you from?</B>
   <BR>
   <SELECT NAME="var6" SIZE="1">
      <OPTION VALUE="BG">Bulgaria
      <OPTION VALUE="UK">United Kingdom
      <OPTION VALUE="USA" SELECTED>USA
   </SELECT>
   <BR><BR>
   <INPUT TYPE="submit" NAME="var4" VALUE="Send">
   <INPUT TYPE="reset" NAME="var5" VALUE="Clear">
</FORM>
</body>
</html>

Latihan 3:
Dari latihan 2 tambahkan textarea seperti gambar di bawah ini:

form3

Nama file: latihan7_2.html

<html>
<head>
<title>Latihan7-2</title>
</head>
<body>
<FORM METHOD="POST" ACTION="mailto:teknisi@jardiknas.org">
   <H4>FORM</H4>
   <INPUT TYPE="text" NAME="var1" SIZE="30" VALUE="Enter your name here.">
   <BR><BR>
   <B>Are you a student?</B>
   <INPUT TYPE="checkbox" NAME="var2">
   <BR><BR>
   <B>How old are you?</B>
   <BR>
   <INPUT TYPE="radio" NAME="var3" VALUE="r1">10 - 15
   <BR>
   <INPUT TYPE="radio" NAME="var3" VALUE="r2">16 - 20
   <BR>
   <INPUT TYPE="radio" NAME="var3" VALUE="r3">21 - 25
   <BR><BR>
   <B>Where are you from?</B>
   <BR>
   <SELECT NAME="var6" SIZE="1">
      <OPTION VALUE="BG">Bulgaria
      <OPTION VALUE="UK">United Kingdom
      <OPTION VALUE="USA" SELECTED>USA
   </SELECT>
   <BR><BR>
   <B>Your comment:</B>
   <BR>
   <TEXTAREA NAME="var7" COLS="30" ROWS="6">
   </TEXTAREA>
   <BR><BR>
   <INPUT TYPE="submit" NAME="var4" VALUE="Send">
   <INPUT TYPE="reset" NAME="var5" VALUE="Clear">
</FORM>
</body>
</html>

Catatan:

Pemberian nilai attribute action pada element FORM dengan menuju ke alamat email adalah untuk memperlihatkan nilai-nilai data form yang dikirimkan.

Dasar Pemograman Html

HyperText Mark Up Languange (HTML) merupakan aplikasi pertama yang digunakan untuk membuat web dengan protocol yang digunakan dinamakan HTTP (HyperText Transfer Protocol). World Wide Web atau biasa kita sebut dengan Web merupakan salah satu sumber daya Internet yang berkembang pesat.
Pada perkembangan berikutnya, sejumlah skrip dan objek dikembangkan untuk memperluas kemampuan HTML, antara lain PHP dan ASP sedangkan contoh yang berupa objek antara lain Applet(Java).

HTML merupakan bahasa pemrograman yang dipahami oleh semua computer yang dipakai di dunia atau internet. Perintah HTML harus berada didalam tanda <..>, yang digunakan untuk menampilkan fungsi – fungsi tertentu misalnya fungsi link dan sebagainya.

Dinamakan Hypertext karena kita bias membaca isi dari sebuah dokumen/berita tanpa harus membacanya baris demi baris. Kita bias melompat – lompat dari satu topic ke topic lainnya.
Dinamakan MarkUp Languange karena HTML mengandung tanda atau perintah tertentu untuk menentukan tampilan teks, gambar, dsb beserta fungsi – fungsi yan diinginkan.
Contoh : <B>Desain dan Pemrograman Web<B>

Perintah <B> ini menyebabkan tulisan diatas menjadi tebal (Bold) ketika ditampilkan di browser. Browser (Pencari,pembuka situs) merupakan sarana yan digunakan untuk membuka website. Jadi HTML memiliki perintah khusus yang disebut elemen, dan elemen – elemen itu berada di antara tag awal< dan tag akhir>

Membuat Homepage Sederhana

Dalam pembuatah sebuah homepage, ada beberapa software yang dapat digunakan antara lain:

1. Notepad
Program teks sederhana milik Windows yang dapat digunakan untuk mengetikkan perintah HTML. Jika kita menggunakan Linux atau unix, maka kita bisa menggunakan vi atau pico sebagai pengganti Notepad.

2. Pembuat Grafis
Untuk membuat gambar yang menarik perhatian. Seperti Adobe Photoshop, CorelDraw, dsb.

3. Browser
Untuk melihat hasil/tampilan homepage dari program -program HTML yang telah kita ketikkan di Notepad. Yang kita gunakan kali ini adalah Microsoft Internet Explorer.
Adapun langkah kerja membuat homepage dengan menggunakan Notepad adalah:
- Klik Start pada menu utama Windows
- All Programs
- Accessories
- Notepad

Tips:
Ada 2 hal penting yang perlu kita ketahui yaitu fasilitas View Source dan Refresh yang berguna mempercepat pekerjaan jika kita menggunakan Internet Explorer.

1. View Source, untuk melihat source (isi perintah HTML) dari sebuah dokumen HTML. Pada browser internet explorer,jika mengklik View lalu pilih Source, maka akan terlihat source dari dokumen tersebut seperti pada Notepad. Sehingga kita akan lebih mudah melakukan perubahan/edit dengan cepat.

2. Refresh, melihat dengan cepat tampilan baru dokumen HTML yang telah di ubah. Dengan cara mengklik symbol refresh atau tekan F5.

Kerangka Dasar Homepage
Berikut ini adalah kerangka dasar dokumen HTML yang merupakan aturan dari W3 Consortium
<HTML>
<HEAD>***bagian dari head***</HEAD>
<BODY>***bagian dari body***</BODY>
</HTML>
Untuk lebih jelasnya sekarang saatnya praktikum
Buka Notepad dan ketikkan source program berikut
<html>
<head>
<title> Contoh script HTML </title>
</head>
<body>
<h2>Belajar Desain WEB dengan HTML</h2>
HTML adalah dasar pembuatan website,<br>
dimana perintah – perintah HTML dapat diketik <br>
pada notepad (bila menggunakan S.O Windows) atau
Vi(bila menggunakan Linux).
</body>
</html>
Simpan dengan nama Source1.htm dengan memilih type All files. Kemudian buka dengan Browser dan lihat hasilnya.

Akademia Informatika

Latest Post

Panduan Html Form

Dasar Pemograman Html

Artikel Terbaru