Kod Cara Membuat Borang

Blog ini diselenggara oleh Iliyas Mohamed Razali . URL Blog ini adalah https://websitecodehtml.blogspot.com. juga BajaDigrow.com 

Borang HTML

Form atau borang adalah teknik yang paling kepada webmaster untuk mendapatkan info atau maklumat daripada pelayar seperti nama, alamat ataupun nombor kredit kad. Borang terdiri daripada beberapa jenis bergantung kepada keperluan webmaster dan juga anda boleh menyimpan data-data dari borang ini dalam bentuk fail ataupun database.

Text Fields

Sebelum anda belajar untuk membuat borang yang sempurna, anda mestilah belajar daripada asas, Input yang paling asas kita akan gunakan ialah Text Field. Tag yang akan kita gunakan untuk membuat form adalah <form> dan tag bagi memasukan jenis data adalah <input>. Tag <input> mempunyai beberapa attribute iaitu:

• type - menentukan jenis input.
• name - nama bagi input. Sangat penting untuk rujukan.
• size - Saiz bagi input.
• maxlength - Menentukan had maksimum bagi jumlah huruf yang boleh dimasukkan.

HTML Code:

<form method="post" action="mailto:youremail@email.com">
Nama: <input type="text" size="10" maxlength="40" name="name">
<br />
Kata Kunci: <input type="password" size="10" maxlength="10" name="password">
</form>

Borang kemasukan:

Nama: 
Kata Kunci:  

HTML Form Email

Sekarang kita akan belajar borang yang paling mudah, iaitu menghantar email menggunakan borang. Kebiasaanya butang adalah input yang paling terakhir didalam borang anda dan nilai bagi attribute name disetkan sebagai Hantar. Attribute Name adalah nilai paparan bagi label butang tersebut.

Untuk menambahkan butang Hantar, pertama sekali kita mestilah menambahkan 2 attribute ke dalam tag <form> iaitu

• method -Terdapat dua jenis method iaitu POST dan GET. Kebiasaanya kita akan menggunakan method POST.
• action - Menentukan alamat atau lokasi padi data-data didalam form dihantar.

HTML Code:

<form method="post" action="mailto:youremail@email.com">
  Nama: <input type="text" size="10" maxlength="40" name="name">
  <br />
  Kata Kunci:
  <input type="password" size="10" maxlength="10" name="password"><br />
  <input type="submit" value="Hantar">
</form>

Borang email:

Nama: 
Kata Kunci: 

Cuma ubahkan alamat email anda, dan koding untuk menghantar email menggunakan borang selesai.

Butang Radio

Butang jenis Radio adalah bentuk yang popular untuk membuat pilihan. Anda bleh menggunakannya untuk membuat kuiz atau pun soalanner aneka jawapan.Dibawah ini adalah senari attribute yang berkaitan dengan butang Radio.

• value - nilai yang akan dihantar oleh butang radio
• name - mensetkan nama bagi butang radio.

HTML Code:

<form method="post" action="mailto:youremail@email.com">
Hobi anda?
<br />
Memancing:
  <input type="radio" name="memancing" value="Laut"> Laut
  <input type="radio" name="memancing" value="Parit"> Parit
<br />
Membaca:
  <input type="radio" name="membaca" value="Kartun"> Kartun
  <input type="radio" name="membaca" value="Majalah"> Majalah
  <input type="radio" name="membaca" value="komik">Komik
  <br>
  <input type="submit" value="Hantar Email">
</form>

Radios:

Hobi anda?
Memancing:  Laut  Parit
Membaca:  Kartun  Majalah  Komik

Jika anda mengantikan alamat email kepada alamat email anda, anda akan mendapat email yang bertulis "Memancing=(pilihan) Membaca=(pilihan)"

Kotak Tandaan

Checkbox atau kotak tandaan membenarkan pengguna memilih lebih dari satu pilihan. name dan value attrubute bagi checkbox adalah sama dengan radio

HTML Code:

<form method="post" action="mailto:youremail@email.com">
  Minuman Kegemaran saya
  <input type="checkbox" name="teh" value="teh"> Teh O 
  <input type="checkbox" name="kopi" value="kopi"> Kopi
  <input type="checkbox" name="kosong" value="kosong"> Air Kosong
  <input type="checkbox" name="orange" value="orange"> Fresh Orange
  <input type="submit" value="Hantar">
