--> Belajar HTML (Part 7): Membuat Form HTML
Home Belajar HTML

tutorial belajar HTML

SeniKoding.com - Form adalah lembar pengisian atau daftar pengisian data. Daftar pengisian ini biasanya untuk meminta data informasi dari user untuk kemudian disimpan. Selelah data disimpan biasannya data tersebut akan diolah lebih lanjut sesuai kebutuhan. Umumnya pengolahan form dilakukan pada server dengan menggunakan script yang bersifat server-side. Bahasa Pemrogramman yang bersifat server-side adalah seperti : PHP, Phyton, ASP.Net dan lain-lain.


Form sering digunakan didalam website. Contoh saja: Pendaftaran Akun, Form Login, Form pengajuan pinjaman, Form pesan dan masih banyak lagi.
Membuat Form HTML sangat penting, karena besarnya manfaat yang dapat digunakan. Sehingga sangat tepat jika kita bisa membuat form HTML didalam halaman website.

Tutorial Belajar HTML Membuat Form HTML


Tag HTML yang sering digunakan dalam membuat Form adalah:

  • Tag <form>: digunakan untuk pendefinisian awal pembuatan form.
  • <input>: digunakan untuk membuat suatu inputan data. Biasanya jumlah huruf dari data "input" yang dipakai berkisar 1- 255 huruf, seperti inputan nama, alamat dan liannya.
  • <textarea>: digunakan untuk membuat suatu inputan data seperti tag <input>, tetapi untuk <textarea> besaran huruf/angka yang dipakai bisa lebih banyak. Seperti inputan pesan, yang bisa membutuhkan ratusan bahkan ribuan suku kata.
  • <select>: digunakan untuk inputan pilihan data yang sudah diatur oleh membuat program. Seperti pilihan data Agama, tanggal lahir.
  • <option>: Tag ini berpasangan dengan tag <select> untuk membuat list inputannya,

Dan Atribut HTML dan Valuenya yang sering digunakan untuk melengkapi membuat Form HTML:

  • <form name=""> digunakan untuk memberikan nama form.
  • <form classs=""> digunakan untuk menghubungkan dengan file CSS yaitu nama class.
  • <form action=""> digunakan untuk menghubungkan dengan script pemprosesan inputan data. Nilai atribut action bersifat server-side yang dapat menghubungkan ke database.
  • <form method=""> digunakan untuk memberikan cara request bagaimana proses data tersebut akan diolah. Nilainya bisa berupa "GET/POST".
  • <input type=""> digunakan untuk membuat jenis inputan yang dibuat. Jenis atau valuenya bisa berupa: text, email, number, checkbox, radio button, submit, reset.
  • <input name=""> digunakan untuk memberikan nama pada inputan tersebut.
  • <textarea name=""> digunakan untuk memberikan nama pada textarea.
  • <select name=""> digunakan untuk memberikan nama pada inputan select.
  • <option value=""> digunakan untuk memberikan "nilai" yang ada dalam tag <option>. 

Contoh membuat Form HTML :

<!DOCTYPE html>
<html>
  <head>
    <title>latihan membuat form</title>
  </head>
  <body>
    <form>
    <b>Isilah form dibawah ini :</b>
    <p>Nama lengkap : <input type="text" name="nama"/></p>
    <p>Alamat : <textarea name="alamat"></textarea></p>
    <p>Email : <input type="email" name="email"/></p>
    <p>No. Telp : <input type="number" name="telp"/></p>
 <p>Agama : <select name="agama"></P>
     <option value="Islam">ISLAM</option>
     <option value="Kristen">KRISTEN</option>
     <option value="Hundu">HINDU</option>
     <option value="Budha">BUDHA</option>
    </select>
    <p>Hobi : <input type="checkbox" name="hobi" value="sepak bola">Sepak Bola
    <input type="checkbox" name="hobi" value="badminton">Badminton
    <input type="checkbox" name="hobi" value="renang">Renang
    <input type="checkbox" name="hobi" value="joging">joging
    <p>Jenis Kelamin : <input type="radio" name="jk" value="l"/>Laki-laki
    <input type="radio" name="jk" value="p">Perempuan </p>
    <input type="submit" value="Kirim"/>
    <input type="reset" value="Reset"/>
    </form>
</body>
</html>

Dari script diatas akan menghasilkan form seperti gambar berikut ini:

tutorial belajar HTML membuat form
Form HTML

Silakan Anda bisa ber eksplorasi lagi dengan dasar form ini, dengan ditambah CSS bentuk form bisa lebih rapi dan keren lagi.

PREVIEW Belajar HTML Membuat Form HTML

See the Pen PpNoLa by edisutanto (@edisutanto) on CodePen.
Sampai disini Tutorial Belajar HTML Membuat Form HTML, semoga bermanfaat. - Salam -

BAB : Belajar HTML dasar dari awal sampai akhir latihan

Baca juga :


4 komentar

  1. Unknown09 April, 2017 09:04

    wah gk pake border jadi jelek gan tampilan form nya

    BalasHapus
    Balasan
    1. SeniKoding09 April, 2017 11:27

      Memang hanya form html aja, tanpa sentuhan CSS, agan bisa bereksplorasi sendiri ya 😁

      Hapus
  2. HADIAMR27 Desember, 2017 15:43

    Nnti stelah di submit, semua datanya masuk kmana???

    BalasHapus
    Balasan
    1. SeniKoding27 Desember, 2017 22:43

      Untuk tutorial Membuat form HTML ini tidak disertai action / arah submit gan, jika mau lihat yang menggunakan action setelah submit data akan masuk ke database di tutorial yang ini http://www.senikoding.com/2017/12/membuat-form-select-option-combobox-php-mysql.html

      Hapus

Dilarang SPAM Komentar!

to Top