Saturday, November 12, 2016

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

Silahkan berkomentar dengan sopan sesuai topik yang dibahas. Mohon tidak meninggalkan URL. Silahkan berkomentar dengan sopan serta sesuai topik dan dimohon untuk tidak meninggalkan link aktif.

Terima Kasih.

EmoticonEmoticon