HTML Lanjut
Latihan Membuat Web Untuk Pemula

► List

     Untuk membangun sebuah form pada halaman web, guna mendapatkan masukan dari pengunjung web. Form dibentuk dengan menggunakan pasangan tag <form>. Atribut yang umum digunakan pada tag <form> adalah :
  1. ACTION : Menentukan lokasi dari script yang akan memproses data dari form.
  2. METHOD : Menentukan bagaimana data akan dikirim ke server, yaitu dengan dua cara sebagai berikut :
    • GET : membuat informasi dikirim menjadi satu dengan URL.
    • POST : membuat informasi dikirim secara terpisah dengan URL.
Saat kita membangun sebuah form kita dapat menggunakan berbagai jenis bentuk masukan atau inputan. Adapun macam macam komponen inputan yang dapat digunakan adalah :

  • Text
    Untuk membuat masukan berupa single line text.
Tabel atribut text
AtributKeteranganTampilan
NameMendefinisikan nama object dari text:
SizeJumlah karakter yang bisa ditampilkan
Type<input type="text">
ValueUntuk memberikan value ke input
MaxLengthMaksimum karakter yang bisa dimasukkan
  • Textarea
    Untuk membuat masukan berupa Multi line text. Tag yang digunakan <textarea> </textarea>.
Tabel atribut textarea
AtributKeteranganTampilan
NameMendefinisikan object dari textarea
RowsJumlah baris dari textarea
ColsLebar dari Textarea
  • Checkbox
    Sebuah bentuk inputan dimana tiap checkbox memiliki nama yang berbeda karena seorang pengunjung dapat memilih 1 atau lebih option atau pilihan.
Tabel atribut checkbox
AtributKeteranganTampilan
CheckedUntuk memberi default checkBus
Mobil
Sepeda motor
Sepeda
NameMendefinisikan nama object dari check box
Type<input type="checkbox">
ValueUntuk memberikan vaule ke input
  • Radio
    Sebuah bentuk inputan dimana tiap radio memiliki nama yang sama karena seorang pengunjung hanya dapat memilih 1 option atau pilihan.
Tabel atribut Radio
AtributKeteranganTampilan
CheckedUntuk memberi default checkBus
Mobil
Sepeda motor
Sepeda
NameMendefinisikan nama object dari radio
Type<input type="radio">
ValueUntuk memberikan vaule ke input
  • ComboBox / ListBox (selection)
    Taq <select>  </select> digunakan untuk membuat komponen ComboBox, sementara untuk pilihan dalam ComboBox menggunakan tag <option>  </option>
Tabel atribut ComboBox
AtributKeteranganTampilan
NamaMendefinisikan nama dari object select
SizeMenentukan jumlah baris yang akan ditampilkan
  • Button
    Untuk membuat sejumlah tombol yang akan menjalankan atau membatalkan sebuah form
Tabel atribut button
AtributKeteranganTampilan
NameMendefinisikan nama object dari button
Type<input type="button">
ValueUntuk memberikan value ke input

Untuk latihan ketikkan script berikut dan simpan dengan nama "pendaftaran.html"

<html>
   <head>
     <title>Pendaftaran</title>
   </head>

   <body>
     <p align="center">
       Form Pendaftaran
       <form action="daftar.php" method="post">
       <table align="center">
          <tr>
             <td>Nama </td>
             <td> : </td>
             <td> <input type="text"
                name="nama" /></td>
             </tr>
             <tr>
                <td>Alamat </td>
                <td> : </td>
                <td>
                   <textarea name="alamat"></textarea>
                </td>
             </tr>
             <tr>
                <td>Jenis Kelamin </td>
                <td> : </td>
                <td>
                   <input type="radio" name="kelamin"
                      value="1">Laki-Laki
                   <input type="radio" name="kelamin"
                      value="2">Perempuan
                </td>
             </tr>
             <tr>
                <td>Pekerjaan </td>
                <td> : </td>
                <td>
                   <select name="pekerjaan">
                      <option>Pelajar</option>
                      <option>Pegawai Negeri</option>
                      <option>Wiraswasta</option>
                   </select>
                </td>
             </tr>
             <tr>
                <td>Hobi </td>
                <td> : </td>
                <td>
                   <input type="checkbox" name="hobi"
                      value="1" />Sepakbola
                  <input type="checkbox" name="hobi"
                     value="2" />Basket
                  <input type="checkbox" name="hobi"
                     value="3" />Renang
               </td>
            </tr>
            <tr>
               <td></td>
               <td></td>
               <td>
                  <input type="submit" name="kirim"
                     value="Kirim" />
                  <input type="reset" name="reset"
                     value="Batal" />
               </td>
            </tr>
         </table>
      </p>
   </body>
</html>

Hasil dari script di atas :




<< Kembali





*.:。✿ Don't forget to come back again ✿.。.:*






Visit Wahyudi Blog !