</form>

Hasil:

Minuman Kegemaran saya
 Teh O Beng
 Kopi
 Air Kosong
 Fresh Orange

Senarai Menu Jatuh (Drop Down List)

Drop down adalah satu teknik pilihan yang hampir sama dengan radio tetapi ia dalam bentuk dropdown. Tag bagi dropdown adalah <select> dan </select>. Manakala bagi membuat senarai dalam dropdown, anda boleh menggunakan tag <option> dan </option>.

 

HTML Code:

<form method="post" action="mailto:youremail@email.com">
Pelajaran?<select name="sekolah">
<option>Pilih _cke_saved_name="sekolah">
<option>Pilih _cke_saved_name="sekolah">
<option>Pilih _cke_saved_name="sekolah">
<option>Pilih _cke_saved_name="sekolah">
<option>Pilih Satu</option>
<option>Sekolah Rendah</option>
<option>Sekolah Menengah</option>
<option>Kolej</option>
<option>Universiti</option>
<option>PhD</option>
<input type="submit" value="Hantar">
</select>
</form>

 

Drop Down Lists:

Pelajaran?
Pilih SatuSekolah RendahSekolah MenengahKolejUniversitiPhD

 

Borang Pilihan (Selection Form)

Pengguna dapat membuat pelbagai pilihan dengan menggunakan Selection From, fungsinya hampir sama dengan checkbox tetapi dalam Selection Form, user perlu menggunakan Shift untuk membuat banyak pilihan.

HTML Code:

<form method="post" action="mailto:youremail@email.com">
  Muzik Kegemaran Anda
  <br />
  <select multiple name="music" _cke_saved_name="music" _cke_saved_name="music" _cke_saved_name="music" _cke_saved_name="music" size="4">
    <option value="emo" selected>Emo</option>
    <option value="metal/rock" >Metal/Rock</option>
    <option value="hiphop" >Hip Hop</option>
    <option value="ska" >Ska</option>
    <option value="jazz" >Jazz</option>
    <option value="country" >Country</option>
    <option value="classical" >Classical</option>
    <option value="alternative" >Alternative</option>
    <option value="oldies" >Oldies</option>
    <option value="techno" >Techno</option>
  </select>
  <br />
  <input type="submit" value="Hantar">
</form>

Selection Forms:

Muzik Kegemaran Anda
EmoMetal/RockHip HopSkaJazzCountryClassicalAlternativeOldiesTechno

 

Borang Muat Naik (Upload Form)

Upload Form digunakan oleh pengguna untuk menhantar file ke server tanpa peru mengetahui kata kunci kepada web server anda. Namun, untuk membolehkan form ini digunakan, anda perlula menggunakan PHP,Perl,ASP ataupun JavaScript. Anda hanya perlu meletakkan type="file" menggunakan form jenis ini.

HTML Code:

<input type="hidden" name="MAX_FILE_SIZE" _cke_saved_name="MAX_FILE_SIZE" _cke_saved_name="MAX_FILE_SIZE" _cke_saved_name="MAX_FILE_SIZE" _cke_saved_name="MAX_FILE_SIZE" value="100" />
<input name="file" type="file" />

 

Upload Form:

Text Areas

Text Area biasanya digunakan untuk menghantar komen atau penerangan yang panjang. Tag bagi memgunakan Text area ialah <textarea> ... </textarea>.

Text area mempunyai 2 attribute yang penting iaitu laju dan baris. Anda boleh menentukan saiz text area anda dengan menggunakan attribute rows dan column.

Terdapat satu lagi attibute yang menentukan bagaimana perenggan dibuat. Kita menggunakan attibute wrap. Warp 3 nilai iaitu :

• wrap=
  • "off"
  • "virtual"
  • "physical"
• Virtual hanya pelayar yang menulis akan dapat melihat perenggan diwarpkan semasa dia menulis.
• Physical Text area disimpan dalma bentuk wrap
• Off Matikan wrapContoh dibawah menggunakan text area yang mempunyai 5 baris dan 20 lajur.

HTML Code:

<form method="post" action="mailto:youremail@email.com">
  <textarea rows="5" cols="20" wrap="physical" name="comments">
  Letakkan Komen anda
  </textarea>
  <input type="submit" value="Hantar">
</form>

Text Area: