Belajar HTML #7 : Membuat Form Html

31/12/2021

Hello temen temen, kali ini kita akan belajar membuat form html. Form merupakan tempat penginputan data sebelum diproses oleh sistem. Seperti yang kita tahu web tidak hanya untuk menampilkan sebuah informasi saja tetapi juga mengambil data pengunjung seperti login dan register. Untuk membuat itu dibutuhkan sebuah form untuk menerima hasil inputan dari user, jika kalian pernah membuka facebook pasti kalian harus login terlebih dahulu. Form didalam web bisa kita samakkan dengan formulir dunia nyata, contohnya form biodata. Bedanya di web data itu akan diproses dan diterima lewat jalur server website kita. Memproses data ini nanti kita membutuhkan bahasa server side seperti php atau nodejs dan database seperti mongodb atau mysql. Tapi karena kita disini masih belajar html , jadi kita akan mempelajri sintak sintaknya saja

Cara Membuat Form HTML

Form di html dimulai dengan tag <form>.

Tag ini memiliki beberapa atribut yang penting yaitu ada :

action fungsinya untuk menentukan aksi yang akan dilakukan saat data dikirim
method metode untuk pengiriman data

Contoh kodenya seperti ini guys.

Atribut action dapat kita isi dengan alamat url atau halaman yang kita buat untuk memproses data jika di php maka akan diarahkan ke proses.php. Tapi untuk sekarang temen temen bisa abaikan dulu atau bisa dibilang cukup tau saja.

Tag Input Html

Tag input adalah tag html yang digunakan untuk menerima data dari user.

Tag input memiliki beberapa atribut khusus :

type merupakan type dari field
name merupakan nama dari field yang akan menjadi kunci dan variabel didalam program php.

Type input ini ada banyak sekali gaes berikut ini adalah beberapa macamnya

Macam – macam Type input

Type input ini ada banyak sekali gaes berikut ini adalah beberapa macamnya .

Type text : untuk menampilkan input data berupa kotak yang dapat diisi sebaris tulisan
Type Mulitiple: type ini menggunakan tag <select> digunakan untuk menampilkan lebih dari satu pilihan dari daftar tampilan
Type radio Button : Jenis ini menghasilkan pilihan lebih dari satu , tapi hanya dapat memilih 1 saja.
Type checkbox: Jenis ini menghasilkan pilihan lebih dari satu , dapat memilih banyak.
Type textarea : type ini sama seperti text tetapi dapat diisi tulisan yang cukup banyak.
Type file : type ini digunakan untuk mengupload file
Type submit : digunakan untuk mengirim data yang sudah diinputkan user ke proses selanjutnya secara bersamaan.
Type reset : digunakan untuk mengosongkan kembalidata yang telah dituliskan oleh user

Untuk contohnya disini kita akan membuat sebuah form login seperti ini.

Belajar HTML #7 : Membuat Form Html Dunia Coding

Kodenya seperti ini.

<!DOCTYPE html>
<html>
<head>
    <title>Form Login</title>
</head>
<body>
    <form action="login.php" method="POST">
    <h2>Silahkan Login Terlebih Dahulu</h2>
        <p>
            <label>Username:</label>
            <input type="text" name="username" placeholder="username..." />
        </p>
        <p>
            <label>Password:</label>
            <input type="password" name="password" placeholder="password..." />
        </p>
        <p>
            <label><input type="checkbox" name="remember" value="remember" /> Remember me</label>
        </p>
        <p>
            <button type="submit" name="submit">Login</button>
        </p>
    </form>
</body>
</html>

Di atas menggunakan menggunakan 3 type field yaitu type text, password, dan checkbox serta tag button untuk submit data kita atau mengirim data kita. Atribut placeholder adalah atribut opsional yang fungsinya untuk menampilkan text sementara.

Untuk lebih melatih pemahaman kita disini kita akan membuat sebuah form biodata. Karena di form biodata menggunakan type type yang ada di form gaes jadi cocok banget buat latihan untuk pemula.

Berikut kodenya.

