Materi Pertemuan 3. Membuat Form HTML

Hallo semuanya, pada materi kali ini kita akan membahas tentang bagaimana membuat form pada HTML. Form merupakan tempat penginputan data sebelum diproses oleh sistem. salah satunya adalah form login, form comment, form data user, dan lain sebagainya. untuk proses penginputan data dari form akan kita bahas di materi PHP, MYSQL, dan JavaScript. tag yang digunakan untuk membuat form ini adalah tag <form> yang didalamnya bisa berupa <input>, <textarea>, <opstion> dan <select>.

Mari kita memulai membahas setiap tag yang ada.

Tag <form>

Dalam tag <form> ini dibutuhkan beberapa atribut untuk memproses data yang akan dikirim. dan biasanya nilai yang di kirim berupa alamat dari sebuah halaman untuk memproses data inputan. dan atribut yang kedua berupa method. method ini menjelaskan bagaimana data yang akan dikirim oleh web browser. nilai dari method ini biasanya get atau post.

Tag <input>

Tag input merupakan tag yang akan digunakan dalam form pengisian. tag input ini memiliki banyak sekali bentuk yang bisa digunakan misalkan isian teks, password, checkbox, radio button, sampai dengan tombol submit berada dalam tag <input>. 

Berikut beberapa bentuk dalam tag <input> yang di kategorikan berdasarkan atribut :

• <input type=’text’> 

Form ini bersifat menerima inputan text misalkan: username, nama, tempat lahir atau berupa inputan text yang pendek.

• <input type=’password’> 

Form ini bersifat menerima inputan password. Setiap text yang di input akan di tampilkan sebagai tanda titik(di samarkan), textbox ini biasanya digunakan untuk membuat inputan password.

• <input type=’submit’> 

Inputan ini berupa tombol submit untuk memproses data inputan dari form.

• <input type=’checkbox’> 

Inputan berupa checkbox yang dapat di ceklis oleh user. Inputan ini memungkinan user untuk men-checklist banyak pilihan sekaligus.

• <input type=’radio’> 

Inputan ini berupa radio grup, dimana user dapat memilih salah satu dari pilihan yang disediakan dengan menggunakan form radio.contoh nya adalah form pemilihan jenis kelamin.

• Tag <textarea>

Tag <textarea> adalah tag yang sama fungsinya dengan inputan text, hanya saja pada textarea ini dapat diisikan dengan lebih banyak teks didalamnya secara sekaligus. Contoh nya untuk pengisian alamat lengkap.

• Tag <select>

Tag <select> merupakan tag yang digunakan user untuk memilih data yang sudah disediakan. Dalam penggunakan <select> selalu diikuti oleh <option> yang digunakan untuk membuat pilihan.

<select>
 <option>Mataram</option>
 <option>Praya</option>
</select>

Untuk lebih memberikan pemahaman lebih tentang cara membuat form pada HTML, silahkan perhatikan contoh berikut ini:

Simpan file di atas dengan nama form.html, kemudian buka melalui browser kesayangan kalian.  Maka akan muncul tampilan form sebagai berikut:

Tampilan form terlihat belum rapi, karena hanya menggunakan HTML. untuk membuatnya menjadi terlihat lebih rapi, kita bisa menambahkan kode CSS. Namun, untuk CSS kita akan bahas pada pertemuan lainnya.

Demikian materi kita hari ini, silahkan di praktikan, semoga membatnu.

Terimakasih.