Baca Selengkapnya..Panduan Belajar HTML untuk Pemula

Panduan Membuat Form di HTML

Advertisement

Membuat Form HTML – Form merupakan salah satu bentuk pengumpulan data maupun informasi yang terdiri dari pertanyaan-pertanyaan singkat yang harus diisi oleh user atau pengunjung website. Selain itu, form juga dapat digunakan untuk membuat formulir registrasi maupun login ke website tertentu.

Untuk membuat form menggunakan bahasa HTML dapat mengunakan element HTML yaitu <form> … </form>. Dalam element form tersebut, harus ditambahkan element lain sesuai dengan jenis inputan yang dipakai yaitu element <input>, <label>, <textarea>, <select>, dan <button>. Kesemua element tadi akan kita bahas satu persatu.

Seri belajar HTML:

Perlu diingat bahwa formulir HTML tidak cukup hanya dengan membuat form nya saja, perlu program tambahan untuk memproses data tersebut, sehingga dibutuhkan atribut tambahan pada element form yaitu action untuk menentukan aksi yang akan dilakukan saat data dikirim. Format penulisan element menjadi:

Membuat Form HTML – Element Label

Element pertama yang kita bahas adalah label. Element label difungsikan untuk menambahkan informasi maupun keterangan terkait dengan jenis inputan yang digunakan pada form HTML. Elemen label selalu disandingkan dengan element input yang dipakai. Tag yang digunakan untuk membuat label adalah <label> … </label>. Element label dapat ditambahkan dengan atribut lain seperti for=”value” untuk menghubungkan label dengan element lain pada form. Contoh penggunaan element <label> kita sertakan dengan element lain pada form di bawah ini.

Membuat Form HTML – Element Input

Element input banyak digunakan pada pembuatan form HTML dan berfungsi sebagai inputan data maupun informasi lain yang dibutuhkan. Tag yang digunakan untuk membuat element ini adalah <input> tanpa tag penutup. Tag pembuka yang tidak memiliki pasangan tag penutup biasa kita sebut dengan istilah self closing tag.

Ada banyak jenis inputan atau text fields yang dapat kita gunakan untuk membuat form pada HTML, kita ambil beberapa jenis text fields yang biasa dipakai dalam pembuatan form yaitu:

Element input dengan type=”text” <input type=”text”>, menerima input berapa text singkat seperti nama, username, alamat, tempat lahir, dan lain-lain. Contoh:

Membuat form HTML - Input type text

Element input dengan type=”password” <input type=”password”>, berfungsi untuk menerima input berupa password yang disamarkan dengan tanda titik. Contoh:

Membuat form HTML - Input type password

Element input dengan type=”radio” <input type=”radio”>, input berupa radio button (memilih salah satu opsi yang telah disediakan). Contoh:

Membuat form HTML - Input type radio

Element input dengan type=”checkbox” <input type=”checkbox”>, input berupa checkbox atau centang (dapat memilih lebih dari satu opsi yang telah disediakan). Contoh:

Membuat form HTML - Input type checkbox

Element input dengan type=”number” <input type=”number”>, menerima input berupa nomor atau angka. Tambahkan atribut min (angka minimal), max (angka maksimal). Contoh:

Membuat form HTML - Input type number

Element input dengan type=”date” <input type=”date”>, menerima input berapa tanggal. Contoh:

Element input dengan type=”email” <input type=”email”>, menerima input berupa alamat email. Contoh:

Elemen input dengan type=”tel” <input type=”tel”>, menerima input berupa nomor telepon. Tambahkan atribut pattern untuk format nomor telepon. Contoh:

Membuat form HTML - Input type date, email, tel

Element input dengan type=”file” <input type=”file”>, menerima input berupa file maupun dokumen. Contoh:

Membuat form HTML - Input type file

Element input dengan type=”submit” <input type=”submit”>, menerima input berupa submit. Contoh:

Elemen input dengan type=”reset” <input type=”reset”>, menerima input berupa reset. Contoh:

Selain type input di atas, masih terdapat type inputan lain yaitu:

  • <input type=”color”>
  • <input type=”datetime-local”>
  • <input type=”hidden”>
  • <input type=”image”>
  • <input type=”month”>
  • <input type=”range”>
  • <input type=”search”>
  • <input type=”time”>
  • <input type=”url”>
  • <input type=”week”>

Membuat Form HTML – Element Textarea

Textarea merupakan element yang memiliki fungsi sama dengan element input dengan type=”text” yaitu menerima input berupa text, perbedaanya textarea dapat menerima lebih banyak karakter teks. Textarea biasa difungsikan untuk inputan berupa isian lengkap maupun komentar.

Untuk membuat element ini gunakan tag <textarea> … </textarea>. Ukuran textarea dapat dicustom dengan menambahkan atribut row dengan value berupa jumlah baris yang diinginkan, dan atribut cols untuk lebar textarea yang digunakan. Contoh membuat textarea dengan jumlah baris 5 dengan lebar textarea 50:

Membuat form HTML - text area

Selain cara di atas, dapat juga dengan menambahkan atribut style, contoh membuat textarea dengan lebar 300px dan tinggi 200px

Membuat Form HTML – Element Select

Element select berfungsi untuk membuat form dalam bentuk list dropdown. Penggunaan element form jenis ini biasa difungsikan untuk membuat form dengan banyak opsi atau pilihan, misalnya nama kota atau provinsi. Untuk membuat element select dibutuhkan tag <select> … </select>, sedangkan untuk menambahkan opsinya gunakan tag <option> … </option>. Contoh:

Membuat form HTML - select

Secara default, opsi yang muncul di form select adalah opsi pertama. Kita bisa menentukan opsi mana yang inign di tampilkan pada form select dengan menggunakan atribut selected. Misalnya opsi Pontianak ditampilkan pada form select, buat elementnya menjadi:

Menampilkan jumlah opsi yang muncul di form select dapat kita atur dari jumlah default 1 menjadi lebih dari satu. Gunakan atribut size untuk menggunakan fungsi ini. Contoh:

Di element select, kita juga dapat memilih lebih dari satu opsi atau disebut dengan multiple select dengan menambahkan atribut multiple pada element select seperti contoh berikut:

multiple select

Element Button

Sesuai namanya, element button digunakan untuk membuat tombol yang dapat diklik. Fungsinya tergantung dari atribut yang digunakan, bisa sumbit, reset, login, atau tombol yang mengarah ke halaman paling atas pada website. Biasanya element ini diintegrasikan dengan fungsi javascript untuk menciptakan perilaku dari button tersebut.

Untuk membuat element button gunakan tag <button> … </button>. Contoh membuat element button dengan type berupa submit:

Element button

Element Fieldset dan Legend

Element terakhir yang akan kita bahas adalah fieldset dan legend. Element <fieldset> berfungsi untuk mengelompokkan (grouping) element form sedangkan <legend> berfungsi menampilkan judul dari group form tersebut. Contoh mengelompokkan nama awal, akhir, dan alias kedalam group nama lengkap:

Element fieldset dan legend

Contoh Membuat Form dengan HTML

Sekarang kita coba gabungkan beberapa jenis form di atas sehingga menjadi satu buah form. Biar formulir kelihatan lebih rapi kita gunakan element <table> seperti contoh berikut ini:

Contoh membuat form HTML
5 1 vote
Article Rating
Subscribe
Notify of
guest
3 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
trackback
14 days ago

[…] Panduan Membuat Form di HTML […]

trackback
9 days ago

[…] Panduan Membuat Form di HTML […]

trackback
5 days ago

[…] Panduan Membuat Form di HTML […]