Elemen form html



Advertisement


Form HTML digunakan untuk memilih pelbagai macam inputan yang disediakan.  Data bisa diinputan dalam bentuk input teks , pilihan radio button, check box dan lain sebagainya. Bentuk inputan tersebut dikemas elemen dalam tag-tag form. Berikut adalah elemen-elemen yang disediakan oleh html




Tag
Deskripsi
Format umum tag
Mendefinisikan untuk form bagi user
<form>
</form>
Mendefinisikan kontrol input pada form
<form>
    <input type="submit" value="Submit">
</form>
Mendefinisikan kontrol input berupa area teks pada form
<textarea rows="4" cols="50">
      teks yang akanditampilkan
</textarea>
Mendefinisikan  label pada tag elemen <input>
<form action="demo_form.asp">
  <label for="buku">Buku</label>
  <input type="radio" name="barang" id="buku" value="buku"><br>
  </form>
Group  dengan element yang berhubungan satu sama lain didalam form
<form>
  <fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text"><br>
    Email: <input type="text"><br>
    Date of birth: <input type="text">
  </fieldset>
</form
Mendefinisikan judul untuk elemen <fieldset>
  <fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text"><br>
    Email: <input type="text"><br>
    Date of birth: <input type="text">
  </fieldset>
</form
Merupakan daftar secara drop-down
<select>
  <option value="volvo">Volvo</option>
   <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select
Mendefinisikan  group options yang berhubungan satu sama lain dalam bentuk drop-down list, merupakan bagian dari tag elemen <select>
<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>
mendefinisikan option pilihan dalam bentuk drop-down list, merupakan bagian dari tag elemen <select>
<select>
  <option value="volvo">Volvo</option>
   <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select
Merupakan tombol yang dapat diklik
<button type="button">Klik disini!</button>
<datalist> à elemen baru di html5
Daftar/list khusus yang didefinisikan dalam elemen tag <input>
<input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
<keygen> à elemen baru di html5
Merupakan  generator key-pair field untuk form
<form action="demo_keygen.asp" method="get">
  Username: <input type="text" name="usr_name">
  Encryption: <keygen name="security">
  <input type="submit">
</form>
<output> à elemen baru di html5
Merupakan hasil dari suatu perhitungan
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
  <input type="range" id="a" value="50">100
  +<input type="number" id="b" value="50">
  =<output name="x" for="a b"></output>
</form>




    Contoh form sederhana

Berikut ini adalah contoh dari sebuah halaman web yang berisi form yang sederhana : 

<html>

<head>

   <title> Form 1 </title>

</head>

<body>

<form name=”form1” method=”POST” action=”inputdata.php”>

     Nama : <input type="text" name="nama"> <br><br>

     Kelas: <input type="text" name="kelas" maxlength="2"> <br><br>

     No   : <input type="text" name="nomor" value="10"> <br><br>

     Hobby: <input type="text" name="hobby" size="8"> <br><br>

     Password: <input type="password" name="password">

<br><br>

<input type="submit" name="submit" value="Submit">&nbsp;&nbsp;&nbsp;<input type="reset" name="reset" value="Reset">    

</form>

</body>

</html>

Apabila dibuka di dalam browser, maka tampilan dari susunan kode HTML di atas adalah sebagai berikut :


Apabila tombol “Submit” diklik, maka semua nilai yang sudah diinputkan oleh pengguna akan di olah di dalam file PHP “inputdata.php”.


Artikel Terkait