Cara Membuat Form di HTML

Fungsi form secara umum banyak di gunakan untuk proses input ke database, dimana dapat menyimpan nilai-nilai yang di isi pengguna, selain itu form memungkinkan user dapat berkomunikasi dengan user lain, hal ini tetap di dasari komunikasi antara server dengan client biasanya di olah menggunakan bahasa pemrograman server-side entah itu php, phyton dan lain-lain, seperti kita jumpai pada situs jejaring sosial seperti facebook dan twitter semua berbasis form untuk pengolahan data mulai dari pendaftara, login, update dan lain-lain. Akan tetapi untuk disini kita hanya membahas membuat form di html yaitu sebatas interface saja, tidak untuk pengolahan data, karna hal itu nanti akan di bahas pada materi PHP.

Atribut Tag Form di HTML

Berikut ini adalah atribut-atribut yang biasa di gunakan untuk membuat form di html, tabel di bawah ini tidaklah lengkap, maka dari itu disarankan agar lebih banyak mencari informasi mengenai atribut-atribut setiap tag di html dan apabila masih kurang di pahami secara teori, cobalah praktekan agar kita tahu setiap proses yang terjadi.

Atribut Nilai Keterangan
accept Tipe file Untuk menentukan file apa saja yang di ijinkan untuk dapat di upload ke server.
action URL Untuk menentukan proses mengiriman data form ke server.
enctype application/x-www-form-urlencoded, multipart/form-data, text/plain Untuk menentukan bagaimana informasi form harus di encode oleh browser. Hanya berlaku untuk metode pengiriman tipe POST.
method get, post Menentukan metode pengiriman data
name text Menentukan nama form.

Dari atribut di atas seluruhnya dapat kita gunakan sesuai kebutuhan, misalnya penggunaan enctype, atribut ini kebanyakan di gunakan apabila didalam form menyediakan tipe file, dimana akan ada file yang di upload ke server, ingat! tanpa ada atribut enctype form file upload tidak akan bekerja sama sekali.

Contoh Cara Membuat Form di HTML

Sebenarnya tag form ini seperti melakukan grouping elemen di dalamnya untuk membuat form di html, maksudnya adalah apabila anda memasukan elemen form di dalam tag form maka setiap elemen form yang ada didalam tag form akan di proses selama elemen tersebut berada di dalamnya, dan sebaliknya, elemen form tidak akan dapat bekerja untuk mengirimkan data ke server apabila tidak menggunakan tag form, berikut contoh penulisan untuk membuat form di html.

<form method="POST" action="URL" name="FORM">
    .....
</form>

Perhatian metode pengiriman, di tabel atas terdapat dua tipe methode pengiriman, yaitu POST dan GET, lalu apa bedanya POST dan GET? perbedaan method POST dan method GET adalah terletak pada proses pengirman data dimana pada mengambilan variabel yang terdapat pada form dengan metode POST tidak akan terlihat di proses, sedangkan jika GET apabila proses pengiriman dilakukan maka nilai dari variabel form akan ditampilan pada URL di browser.

Baca juga:  Membuat Garis Horizontal di HTML

Macam-macam Elemen Tag Form di HTML

Setelah kita mengenal seluruhnya tentang tag form di html, sekarang saatnya mengenal macam-macam tag form di html. Berikut ini daftar macam-macam tag form di html.

Tag Tipe Keterangan
<textarea> Textarea digunakan untuk menangani input text yang membutuhkan banyak karakter di tulis didalamnya, layaknya seperti text editor.
<select> Tag select biasanya untuk menangani inputan yang nilainya sudah tersedia dan hanya boleh memilih satu nilai.
<input> text Biasanya digunakan untuk menangani text hanya jumlahnya tidak banyak.
checkbox Digunakan untuk menangani input yang sudah tersedia nilainya dan dapat memilih lebih dari satu pilihan
radio Digunakan untuk menangani input yang sudah tersedia nilainya dapat hanya dapat memilih satu saja, dimana untuk grouping elemen ini melalui atribut name yang berisi nilai sama.
hidden Digunakan untuk menangani input yang tidak ingin ditampilkan di browser.
submit Untuk menampilkan tombol, yang akan berfungsi menjalankan proses form.
button Untuk menampilkan tombol, yang akan berfungsi menjalankan proses form bedanya dengan submit harus ada bahasa pihak ketiga untuk dapat melakukan proses input data, misalnya javascript.
file Digunakan untuk melakukan proses upload data yang akan dikirim ke server.

