Joshaxis: HTML Form

H

TML FORM terdiri dari Element FORM, Element INPUT, Element SELECT, Element OPTION, dan Element TEXTAREA

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:

 <br />
<form action="action" method="GET"|"POST">   ...........................<br />
</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:

 <br />
<input 
name="name" 
size="number"
type="text"|"checkbox"|"radio"|"submit"|"reset"
value="value"
checked ><br />

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:

 <br />
<select
          name="name" 
          size="number"
          multiple ><br />
.....................<br />
</select><br />

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:

 <br />
<option
          selected 
          value="number" ><br />
.....................<br />
</option><br />
<br />

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:

 <br />
< textarea
          name="name" 
          cols="number"
          rows="number" ><br />
.....................<br />
< /textarea><br />

CONTOH MEMBUAT FORM

 <br />
<br />
<html><br />
<head><br />
<title>Sample Form</title><br />
</head><br />
<body><br />
<form method="post" action="mailto:cs@joshaxis.co.cc"><br />
   <h4>Sample Form</h4><br />
   <br><br />
   <input type="text" name="var1" size="30" value="enter your name here..."><br />
   <br><br><br />
   <b>are you a student?</b><br />
   <input type="checkbox" name="var2"><br />
   <br><br><br />
   <b>how old are you?</b><br />
   <br><br />
   <input type="radio" name="var3" value="r1">10 - 15<br />
   <br><br />
   <input type="radio" name="var3" value="r2">16 - 20<br />
   <br><br />
   <input type="radio" name="var3" value="r3">21 - 25<br />
   <br><br><br />
   <b>where are you from?</b><br />
   <br><br />
   <select name="var6" size="1"><br />
      <option value="BG">Bulgaria<br />
      <option value="IND"selected>Indonesian<br />
      <option value="UK">United Kingdom<br />
      <option value="USA">USA<br />
         </select><br />
   <br><br><br />
   <br />
<b>your comment:</b><br />
<br><br />
<textarea name="var7" cols="30" rows="6"><br />
</textarea><br />
<br><br><br />
<br />
   <input type="submit" name="var4" value="send"><br />
   <input type="reset" name="var5" value="clear"><br />
</form><br />
</body><br />
</html><br />
<br />
<br />

Jika form ini diisi :

Name : adalah Joshaxis

Student di check

Usia 21-25

dll...

maka bila form ini di send (submit), data form yang terkirim adalah var1="Joshaxis"var2="1"var3="r3"...

Note :

Hasil 'Sample Form' ini hanya contoh tampilan dan tidak terkoneksi ke database. Bila kode dalam kotak biru diatas diketik pada notepad dan menyimpannya sebagai file html, maka method 'post' action form ini yaitu mailto : cs@joshaxis.co.cc akan berfungsi jika terkoneksi dengan internet dan aplikasi outlook atau sejenisnya berfungsi dengan baik.