Membuat Form dalam HTML

By | 3 October 2017

Untuk membuat form dalam html harus mengetahui elemen dan atribut pembentuk form. Elemen form terdiri atas form, input, select, textarea, button, label, fieldset, legend, optgroup, option, datalist, keygen, dan output. Elemen input memiliki beberapa tipe, diantaranya input type text, password, submit, reset, radio, checkbox, button,  color, date, datetime-local, email, month, number, range, search, tel, time, url, dan week. Sementara atribut dalam form terdiri atas atribut name, action, method, value, readonly, disabled, size, maxlength, autocomplete, autofocus, formaction, formenctype, formmethod, formnovalidate, formtarget, height dan width, list, min dan max, multiple, pattern (regexp), placeholder, required, dan step.

Berikut ini contoh pembuatan form dalam html:

<!DOCTYPE html>
<html>
<head>
<title>Formulir Pendaftaran</title>
</head>
<body>

<center><H2>CONTOH FORMULIR PENDAFTARAN</H2></center><br>
<PRE>
<form name="daftar" method="POST" Action="kirim.php">
Nama Lengkap    : <input type="text" size="25"><br>
Jenis Kelamin   : <input type="Radio" Name="sex" Value="Pria">Pria <input type="Radio" Name="sex" Value="Wanita">Wanita<br>
Agama           : <Select Name="Agama">
          <option value="kosong">-Silahkan Pilih-</option>
          <option value="Islam">Islam</option>
          <option value="Hindu">Hindu</option>
          <option value="Budha">Budha</option>
          <option value="Khatolik">Khatolik</option>
          <option value="Protestan">Protestan</option>
          </Select><br>
Hoby            : <Input Type="Checkbox" Name="Hoby" Value="Sepakbola">Sepakbola <Input Type="Checkbox" Name="Hoby" Value="Bola Voli">Bola Voli <Input Type="Checkbox" Name="Hoby" Value="Badminthon">Badminthon<br>
Komentar        : <Textarea name="komentar" rows="5" cols="25" wrap="Off"></textarea><br>
Password        : <Input type="Password" maxlength="15" name="password" size="15"><br>
<Input type="Reset" name="Reset" value="Batal"><Input type="Submit" name="sumbit" value="Kirim"><br>
*Catatan : Form ini belum bisa diproses karena membutuhkan script server side seperti php
</form>
</PRE>

</body>
</html>

Lihat hasilnya:

Formulir pendaftaran



Elemen Input

  • Text, ruang yang disediakan untuk pengunjung mengisi data. Contoh : <Input type=”Text” name=”nama” size-“25″ placeholder=”Ketik nama Anda”>
  • Password, tempat pengunjung mengetik password sehingga tulisan tidak ditampilkan tapi diganti dengan karakter *. Contoh : <Input type=”Password” maxlength=”10″ name=”password” size=”12″>
  • Submit, tombol yang berfungsi untuk mengirimkan data sesuai action pada form. Contoh : <Input type=”submit” name=”sumbit” value=”Kirim”>
  • Reset, tombol yang berfungsi untuk mengosongkan atau mereset data isian pada form. Contoh : <Input type=”reset” name=”reset” value=”Batal”>
  • Radio, memberikan pilihan dengan hanya dapat memilih salah satu pilihan. Contoh : <input type=”radio” name=”sex” value=”Pria” checked> Pria <input type=”radio” name=”sex” value=”Wanita”> Wanita
  • Checkbox, memberikan pilihan dengan dapat memilih lebih dari satu pilihan yang ada. Contoh :
    <Input Type=”Checkbox” Name=”Matapelajaran” Value=”TIK”>
    <Input Type=”Checkbox” Name=”Matapelajaran” Value=”Fisika”>
    <Input Type=”Checkbox” Name=”Matapelajaran” Value=”Kimia”>
  • Button, merupakan tombol yang dapat diklik dan akan mengeksekusi even yang diberikan padanya. Contoh: <input type=”button” onclick=”alert(‘Hello World!’)” value=”Click Me!”>
  • Color, merupakan input yang berisi warna. Tidak didukung browser Internet Explorer 11 dan safari 9.1 atau yang lebih lama. Contoh: <input type=”color” name=”favcolor” value=”#ff0000″>
  • Date, merupakan input yang berisi tanggal. Tidak didukung browser Firefox,  Internet Explorer 11 atau yang lebih lama. Contoh: <input type=”date” name=”bday”> atau <input type=”date” name=”bday” max=”1979-12-31″> atau <input type=”date” name=”bday” min=”2000-01-02″>
  • Datetime-local, merupakan input yang berisi tanggal yang diambil dari komputer lokal. Tidak didukung browser Firefox,  Internet Explorer 12 atau yang lebih lama. Contoh: <input type=”datetime-local” name=”bdaytime”>
  • Email, merupakan tipe input untuk isian email, kalau email tidak valid tidak dapat dproses. Tidak didukung di browser Safari dan Internet Explorer 9 atau yang lebih lama. Contoh: <input type=”email” name=”email”>
  • Month, merupakan tipe input untuk isian bulan dan tahun tapi tidak didukung di browser Firefox,  Internet Explorer 11 atau yang lebih lama. Contoh: <input type=”month” name=”bdaymonth”>
  • Number, merupakan tipe input untuk isian bilangan, tapi tidak didukung di browser Internet Explorer 9 atau yang lebih lama. Contoh: <input type=”number” name=”quantity” min=”1″ max=”5″>
  • Range, merupakan tipe input untuk isian bilangan dengan bantuan control slide dan dapat diset dengan atribut min, max dan step dengan default range 0-100. Tidak didukung di browser Internet Explorer 9 atau yang lebih lama. Contoh: <input type=”range” name=”points” min=”0″ max=”10″>
  • Time, merupakan tipe input untuk isian waktu dari waktu komputer lokal tapi tidak didukung di browser Firefox,  Internet Explorer 12 atau yang lebih lama. Contoh: <input type=”time” name=”usr_time”>
  • URL, merupakan tipe inputan untuk isian url, tidak didukung di Internet Explorer 9 atau yang lebih lama. Contoh: <input type=”url” name=”homepage”>
  • File, digunakan untuk mengirimkan/mengupload file. Contoh : <input type=”file” name=”file” value=”data”>
  • Hidden, data yang telah didefinisikan oleh pembuat web dan tidak terlihat dalam form tetapi dapat dikirimkan ke database. Contoh : <input type=”hidden” name=”rahasia” value=”penting”>

