-->
Riedayme Pengetahuan untuk Mempelajari Pemrograman khususnya pada Website, Mobile dan Desktop saya tuliskan disini.
Riedayme
Riedayme

Belajar HTML - Membuat Form


form digunakan untuk melakukan proses terhadap data,

fungsi form dalam halaman website berperan penting misalnya form pencarian digunakan untuk mencari data atau bisa juga form registrasi digunakan untuk pendaftaran.

Diawali dengan tag form

untuk membuat form maka anda harus menuliskan tag html seperti dibawah ini :
<form>
</form>

kode form diatas bertujuan untuk mengidentifikasi kalau ada sebuah form pada halaman tersebut, setelah itu anda harus mengisikan atribut untuk tag form tersebut mau diproses kemana dan memakai method apa ?

memahami atribut utama form

oke mari kita bahas satu persatu atribut yang ada pada form

atribut action

atribut action digunakan menentukan alamat yang akan dituju untuk melakukan pengiriman data, data yang dikirim kealamat tersebut nantinya akan diproses.

contoh penulisan atribut action :
<form action="https://kurteyki.com/login">
</form>

dari kode diatas saya memberikan nilai pada atribut action ke alamat https://kurteyki.com/login. maka data yang ada pada form tersebut akan dikirim kelamat https://kurteyki.com/login untuk diproses

atribut method

atribut method ini berfungsi sebagai jenis pengiriman data yang dilakukan, ada 2 jenis nilai yang bisa digunakan pada atribut method ini yaitu GET dan POST. method GET mengirim data melalui url sedangkan method POST mengirim data tanpa melalui url.

dari kedua jenis method diatas memiliki kelebihan dan kekurangannya masing masing. saya tidak akan membahasnya ditulisan ini yang penting adalah fungsinya yaitu memilih jenis pengiriman data dari sebuah form.

contoh penulisan method GET
<form method="GET">
</form>

contoh penulisan method POST
<form method="POST">
</form>

selesai sudah membahas atribut yang ada pada tag form, maka sekarang dilanjut dengan mengetahui jenis inputan yang bisa digunakan.

Jenis Form yang bisa digunakan

tag html yang digunakan untuk membuat form ada berbagai macam, diantaranya :
  • input
  • select
  • textarea

atribut yang harus ada pada setiap jenis form

sebelum menjelaskan lebih rinci dari 3 jenis form diatas saya akan bahas atribut yang harus ada pada setiap jenis form yaitu atribut name.

atribut name ini berfungsi untuk menangkap data pada form nantinya. jadi pastikan disetiap jenis form yang dibuat harus ada atribut name ini agar datanya bisa diproses.

form input

form jenis ini adalah form yang sering digunakan karena memiliki banyak type. lihat table dibawah ini untuk tipe dan fungsinya :

Type Fungsi
text memasukan semua jenis text
password memasukan text yang hasilnya disensor
radio membuat inputan dengan jenis pilihan
checkbox membuat inputan dengan jenis ceklis
file membuat inputan berbentuk file
submit membuat input menjadi tombol submit
reset membuat inputan menjadi tombol reset
button membuat inputan menjadi tombol saja

contoh input type text
<input type="text" name="text">

hasil dari kode diatas


form select

jenis form select ini digunakan untuk memilih data yang sudah ada dengan tampilan daftar, untuk penulisannya adalah sebagai berikut :
<select name="perusahaan">
 <optgroup label="luar negri">
  <option>microsoft</option>
  <option>apple</option>
  <option>facebook</option>
  <option>google</option> 
 </optgroup>
 <optgroup label="dalam negri">
  <option>tokopedia</option>
  <option>gojek</option>
  <option>bukalapak</option>
 </optgroup>
</select>

dari kode diatas ada 3 jenis tag html yang digunakan yaitu select,optgroup, dan option.

tag select
berfungsi sebagai identifikasi

tag optgroup
berfungsi untuk melakukan grup terhadap data yang ada

tag option
berfungsi untuk menaruh daftar data yang akan dimasukan

hasil dari kode diatas


form textarea

jenis form ini biasanya digunakan untuk memasukan karakter yang panjang. tampilan dari jenis form ini adalah bentuknya lebih besar dari form input jenis biasa dan form jenis textarea ini bisa menulis text kebawah.

untuk kode penulisannya adalah seperti ini :
<textarea name="artikel" cols="20" rows="5"></textarea>

dari kode diatas saya memberikan atribut cols dan rows.

atribut cols
berfungsi untuk mengatur jarak kesamping

atribut rows
berfungsi untuk mengatur jarak kebawah

hasil dari kode diatas


cara membuat grup pada form

dengan menggunakan tag <fieldset></fieldset> dan <legend></legend> anda dapat membuat grup terhadap form yang ada, contoh kode penulisan form yang digrup.

<form>
 <fieldset>
  <legend>Formulir data diri :</legend>
  <label>nama lengkap :</label><br/>
  <input type="text" name="nama"><br/>
  <label>nama panggilan :</label><br/>
  <input type="text" name="nama">
  <br/><br/>
  <input type="submit" name="kirim">  
 </fieldset>
</form>

hasil dari kode diatas

Formulir data diri :





0 Komentar
HTML

Artikel Terkait

Komentar