Penulisan Elemen Tag Form di HTML

Setelah kita mengenali apa saja macam-macam tag form di html, maka sekarang mulai untuk membuat form di html sesuai dengan yang tertera di tabel atas.

Membuat Textarea di HTML

Textarea biasanya digunakan untuk pengolahan teks yang jumlahnya lebih banyak, sehingga memudahkan user dalam menginput data teks, berikut ini contoh penulisan textarea di html.

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Form Textarea di HTML</title>
</head>
<body>
    <h1>Contoh textarea</h1>
    <textarea>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>
</body>
</html>

Dari kode html diatas maka akan tampil seperti gambar dibawah ini.

Baca juga:  Cara Membuat Link di HTML

Cara membuat Form di HTML

Seperti gambar diatas, textarea menyimpan isi teks didalamnya sebagai elemen tag tidak menggunakan atribut value untuk menentukan isi teks tersebut, dan kalau diperhatikan, ukuran textarea diatas tidak ideal karena terlalu kecil dan untuk memperbesarnya tambahkan atribut cols dan atribut rows, seperti contoh dibawah ini.

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Form Textarea di HTML</title>
</head>
<body>
    <h1>Contoh textarea</h1>
    <textarea cols="70" rows="10">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>
</body>
</html>

Maka kurang lebih akan tampil seperti gambar di bawah ini.

Cara Membuat Form di HTML

Membuat Select di HTML

Tag select adalah sebuah tag yang nilainya sudah tersedia, dan hanya dapat memilih satu nilai diantara banyak nilai yang tersedia, nilai-nilai tag select tersebut tersimpan di tag <option></option> dimana nilai tersebut bisa berupa elemen dari tag option atau dimasukan ke dalam atribut value di tag option, contoh penggunaan tag select.

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Form Select di HTML</title>
</head>
<body>
    <h1>Contoh Select</h1>
    <select>
    	<option>Nilai 1</option>
    	<option>Nilai 2</option>
    	<option>Nilai 3</option>
    </select>
</body>
</html>

Dari kode di atas maka akan tampil seperti di bawah ini.

Cara Membuat Form di HTML

Seperti yang sudah dikatakan bahwa nilai dari tag select adalah elemen tag option yang, tetapi apabila tag option memiliki atribut value maka nilai berada di value, atribut value ini tidak tampil di browser, dan elemen tag option hanya akan menjadi placeholder atau teks biasa, contoh penggunaan atribut value.

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Form Select di HTML</title>
</head>
<body>
    <h1>Contoh Select</h1>
    <select>
    	<option value="Nilai 1">Nilai 1</option>
    	<option value="Nilai 2">Nilai 2</option>
    	<option value="Nilai 3">Nilai 3</option>
    </select>
</body>
</html>

Membuat Input Elemen di HTML

Tag input umumnya yang paling banyak di gunakan dalam membuat form di html dan yang memiliki tipe paling banyak diantara tag form yang lainnya, bentuk-bentuk tag input hanya dibedakan melalui atribut type untuk menentukan input seperti apa yang ingin di tampilkan dan atribut input ini adalah salah satu tag tunggu dimana penulisannya tidak membutuhkan tag penutup, seluruh tag input biasanya menampung nilai tag tersebut di dalam atribut value.

Baca juga:  Pengenalan HTML

