Home HTML Memahami Pembuatan Form

Memahami Pembuatan Form

Form adalah sebuah metode yang digunakan dalam website yang mengizinkan seorang pengujung untuk dapat berinteraksi dengan server ataupun dengan pengelola website tersebut. Dengan adanya proses interaksi tersebut, maka pengguna akan mendapatkan beberapa kemudahan yang diberikan pada portal/website tersebut. Untuk dapat membuat form anda membutuhkan tag <form> yang nantinya memudahkan anda dalam pembuatan form, dengan bantuan tag <form> nantinya anda akan dapat membuat interaksi dengan seorang pengunjung website anda.
Penjelasan dari tag
Tag
Keterangan
<Form>
Digunakan untuk mendeklarasikan awalan tag form
<Input>
Digunakan untuk memasukan komponen formulir
atribut yang ada didalam tag Form
Atribut
Keterangan
Action
Digunakan untuk menentukan alamat dimana data dari komponen form akan dikirim.
Method
Digunakan untuk membedakan metode pengiriman data
atribut pada method
Nilai Pada Atribut Method
Keterangan
GET
Pengiriman data kedalam halaman lain yang tidak berhubungan dengan halaman selanjutnya
POST
Melakukan pengiriman data pada halaman lain yang selanjutnya dapat diproses menuju halaman berikutnya.


Berikut contoh Script umum pembuatan sebuah form.
 <form action=”alamat webpage lain” method=”GET/POST” name=”nama form” > 
      <input>
           .....................
      </input> 
 </form>


Komponen yang dibutuhkan didalam form.

Tag
Keterangan
Script
TextField
Untuk memasukan data berupateks karakter
<input type="text" name="nama text" size="ukuran" maxlength="panjang karakter">
Password
Untuk sebuah kata sandi yang biasanya karakternya dirahasiakan
<input type="password" name="nama text" size="ukuran" maxlength="panjang karakter">
Radio Button
Button Untuk membuat opsi pertanyaan
<input type="radio" value="nama radio">isinya
Checkbox
Untuk membuat pilihan berganda
<input type="checkbox" value="nama checkbox">isinya
List Menu
Untuk membuat pilihan dengan beberapa daftar
<select name="nama menu"><option value="nilai opsi">isinya</option></select>
TextArea
Digunakan untuk komentar atau pertanyaan
<textarea name="nama textarea" cols="nilai" rows="nilai"></textarea>
File Field
Digunakan untuk membedakan metode pengiriman data
<input type="file" name="nama file" size="ukuran">
SUBMIT /RESET / BUTTON
Digunakanuntuk melakukan perintah eksekusi
<input type="submit | reset | button" value="nama tombol">
 


<html>
 <head>
  <title> Belajar Form </title>
 </head>
 <body>
  <!--Belajar Buat Form-->
  <h1>MENDAFTAR</h1>
  GRATIS. Sampai Kapan Pun
  <form>
   <table>
   <tr>
    <td><label>Nama</label></td>
    <td><input type="text" name="ndepan" id="ndepan" size="20" placeholder="Nama Depan" />
    <input type="text" name="nbelakang" id="nbelakang" size="20" placeholder="Nama Belakang" /></td>
   </tr>
   <tr>
    <td><label>Email</label></td>
    <td><input type="text" name="email" id="email" size="44" placeholder="Masukan Email" /></td>
   </tr>
   <tr>
    <td><label>Masukan Lagi Email</label></td>
    <td><input type="text" name="email" id="email" size="44" placeholder="Konfirmasi Email" /></td>
   </tr>
    <td><label>Masukan Kata Sandi</label></td>
    <td><input type="password" name="password" id="password" size="44" placeholder="Masukan Kata Sandi" /></td>
   <tr>
    <td><label>Konfirmasi Kata Sandi</label></td>
    <td><input type="password" name="password" id="password" size="44" placeholder="Masukan Ulang Kata Sandi" /></td>
   </tr>
   <tr>
    <td><label>Tanggal Lahir</label></td>
    <td coulspan="3"><select name="tgllahir" id="tgllahir">
    <option value="">Tanggal</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    </select>
   
    <select name="Blnlahir" id="Blnlahir">
    <option value="">Bulan</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    </select>
 
    <select name="Thnlahir" id="Thnlahir">
    <option value="">Tahun</option>
    <option value="1993">1993</option>
    <option value="1994">1994</option>
    <option value="1995">1995</option>
    <option value="1996">1996</option>
    <option value="1997">1997</option></td>
    </select>
   
   <tr>
    <td><label>Jenis Kelamin</label></td>
    <td><input type="radio" name="jk" id="Laki-laki" value="Laki-Laki" />Laki-Laki
    <input type="radio" name="jk" id="Perempuan" value="Perempuan" />Perempuan</td>
   </tr>
   <tr>
    <td><label>Hobi</label></td>
    <td><input type="checkbox" name="hobi" value="Olahraga"/>Olahraga
    <input type="checkbox" name="hobi" value="Membaca"/>Membaca
    <input type="checkbox" name="hobi" value="Menulis"/>Menulis</td>
   </tr>
   <tr>
    <td><label>Komentar</label><br/>
    <textarea name="komentar" cols="40" rows="5"></textarea></td>
   </tr>
   <tr>
    
    <td><input type="submit" name="submit" value="Mendaftar" /></td>
   </tr>
  </table>
  </form>
 </body>

</html>


Hasilnya sebagai berikut




[full_width]
Memahami Pembuatan Form Memahami Pembuatan Form Reviewed by semutwifi on 8/31/2016 Rating: 5

No comments:

Komentarlah sesuai judul postingan

Subscribe to: Post Comments ( Atom )
Powered by Blogger.