Membuat dan Menyisipkan Form

Form adalah suatu cara untuk mejadikan halaman web menjadi lebih interaktif, karena akan mendaptakan umpan balik dari pengunjung situs web. Form dapat digunakan untuk membuat buku tamu, formulir pemesanan, survey, meminta komentar, halaman login, halaman registrasi/pendaftaran dan lain sebagianya.

Adapun cara untuk membuat form adalah dengan menggunakan elemen FORM kemudian ditambah dengan komponen-komponen pembentuk form seperti input, checkbox, option dan sebagainya.

Perintah untuk membuat form yaitu :

<FORM method="POST/GET" action="URL">

<INPUT>

<INPUT>

</FORM>

Method digunakan untuk menentukan bagaimana form diberlakukan, sedang action sering diisi dengan URL file yang akan melakukan pemrosesan form selanjutnya.

Dalam suatu form bisa mempunyai jenis input yang berbeda-beda. Apa itu input? Input adalah sesuatu yang dimasukkan oleh pembaca halaman web misalnya teks.

Pada dasarnya, input-input pada form terdiri dari beberapa jenis, namun memiliki tipe yang berbeda-beda seperti misalnya pada tag INPUT. untuk lebih jelasnya, silakan ikuti pembahasannya, saya akan mencoba membahasnya secara mudah.

<INPUT>

Seperti telah dijelaskan sebelumnya, input dalam form dimasukkan oleh user dan terdiri dari beebrapa tipe. Input yang dimasukkan user ini selanjutnya akan diproses di lokasi file yang telah dimasukkan dalam atribut action pada tag FORM. Meskipun tag INPUT ini terdiri dari berbagai macam tipe, namun secara default type dari tag INPUT ini adalah "text". Penasaran?? Coba anda ketikkan <INPUT> di text editor kesayangan Anda (kalau saya lebih suka Notepad) lalu save sebagai dokumen HTML, kemudian lihat hasilnya di browser. Apakah yang keluar adalah input text berupa kotak?

<INPUT type="tipe input" name="..." {atribut lainnya} />

• type = [ text | password | checkbox | radio | submit | reset | file | hidden | image | button ]
  • Text - input data berupa text inputan biasa berupa huruf, angka, simbol, dan lain-lain (seluruh karakter yang berada di keyboard)
    
  • Password - input data berupa kata sandi. ketika diketikkan yang tampil adalah berupa kode *** atau ··· tergantung pada settingan default browser
    
  • Checkbox - input data berbentuk pilihan yang dapat dipilih lebih dari satu
    
  • Radio - input data berupa pilihan (option) yang hanya bisa memilih satu pilihan
    
  • Submit - input form bebrntuk tombol yang berfungsi untuk mengirim seluruh input form untuk kemudian di proses oleh file action. Input ini juka tidak diberi value atau nilai (caption) akan menjadi Submit Query
    
  • Reset - input form berupa tombol juga yang fungsinya untuk mengembalikan nilai input suatu form ke nilai default. Input ini memiliki value Reset jika Anda tidak mendefinisikannya
    
  • File - input berupa file yang dipilih dari drive komputer. Kegunaannya adalah untuk mengupload file ke server.
    
  • Hidden - input data yang tersembunyi dan tidak tampil atau terlihat di browser
    
  • Image - fungsinya sama seperti submit namun tombol ini berupa objek image yang harus didefinisikan dengan tag src="lokasi_image"
    
  • Button - input yang hanya berupa tombol. Ketika di klik tidak akan ada aksi apapun. Berbeda dengan submit dan reset, tipe ini tidak akan memiliki caption jika Anda tidak mendefinisikannya
    