Dalam proses php ketika nilai-nilai dari elemen form ini di olah, seluruh nilai di tangkap melalui atribut name pada setiap tag, atribut name ini seperti variabel, tetapi untuk pembahasan kali ini kita hanya mengulas tentang interface saja, tidak untuk prosesnya, contoh penggunaan tag name.

<input type="text" name="username" value="bahasaweb">

Dari tag input di atas terlihat bahwa nama dari tag tersebut adalah username dan memiliki nilai “bahasaweb”, sehingga yang akan di tangkap oleh kode php dengan metode get atau post adalah kurang lebih seperti variabel “username” bernilai “bahasaweb”, contoh lengkap penulisan form input.

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Form Input di HTML</title>
</head>
<body>
    <h3>Input Text</h3>
    <input type="text" value="Ini adalah nilai input teks">
    <h3>Input Password</h3>
    <input type="text" value="Password">
    <h3>Input Checkbox</h3>
    <input type="checkbox" value="Nilai checkbox"> Checkbox 1
    <input type="checkbox" value="Nilai checkbox"> Checkbox 2
    <input type="checkbox" value="Nilai checkbox"> Checkbox 3
    <h3>Input Checkbox</h3>
    <input type="radio" value="Nilai radio"> Radio 1
    <input type="radio" value="Nilai radio"> Radio 2
    <input type="radio" value="Nilai radio"> Radio 3
    <h3>Input Submit</h3>
    <input type="submit" value="Tombol input submit">
    <h3>Input File</h3>
    <input type="file">
</body>
</html>

Contoh kode html di atas kurang lebih akan tampil seperti gambar di bawah ini.

Cara Membuat Form di HTML

Contoh form Lengkap

Berikut ini adalah contoh lengkap yang bisa di gunakan untuk membuat form di html yaitu pengisian formulir buku tamu, tidak ada proses php di dalamnya, hanya sebatas interface saja.

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Form Lengkap di HTML</title>
</head>
<body>
    <h1>Buku Tamu</h1>
    <form name="bukutamu" method="POST">
        <p>
            <label>Nama</label>
            <input type="text" name="nama" value="Bahasaweb.com">
        </p>
        <p>
            <label>Email</label>
            <input type="email" name="contoh@bahasaweb.com">
        </p>
        <p>
            <label>Pesan</label>
            <textarea cols="50" rows="5">Ini adalah contoh pesan dalam buku tamu</textarea>
        </p>
        <p>
            <input type="submit" value="Kirim">
        </p>
    </form>
</body>
</html>

Berikut ini adalah tampilan dari kode form buku tamu di atas.

Cara Membuat Form di HTML

Dari contoh sederhana diatas silahkan berkreasi sesuai dengan ke inginan sehingga dapat menciptakan form-form yang lengkap sesuai kebutuhan.

  • Bang, bisa gak kode diatas di manipulasi misalnya di manipulasi ke feedburger (google) .
    Saya rencana mau buat form (blogger) tapi jika sudah terdaftar otomatis berlangganan via email (feedburner) .
    Kalau bisa tolong jelasin caranya .
    Saya juga sementara acak-acak kode diatas .

    Ohiya, terima kasih sudah berbagi info bang. hehehe

  • Terima kasih sebelumnya sudah membagikan artikel yang bermanfaat seperti ini.
    Bang Aris , saya mau tanya.

    1. apakah dalam satu tag bisa dipasang dua tipe yang berbeda misal hidden dan email ?

    2. Seperti yang Bang Aris jelaskan diatas bahwa input atribut dari ‘action’ merupakan output untuk mengirim data ke server. Yang saya mau tanyakan apakah bisa jika input dari ‘action’ memiliki 2 jenis output yang berbeda. Misalnya ke server dan email .

    Terima kasih

    • Terima kasih kembali, senang bisa membantu.

      1. tidak bisa, harus satu tipe saja.
      2. proses tersebut bisa dijalankan di php, ketika action di eksekusi.

      Sama-sama, semoga jawaban ini dapat membantu.