<!DOCTYPE html>
<html>
  <head>
    <title>Form Biodata</title>
  </head>
  <body>
    <h2 style="text-align: center;">FORM BIODATA MAHASISWA DUNIA CODING</h2>
    <hr>
    <form action="proses.php" method="POST">
    <table border=0>
      <tr>
        <td>NIM</td>
        <td>:</td>
        <td>
          <input type=text name=nim>
        </td>
      </tr>
      <tr>
        <td>Nama Lengkap</td>
        <td>:</td>
        <td>
          <input type=text name=Nama size=50>
        </td>
      </tr>
      <tr>
        <td>Kelas</td>
        <td>:</td>
        <td>
          <select name="RW">
            <option value="X">X</option>
            <option value="XI">XI</option>
            <option value="XII">XII</option>
        </td>
        </select>
      </tr>
      <tr>
        <td>Jurusan</td>
        <td>:</td>
        <td>
          <input type=radio name="jurusan" value="teknik_informatika">Teknik Informatika <input type=radio name="jurusan" value="sitem_informasi">Sistem Informasi <input type=radio name="jurusan" value="Multimedia">Multimedia
        </td>
      </tr>
      <tr>
        <td>Tempat dan Tanggal Lahir</td>
        <td>:</td>
        <td>
          <input type=text name=Tempat size=15>
          <select name=Tanggal>
            <option name=Tanggal>Tanggal
            <option name=Tanggal>1
            <option name=Tanggal>2
            <option name=Tanggal>3
            <option name=Tanggal>4
            <option name=Tanggal>5
            <option name=Tanggal>6
            <option name=Tanggal>7
            <option name=Tanggal>8
            <option name=Tanggal>9
            <option name=Tanggal>10
            <option name=Tanggal>11
            <option name=Tanggal>12
            <option name=Tanggal>13
            <option name=Tanggal>14
            <option name=Tanggal>15
            <option name=Tanggal>16
            <option name=Tanggal>17
            <option name=Tanggal>18
            <option name=Tanggal>19
            <option name=Tanggal>20
            <option name=Tanggal>21
            <option name=Tanggal>22
            <option name=Tanggal>23
            <option name=Tanggal>24
            <option name=Tanggal>26
            <option name=Tanggal>27
            <option name=Tanggal>28
            <option name=Tanggal>29
            <option name=Tanggal>30
            <option name=Tanggal>31
          </select>
          <select name=Bulan>
            <option name=Bulan>Bulan
            <option name=Bulan>Januari
            <option name=Bulan>Februari
            <option name=Bulan>Maret
            <option name=Bulan>April
            <option name=Bulan>Mei
            <option name=Bulan>Juni
            <option name=Bulan>Juli
            <option name=Bulan>Agustus
            <option name=Bulan>September
            <option name=Bulan>Oktober
            <option name=Bulan>November
            <option name=Bulan>Desember
          </select>
          <select name=Tahun>
            <option name=Tahun>Tahun
            <option name=Tahun>2016
            <option name=Tahun>2015
            <option name=Tahun>2014
            <option name=Tahun>2013
            <option name=Tahun>2012
            <option name=Tahun>2011
            <option name=Tahun>2010
            <option name=Tahun>2009
            <option name=Tahun>2008
            <option name=Tahun>2007
            <option name=Tahun>2006
            <option name=Tahun>2005
            <option name=Tahun>2004
            <option name=Tahun>2003
            <option name=Tahun>2002
            <option name=Tahun>2001
            <option name=Tahun>2000
            <option name=Tahun>1993
            <option name=Tahun>1992
          </select>
        </td>
      </tr>
      <tr>
        <td>Jenis Kelamin</td>
        <td>:</td>
        <td>
          <input type=radio name=JK value=Laki-laki>Laki-laki <input type=radio name=JK value=Perempuan>Perempuan
        </td>
      </tr>
      <tr>
        <td>Alamat</td>
        <td>:</td>
        <td>
          <input type=textfield name=alamat size=50>
        </td>
      </tr>
      <tr>
        <td>Email</td>
        <td>:</td>
        <td>
          <input type=textfield name=alamat> @ <select name="Email">
            <option value="RPL">Gmail.com</option>
            <option value="TKJ">Yahoo.com</option>
            <option value="SM">Yahoo.co.id</option>
            <option value="AP">Ymail.com</option>
          </select>
        </td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td>
          <a href="terimakasih.html">
            <input type="submit" name="Submit" value="Submit">
          </a>
          <input type="reset" name="Teu janten" value="Cancel">
      </tr>
      </form>
    </table>
  </body>
</html>

Maka tampilannya akan menjadi seperti ini

Nah jika dilihat banyak tag dan juga atribut yang kita bahas ya gaess. Berikut list atrbiut yang belum kita bahas

autocomplete : tag ini untuk memberitahu browser apakah form ini membawa history apa yang diketikan user sebelumnya atau tidak. Tag ini memiliki dua nilai yaitu on f=dan off defaulnya adalah on.
autofocus : digunakan untuk memberikan focus secara otomastis pada inputan yang diberikan tag ini ketika halaman direload.
form enctype : digunakan ketika kita ingin menirim file di inputan kita ke server, digunakan di tag form
height and width : untuk mengatur tinggi dan lebar form
min and max : untuk menentukan minimal dan maksimal inputan, digunakan di type number atau date.
multiple : memberitahu browser bahwa pengguna diperbolehkan memasukkan lebih dari satu nilai pada elemen <input>. Biasa dipakai di inputan bertype file. Yang artinya boleh menginput banyak gambar.
required : untuk validasi client side yang artinya inputan ini harus diisi

Nah mungkin itu dulu temen temen pembelajaran kita kali ini jika temen temen ada pertanyaan bisa ketik di kolom komentar sekian dari saya salam ngoding.