Pemrograman Web - Form (Text Area)

Assalamualaikum wr.wb
Pada kesempatan kali ini kita akan belajar tentang Form. Apa itu Form? Pernah liat Formulir di Web? biasanya kan kalau kita bikin Akun di Website tertentu kita harus memasukan Data kita terlebih dahulu di Halaman Pendaftaranya kan?

Didalam Halaman pendaftaran itu ada Kotak yang bisa kita isi dengan Nama / ID , Password, Tanggal Lahir, Jenis Kelamin, dll kan?

Nah, hal tersebut itu disebut Form.

Dalam HTML ada beberapa Tag yang kita gunakan dalam pembuatan Form, diantaranya:
- <form> & </form> : Untuk mulai membuat Form
- <textarea attribut="isi"> : Untuk membuat Text area beserta Attributnya
               atau
- <input type=textarea attribut="isi">   : Untuk membuat Text area beserta Attributnya
- <input type=hidden attribut="isi">     : Untuk membuat Hidden Input beserta Attributnya
- <input type=password attribut="isi"> : Untuk membuat Text area Password beserta Attributnya
- <input type=submit attribut="isi">     : Untuk membuat Tombol Submit beserta Attributnya
- <input type=file attribut="isi">           : Untuk memilih File beserta Attributnya
- <input type=radio attribut="isi">        : Untuk membuat Radio Button beserta Attributnya
- <input type=checkbox attribut="isi"> : Untuk membuat Checkbox beserta Attributnya
- <select> & </select>                            : Untuk membuat bagian Seleksi / Pilihan beserta Attributnya
- <option> & </option>                          : Untuk pilihan dalam Select

Selain Tag, ada juga Attributnya, Attribut tersebut diantaranya adalah:

Text Area

Berikut Contoh dari penggunaan Text Area:

 Kodingan bisa dilihat disini : Text Area

Text Area Cols

Berikut Contoh Text area dengan Ukuran yang berbeda menggunakan Attribut Cols:

 Kodingan bisa dilihat disini : Text Area Cols

Text Area (Read Only)

Berikut Contoh Text Area yang bisa dilihat dan disalin tapi tidak bisa diubah (Read Only)

  Kodingan bisa dilihat disini : Text Area (Read Only)

Text Area (Disabled)

Berikut Contoh Text Area yang bisa dilihat tapi tidak bisa diubah dan disalin (Disabled)

Kodingan bisa dilihat disini : Text Area (Disabled)  

 

Text Area Password

Berikut contoh penggunaan Text Area untuk Password

  

Kodingan bisa dilihat disini : Password 

Text Area (Hidden)

Berikut Contoh penggunaan Text Area yang tidak bisa dilihat, diubah, atau disalin (Hidden)

 

 Kodingan bisa dilihat disini : Hidden

Ada juga Text Area yang langsung terisi dengan Nilai tertentu, contohnya:

  

 Kodingan bisa dilihat disini : Hidden2

Upload File

Berikut adalah Contoh pengunaan Fitur Upload dalam HTML

 Kodingan bisa dilihat disini : Upload

 Radio Button

Contoh pengunaan Radio button yaitu Tombol Pilihan yang hanya bisa dipilih 1 saja. Supaya cuma bisa pilih 1 Opsi pastikan pilihan memiliki Name yang sama. Ada juga Attribut Value yaitu Nilai dari pilihan tersebut

 Kodingan bisa dilihat disini : Upload

Checkbox & Image Button

 Ada Juga Checkbox & Image Button. Checkbox adalah pilihan yang bisa dipilih lebih dari 1. Dan Image Button adalah Tombol dengan gambar tertentu. Jika gambar tidak ada maka Gambar akan berubah menjadi gambar Alternatif

 

 Kodingan bisa dilihat disini : Checkbox & Image Button

Option

Option berfungsi untuk menampilkan beberapa Pilihan. Contohnya:

 

 Kodingan bisa dilihat disini : Option

Form

Setelah tau cara pengunaan Text Box dan Pilihan, mari coba kita membuat sebuah Formulir. Ini hasil buatan saya:

 Kodingan bisa dilihat disini : Formulir

Terakhir, tidak ada salahnya kalau saya membagikan File HTML nya, File HTML bisa diunduh disini: Form (Text Area) 

 Terimakasih telah membaca, Wassalamualaikum wr.wb