Hai semuanya!

Ini adalah website lama kami, pada akhir agustus 2020 website ini akan di ahlikan ke https://sekolahprogram. Website yang baru Anda bisa diskusi, membuat artikel dan membagikan karya aplikasi mu.


New Sekolah Program

Belajar Dasar HTML Part 15 – Cara Membuat Form Pada HTML (tag form)

Febri Hidayan Komentar

Belajar Dasar HTML Part 15 – Cara Membuat Form Pada HTML (tag form)

Pada kesempatan kali ini kita akan membuat form sederhana akan tetapi kegunaannya cukup banyak. Sebelumnya kita sudah belajar cara membuat table dan sekarang waktunya kita membuat form.

Baca juga: Belajar Dasar HTML Part 14 – Cara Membuat Tabel Pada HTML (tag table)

Cara Membuat Form Pada HTML (tag form)

Tag <form> sangat banyak sekali kegunaannnya dalam pembuatan suatu website, dimana biasanya didalam website terdapat halaman register, login, contact person, dan lainnya. Jadi bukan itu saja dalam pembuatan aplikasi web juga menggunakan form seperti halnya membuat form untuk data siswa atau karyawannya juga. Pada masalah desain kita juga bisa belajarnya di link dibawah ini untuk membuat form dengan framework css Bootstrap.

Baca juga: Belajar Dasar Bootstrap 4 Untuk Pemula

Mengenal Beberapa Atribut Pada Pembuatan Form

Banyak sekali atribut yang kita akan gunakan terutama pada tag form sendiri, kalau begitu kita akan lihat apa saja atributnya dan penjelasan singkat buat masing masing atribut.

Atribut Tag <form>

  • Action dimana atribut ini digunakan untuk memproses suatu data dalam form atau untuk mentransfer data misalnya action=”” diproses dihalaman yang sama, action=”proses.php” data di transfer pada file php lalu fil tersebut memproses data yang masuk.
  • Method digunakan untuk bagaimana kita mengelola suatu data ada dua nilai wajib yang harus kita gunakan yaitu POST dan GET. POST jadi method=”POST” kalau kita menggunakan POST maka data yang kita submit tidak akan terlihat di url browser. GET jadi method=”GET” maka akan terlihat data yang kita input pada url browser, jadi mereka berupakan nilai yang berlawanan.
  • Enctype merupakan sebuah data-form yang akan dikirim ke server. Jadi kalau kita ingin upload video, foto, file, atau lainnya atribut ini wajib kita gunakan. Penggunannnya cukup muda yaitu dengan enctype=”multipart/form-data”.

Atribut Tag <input>

  • Type kebutuhan dari atribut ini merupakan yang paling penting perannya, dimana atribut ini menentukan type input apa yang gita akan gunakan misalnya berupa karakter, nomer, email, tanggal dan masih banyak lagi. Jadi kita akan memasukan nilainya dengan cara type=”nilai”, nilai tersebut antara lain ialah button, checkbox, color, date, datetime, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, dan week.
  • Name memberikan nama pada tag input misalnya name=”username”.
  • Value digunakan untuk menetapkan nilai yang telah ditentukan atau bisa juga untuk menampilkan nilai yang sudah ada.
  • Placeholder dimana kita bisa mengingatkan pada penginput data, misalnya input ini untuk username maka kita akan buat placeholder=”Isi Username Anda”.
  • Required untuk mewajibkan penggunakan mengisi datanya pada suatu input.

Kalau sudah mengerti pada atribut yang kita akan gunakan maka kode pembuatan formnya akan seperti ini dan bisa langsung copy.

Kode Form Pada HTML
<form action="#" method="post"enctype="multipart/form-data">
  <p>
    <label>Username</label>
    <input type="text" name="name" value="febrihidayan" placeholder="username" required>
  </p>
  <p>
    <label>Password</label>
    <input type="password" name="password" value="123456789">
  </p>
  <p>
    <label>Gender</label>
    <select name="gender">
      <optgroup label="Opsi gender">
        <option hidden>Opsi gender</option>
        <option value="1">Male</option>
        <option value="2">Famale</option>
      </optgroup>
    </select>
  </p>
  <p>
    <label>Message</label>
    <textarea name="message" rows="8" cols="40" placeholder="Tulisakan pesan Anda..."></textarea>
  </p>
  <p>
    <input type="submit" name="kirim" value="Kirim">
  </p>
</form>

Maka hasilnya yang telah kita buat seperti gambar dibawah ini.

Mungkin itu saja pembahasan kita kali ini semua bermanfaat, tutorial selanjutnya ada dibawah ini J

Baca juga: Belajar Dasar HTML Part 16 – Cara Menggunakan Tag Span dan Div Pada HTML

Category HTMLTags Dasar HTML


Mari Tinggalkan Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *