Langsung ke konten utama

HTML FORM

Oleh

OBJEKTIF:
Setelah mempelajari materi ini diharapkan anda dapat memahami penggunaan element-element untuk pembuatan form.

MATERI:
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 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>


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:


                           


Nama file: latihan7_1.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:




   
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:




   
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.



 

Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

pengertian Track Back

Oleh
Trackback merupakan mekanisme pemberitahuan kepada pemilik weblog bahwa ada yang memiliki tema postingan yang sama dan menginginkan pemilik web menaut postingan yang sama tersebut Sejarah Spesifiksi protokol ini dimiliki Six Apart Akan tetapi implementasi pertama dilakukan pada piranti lunak (software) blogging Movable Type mereka pada Agustus 2002. Sebelumnya trackback sudah diimplementasikan pada perangkat (tool) blogging lain. Sejak bulan Februari 2006, Six Apart, membangun tim kerja untuk menyempurkan integrasi protokol trackback ke dalam platform blog mereka. Tujuannya agar bisa disetujui ETF dan bisa menjadi standar internet. Contoh Sebagai contoh, anda memiliki postingan dengan pranala http://domainanda.com/latihan-posting.html, lalu seseorang juga memposkan topik yang sama dengan anda dan mengisi formulir trackback dengan pranala anda seperti ini http://domainanda.com/latihan-posting.html/trackback. Ringkasan pos di blog anda tadi akan otomatis masuk ke komentar pos blo...
Posting Komentar
lanjut baca??

10 Eksekutif Dunia dengan Gaji Tertinggi

Oleh
Saat ini, terdapat sekitar 20 eksekutif yang memperoleh gaji hingga jutaan dolar AS. Belum lama ini publik sempat diributkan dengan penghasilan pimpinan puncak Badan Usaha Milik Negara (BUMN) yang dianggap terlalu tinggi. Penghasilan eksekutif BUMN itu jauh berlipat ganda jika dibandingkan penghasilan Presiden RI Susilo Bambang Yudhoyono. Berdasarkan data laporan keuangan sejumlah BUMN, gaji direktur utama PT Telekomunikasi Indonesia Tbk sekitar Rp7,22 miliar per tahun. Sementara itu, direksi PT Bank Mandiri Tbk minimal menerima penghasilan Rp7 miliar per tahun. Walau bukan perbandingan yang setara, gaji yang diterima bos-bos BUMN itu bagaikan bumi dan langit jika dibandingkan dengan penghasilan pemimpin perusahaan terkemuka di dunia. Saat ini terdapat sekitar 20 eksekutif (chief executive officer/CEO) yang memperoleh penghasilan hingga jutaan dolar AS atau setara ratusan miliar rupiah. Sejumlah CEO itu memperoleh kompensasi hingga dua kali lipat bahkan tiga kali lipat s...
Posting Komentar
lanjut baca??

Sejarah Sistem Operasi dari DOS, Windows sampai Linux

Oleh
Artikel ini akan menguraikan sejarah sistem operasi dari DOS, Mac, Windows, BSD, sampai Linux. 1980   QDOS : Tim Paterson dari Seattle Computer menulis QDOS yang dibuat dari OS terkenal pada masa itu, CP/M. QDOS (Quick and Dirty Operating System) dipasarkan oleh Seatle Computer dengan nama 86-DOS karena dirancang untuk prosesor Intel 8086. Microsoft : Bill Gates dari Microsoft membeli lisensi QDOS dan menjualnya ke berbagai perusahaan komputer. 1981   PC­ DOS : IBM meluncurkan PC­ DOS yang dibeli dari Microsoft untuk komputernya yang berbasis prosesor Intel 8086. MS­ DOS : Microsoft menggunakan nama MS­ DOS untuk OS ini jika dijual oleh perusahaan diluar IBM. 1983   MS­ DOS 2.0 : Versi 2.0 dari MS­ DOS diluncurkan pada komputer PC XT. 1984   System 1.0 : Apple meluncurkan Macintosh dengan OS yang diturunkan dari BSD UNIX. System 1.0 merupakan sistem operasi pertama yang telah berbasis grafis dan menggunakan mouse. MS ­DOS 3.0 : Microsoft meluncurkan MS DOS 3.0 untuk PC AT yang menggun...
Posting Komentar
lanjut baca??