• name = diisi dengan nama dari input form (disarankan untuk menggunakan huruf kecil dan tidak mengandung spasi dan simbol-simbol khusus, kecuali dash [-] dan unsedscore [_])
• value = diisi dengan nilai dari input form. secara default setiap input memiliki value yang berbeda-beda tergantung jenis inputnya (type)
• size = ukuran atau lebar input berdasarkan jumlah karakter.
• alt = tooltip berwarna kuning yang akan keluar ketika cursor di arahkan atau berada di atas suatu input
• disabled = untuk meng-enable atau disable suatu input
• tabindex = posisi fokus tab dan memiliki nilai antara 0 sampai 32767
• Adapun atribut-atribut lainnya hanya berlaku pada beberapa type input saja.
  checked = hanya berlaku pada input bertipe checkbox atau radio, fungsinya untuk menentukan apakah input itu terpilih atau tidak
  maxlength = untuk menentukan jumlah maksimal karakter yang dimasukkan kedalam input yang bertipe text, password dan hidden
  src = mengambil sumber image (pada input bertipe image)
  align = [ top | middle | bottom | left | right ]
  multiple = untuk mengaktifkan multiple choice pada input SELECT

<BUTTON>...</BUTTON>

Input ini memiliki fungsi yang sama dengan INPUT bertype submit, reset atau push button biasa. Namun kelebihan dari input <BUTTON> ini adalah lebih user interface karena bisa di customize oleh author, misalnya dengan image. Bila menggunakan text bisa Anda percantik lagi misalnya menjadi tebal dan diberi warna.

Adapun atribut yang digunakan hampir sama dengan atribut pada input <INPUT> yakni name, type, value, tabindex dan disabled. Dengan input <BUTTON> ini memungkinkan sang author untuk memberi fasilitas multiple submit form.

Sebagai contoh, kita akan membuat tombol seperti berikut.

yang kita perlu lakukan adalah memasukkan kode HTML seperti ini

<BUTTON type="submit"><IMG src="submit.png" /></BUTTON>

<SELECT>...</SELECT>

Input ini berupa dropdown dimana user cukup mengklik salah satu pilihan pada list yang tersedia. Atribut yang digunakannya sama seperti input-input sebelumnya, namun khusus untuk size, berfungsi untuk menentukan banyaknya baris yang ditampilkan dalam dropdown. Secara default input select hanya dapat memilih satu pilihan saja, namun bisa juga memilih lebih dari satu hanya dengan menambahkan atribut multiple. Bila multiple dipih dalam tag select, untuk memilih lebih dari satu user harus memilih option sambil menekan tombol CTRL pada keyboard dan sang author disarankan untuk memberi size lebih dari 1, misalnya 2 atau 3.

Untuk mendefinisikan pilihan-pilihan yang tersedia dalam input SELECT ini diperlukan tag <OPTION>...</OPTION>

<select size="1" name="option">

    <option>Option 1</option>

    <option>Option 2</option>

    <option>Option 3</option>

    <option>Option 4</option>

    <option>Option 5</option>

</select>

dan hasilnya adalah

<TEXTAREA>...</TEXTAREA>

Input TEXTAREA memiliki funngsi yang sama dengan INPUT text, namun di input TEXTAREA Anda bisa membuat input dalam bentuk multiple line. Selain itu, jumlah karakter yang dapat dimasukkan dalam TEXTAREA bisa banyak, sampai 32 atau 64 kilobyte, lebih banyak dari INPUT text yang secara default hanya 255 karakter.

Lebar dan tinggi TEXTAREA ditenukan dengan atribut cols dan rows (kolom dan baris) dengan nilai satuan karakter. Jadi ketika memberi nilai cols="50" berarti lebar TEXTAREA adalah sebanyak 50 karakter dan rows="5" artinya tinggi TEXTAREA adalah sebanyak 5 baris.

<TEXTAREA rows="2" cols="20">teks inisial</TEXTAREA>

Dan hasilnya adalah

Perintah untuk membuat form yaitu :

<FORM method="POST/GET" action="URL">

  <INPUT>

  <INPUT>

</FORM>

Method digunakan untuk menentukan bagaimana form diberlakukan, sedang action sering diisi dengan URL tempat pemrosesan form selanjutnya.

Bagian berikut menerangkan elemen-elemen yang dapat ditempatkan dalam suatu form.

Ya segitu dulu tutorial dari saya, lagian udah malem... ngantuk nih besok kita lanjutkan lagi deh