Elemen Select, elemen yang memungkin pengguna dapat memilih salah satu dari daftar pilihan yang ada. Contoh:

<select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

Elemen TextArea, ruang yang lebih luas disediakan untuk pengunjung mengisi data. Sintak : <Textarea name=”komentar” rows=”5″ cols=”4″ wrap=”Off”>Silahkan ketik komentar anda</textarea>, rows adalah jumlah baris, cols adalah jumlah kolom, wrap terdiri atas tiga pilihan yaitu Off (dimana tulisan terus berlanjut tanpa pindah baris), Hard (tulisan akan terpotong ketika sampai pada batas kanan dan pindah ke baris berikutnya, tapi data yang diterima melalui e-mail tidak akan terpotong), Soft ( tulisan akan terpotong ketika sampai pada batas kanan dan pindah ke baris berikutnya).

Elemen Datalist, menentukan daftar opsi yang telah ditentukan sebelumnya untuk elemen <input>. Pengguna akan melihat daftar drop-down dari pilihan yang telah ditentukan saat mereka memasukkan data. Atribut daftar elemen <input>, harus merujuk ke atribut id elemen <datalist>. Tidak didukung di browser Safari dan Internet Explorer 9 atau yang lebih lama. Contoh:

<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

Elemen Keygen, memberikan cara aman untuk mengotentikasi pengguna. Elemen <keygen> menentukan field generator kunci-pasangan dalam bentuk. Saat formulir diajukan, dua kunci dihasilkan, satu pribadi dan satu publik. Kunci pribadi disimpan secara lokal, dan kunci publik dikirim ke server. Kunci publik dapat digunakan untuk membuat sertifikat klien untuk mengotentikasi pengguna di masa mendatang. Contoh: Username: <input type=”text” name=”user”><br><br>Encryption: <keygen name=”security”>

Elemen Output, mewakili hasil perhitungan (seperti yang dilakukan oleh skrip). Contoh:

<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  0
  <input type="range" id="a" name="a" value="50">
  100 +
  <input type="number" id="b" name="b" value="50">
  =
  <output name="x" for="a b"></output>
  <br><br>
  <input type="submit">
</form>
<p><strong>Note:</strong> The output element is not supported in Edge 12 or Internet Explorer and earlier versions.</p>
</body>
</html>

Elemen Fieldset dan Legend, digunakan untuk membuat grup input dalam form dengan legend sebagai captionya. Contoh:

<fieldset>
  <legend>Personal information:</legend>
  First name:<br>
  <input type="text" name="firstname" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
  <br><br>
  <input type="submit" value="Submit">
</fieldset>

Atribut Elemen Form

  • Name, merupakan nama unik untuk elemen form dan input. Contoh: <form name=”form1″>…</form>
  • Action, merupakan pemroses pengiriman data dari form, bisa melalui e-mail misalnya cction=”mailto:intekcomnet@itc.net” atau melalui script server side misalnya dengan php action=”proses.php”.
  • Method, bagaimana data akan dikirimkan apakah melalui metode Post yaitu data langsung dikirim secara backend atau melalui metode Get dimana pada saat data dikirimkan akan terlihat di url browser.
  • Value, atribut untuk memberikan nilai awal pada inputan.
  • Readonly, atribut yang akan membuat inputan hanya dapat dibaca saja tidak dapat diubah.
  • Disabled, atribut yang akan membuat inputan disabled tidak dapat digunakan dan tidak dapat diklik juga nilai inputan tidak dapat dikirim saat data disubmit.
  • Size, untuk menentukan ukuran panjang inputan.
  • Maxlength, untuk menentukan batas maksimum data yang dapat diinput.
  • Autocomplete, memberikan opsi saran inputan dari data yang sudah disubmit pada browser tersebut. On untuk memberi saran dan Off jika tidak ingin memberi saran saat berikutnya mengisi data form. Contoh: <input type=”email” name=”email” autocomplete=”off”>
  • Autofocus, digunakan agar saat direload tetap fokus pada inputan.
  • Enctype, menentukan bagaimana data yang disubmit harus diencode berlaku khusus method post, terutama data inputan gambar. Contoh: <form enctype=”multipart/form-data”>
  • Placeholder, memberikan informasi tentang inputan. <input type=”text” name=”fname” placeholder=”First name”>
  • Required, memberikan informasi bahwa inputan harus diisi jadi tidak dapat diproses saat disubmit sebelum diisi. Contoh : <input type=”text” name=”usrname” required>
  • Step, menentukan inputan kelipatan untuk tipe bilangan. Contoh : <input type=”number” name=”points” step=”5″>

Demikianlah tutorial tentang cara membuat form dalam html.