(HTML) Membuat Sebuah Form Interface

(HTML) Membuat Sebuah Form Interface

Ada dua bagian dalam membangun interaktif dengan menggunakan forms: Membuat form interface dan proses submit oleh user anda. Seksi ini fokus dalam membuat form interface menggunakan tags HTML.

Form Tag:

Forms dibuat deengan menggunakan form tag dan atributnya.

<form>
</form>

form tags selalu mulai dengan pembukaan tag dan penutupan tag. Semua element form  harus ditaruh didalam pembukaan dan penutupan tag.

Input Tag:

Input tag dan semua atributnya adalah digunakan untuk membuat element form. Input tag tidak mempunyai tag penutup. Input tag mempunyai banyak atribut tapi satu-satunya yang diperlukan dari semua element adalah type.

Atribut type mendefinisikan semua form element yang akan ditampilkan. Value yang memungkinkan adalah: text, checkbox, radio, password, hidden, submit, reset, dan image. Contoh: 

Input type yang terakhir, HIDDEN, tidak terlihat pada orang yang melihat web anda. Ini digunakan untuk memberikan informasi pada server.

Name Attribut:

Nama Attribut  dipakai setelah user submit form nya dan informasi sudah dikumpulkan dan diproses. Tidak masalah apa yang anda pakai untuk proses informasinya, anda memerlukan cara untuk identifikasi setiap element dengan yang dimasukkan user. NAME attribut bekerja dalam input si user dengan nama yang anda supply dalam setiap element form. (Content dari attribut NAME tidak terlihat oleh user)

<input type=text NAME="LastName">

Baris dari kode diatas akan membuat input box yang seperti:

Text Label:

Text Label adalah label yang user lihat. Ini memberitahu mereka, apa yang harus ditaruh didalam text box.

Last Name: <input type=text NAME="lastname">

Kode diatas akan membuat input box seperti ini:

TEXT & PASSWORD Element:

Dalam attribut TEXT box and PASSWORD dalam input tag, memperbolehkan user anda untuk menaruh kata-kata kedalam box dalam website anda.

Password ditunjukkan dengan Bintang/astericks, daripada dengan karakter. Attribut NAME diperlukan.

Contoh:

<input NAME="LastName">
<input NAME="LastName" type="text">
<input NAME="LastName" type="password">

Ukuran attribut mengspesifikasikan ukuran dari input box. Setiap browser variasinya adalah berbeda jadi disarankan untuk mengspesifikasi ukurannya dalam text box anda.

CHECKBOX:

CHECKBOX input type memperbolehkan anda membuat checkbox dalam form HTML anda. Ini memperbolehkan user anda memberikan jawaban yes atau no. Yes jika checkbox dipilih; No jika tidak.

Dalam contoh ini, setiap checkbox memliki NAME yang sama tapi mempunyai VALUE yang berbeda. User bisa memilih dari pilihan group. Mereka bisa memilih untuk tidak memilih sama sekali atau memilih sebanyak mungkin.

Pre-Selected Checkboxes:

Jika anda ingin satu pilihan sudah terpilih ketika halaman web terbuka, value CHECKED bisa ditambahkan kedalam input tag. Lihat contoh dibawah, pilihan 'Minivan' sudah dipilih secara default. User bisa untuk uncheck jika dia menginginkannya.

        <input type=checkbox NAME="car" VALUE="minivan" CHECKED> Minivan

        <input type=checkbox NAME="car" VALUE="suv"> SUV

        <input type=checkbox NAME="car" VALUE="sport"> Sport

Tombol RADIO:

Menambahkan type=RADIO kedalam input tag, memperbolehkan anda untuk membuat tombol radio dalam form anda. Tombol RADIO hampir sama dengan checkbox kecuali user hanya boleh memilih satu pilihan saja dari pilihan yang ada.

<input type="radio" name="color" value="Blue">Blue

<input type="radio" name="color" value="Green">Green

<input type="radio" name="color" value="Red">Red

Setiap tombol radio dalam suatu group harus diberikan value NAME yang sama dengan attribut NAME. Attribut NAME menyediakan identifikasi unik untuk logika semua group yang berhubungan. Hanya sati pilihan dari group yang bisa dipilih.

Tombol Pre Selected Radio:

Untuk membuat pilihan default, tambahkan attribut CHECKED kedalam input tag:

<input type="radio" name="addme" value="Yes" CHECKED> Yes       

<input type="radio" name="addme" value="No"> No

SUBMIT:

Tombol Submit memperbolehkan user untuk mengirim informasi ke webserver untuk diproses. SUBMIT adalah ditambahkan kedalam attribut TYPE dari input tag. Contoh:

<input type="submit">

RESET:

Tombol RESET memperbolehkan user untuk menghapus semua yang dia sudah isi dala form. RESET ditambahkan dengan attribut TYPE dalam input tag. Contoh:

        <input type="reset">

Gambar:

Type Gambar memeperbolehkan anda manambahkan sebuah gambar dibandingkan dengan menampikan tombol SUBMIT. Ini memerlukan attribut SCR. Attribut ALT, WIDTH, dan HEIGHT direkomendasikan untuk dipakai. Tag BORDER juga bisa ditambah jika diperlukan. Contoh:

        <input type="image" src="credit_card.jpg"

        alt="Submit" border="0" width="150" height="26">

Ketika user klik gambar diatas, maka user sudah mengsubmit data form ke server.

 

Sekian dulu ya sobat kapan-kapan saya posting kembali. Sampai saat itu, anda harus latihan apa yang sudah anda pelajari.

Selamat mencoba J