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

Daftar Instruksi Bahasa Assembly - Perintah Perpindahan Data

Oleh
Dalam program bahasa assembly terdapat 2 jenis yang kita tulis dalam program: 1. Assembly Directive (yaitu merupakan kode yang menjadi arahan bagi assembler/compiler untuk menata program) 2. Instruksi (yaitu kode yang harus dieksekusi oleh CPU mikrokontroler dengan melakukan operasi tertentu sesuai dengan daftar yang sudah tertanam dalam CPU) Daftar Assembly Directive Assembly Directive Keterangan EQU Pendefinisian konstanta DB Pendefinisian data dengan ukuran satuan 1 byte DW Pendefinisian data dengan ukuran satuan 1 word DBIT Pendefinisian data dengan ukuran satuan 1 bit DS Pemesanan tempat penyimpanan data di RAM ORG Inisialisasi alamat mulai program END Penanda akhir program CSEG Penanda penempatan di code segment XSEG Penanda penempatan di e...
2 komentar
lanjut baca??

Memahami Fungsi-Fungsi dalam MS Exel 2003

Oleh
UNTUK FILE PDF-NYA ADA DISINI Menggunakan Fungsi IF       Fungsi   IF  digunakan   untuk  mengisi   sel  dengan  syarat   tertentu.  Disini  hasilnya minimal ada 2 alternatif. Bentuk umumnya adalah:  =if(syarat,hasil1,hasil2)       Jika   syaratnya  terpenuhi,  yang   muncul   adalah   hasil1,  sebaliknya  kalau  tidak memenuhi syarat    akan muncul hasil2 Perhatikan Contoh berikut:  Untuk mengisi kolom keterangan berdasarkan nilai yang dimiliki siswa jika nilai lebih besar 50 (>50) maka akan Lulus dan jika kurang dari 50 (<50) maka Gagal. Pada kolom keterangan dituliskan rumus: =if(c2>50;”Lulus”;”Gagal) Latihan Kerjakan soal dibawah ini: Upah Lembur = jam lembur * 1500 Tunjangan   = 10% * gaji pokok Gaji Bersih = Gaji Pokok + Upah Lembu...
Posting Komentar
lanjut baca??

HTML FORMAT TEKS

Oleh
OBJEKTIF: Setelah mempelajari materi ini diharapkan anda dapat memahami penggunaan element-element untuk pemformatan teks. MATERI: Element BR(line break), Element P(paragraph), Element H1,H2,H3,H4,H5,H6(header), Element B(bold), Element I(italic), Element U(underline), Element PRE(preformated text), Element CENTER, Element BASEFONT, Element FONT, Element HR(horizontal rule) ELEMENT BR (Line Break) Element BR berfungsi untuk ganti baris. Dan element BR ini tidak mempunyai tag penutup. Sintaks: <br> ELEMENT P (Paragraph) Element P berfungsi untuk ganti paragraf yang diikuti dengan baris kosong di awal dan akhir paragraf. Tag penutup </p> sifatnya optional jika suatu paragraf diikuti oleh paragraf berikutnya. Jika tag </p> diabaikan, maka paragraf itu tidak akan diikuti dengan baris kosong di akhir paragraf. Element P mempunyai attribute yaitu align yang bernilai "left" , "center" , "right" yang menspesifikasikan posisi tepi horizontal dar...
Posting Komentar
lanjut baca??