Minggu, 02 April 2017

Belajar HTML dan CSS Bagian 12 : Membuat Form Pada HTML

Membuat Form Pada HTML

       Assalamualaikum Wr. Wb. Selamat datang kembali di blog lupacode. Sebelumnya kita telah mempelajari tentang Belajar HTML dan CSS Bagian 11  Bagi sahabat lupacode yang baru saja bergabung atau nyasar ke halaman ini, silahkan pelajari terlebih dahulu dari artikel yang pertama agar sahabat paham dan mengerti maksud dari artikel yang akan saya bahas kali ini. Sahabat semua dapat melihat seluruh isi artikel pada blog ini di halaman Daftar isi

lupacode - membuat form pada tabel

        Pada materi kali ini yang akan saya jelaskan yaitu mengenai form pada <html>. Form ini adalah sebuah topik yang tidak kalah penting dengan topik – topik sebelumnya, dan yang akan dibahas kali ini adalah bagaimana cara membuat, cara menggunakan dan apa saja element-element yang terdapat pada form ini.
      Form itu adalah sebuah elemen dari html untuk mengelola data dari input yang dilakukan oleh user. Baik itu saat user memasukan data pada kolom, pada combo box atau  drop down menu atau radio button bahkan sampai user menekan sebuah tombol. Saat ini hamir semua website punya apa yang disebut dengan form, dan kegunaanya beda – beda. Ada form registrasi dan macam – macam yang lainnya.
Sebagai contoh mungkin kita bisa lihat halam depan dari www.facebook.com

lupacode - membuat form pada tabel 1

       Pada halaman depan facebook ini kalian bisa lihat terdapat dua buah form, yang pertama ada yang disebut dengan form login. Form login ini hampir ada disetiap website. Biasanya form login itu ada username dan password. Kalau untuk facebook email dan password. Yang kedua form nya adalah form registrasi. Dimana pada form ini kita mengisikan data diri kira saat mengklik tombol mendaftar nanti data di kirim ke facebook dan data kita disimpan disana. Kita ga akan membahas bagaimana cara mengelola datanya, yang akan kita lakukan adalah membuat formnya saja dulu. Yang penting kita tahu bagaimana cara membuatnya dan tau fungsi dari elemen input itu seperti apa. Nanti kalau kita sudah belajar css kita akan belajar bagaimaa cara menghiasnya
        Yang pertama yang kita butuhkan adalah tag <form> </form> sebelum kita membuat elemen – elemennya kita bungkus terlebih dahulu dengan tag form untuk mengetahui satu elemen – elemen ini merupakan bagian dalam form. Sekarang kita lihat dulu apa saja elemen – elemen yang terdapat didalam form dan ini sering banget digunakan

<form> </form>

Input

Textarea

Select

Button

Label
   
       Yang saya pilih ada 5 yang paling pentting adalah input, nanti kita buat text field, radio button dan macam – macam.
  1. Input = Dimana user dapat meginputkan sesuatu
  2. Textarea = mirip dengantext field tapi kita dapat lebih banyak mengisikan text seperti komentar
  3. Select = ini digunakan untuk membuat dropdown atau combo box
  4. Button = tombol untuk mengirimkan data
  5. Label = untuk menandai sebuah elemen input
Elemen input
Tagnya input tidak memiliki penutup atau tidak berpasangan cara menulisnya adalah

<input type=””>

Text

Password

Radio

Ceheckbox

Submit

Reset

Button

Saya sudah buat file didalam folder html dengan nama form.html dan saya akan coba membuat sebuah input text, password, radio, checkbox dan submit. Syntax nya adalah seperti ini

<!DOCTYPE html>
<html>
<head>
                <title>Form HTML</title>
</head>
<body>
<form>
                <label for="user">Username</label>
                <input type="text" id="user">
                <br><br>
                <label for="password">Password</label>
                <input type="password" id="password">
                <br><br>
                <input type="radio" id="pria" name="jeniskelamin"><label for="pria">Pria</label>
                <input type="radio" id="wanita" name="jeniskelamin"><label for="wanita">Wanita</label>
                <br><br>
                <input type="checkbox" id="Menyanyi"><label for="Menyanyi">Menyanyi</label>
                <input type="checkbox" id="Olahraga"><label for="Olahraga">Olahraga</label>
                <input type="checkbox" id="Ngoding"><label for="Ngoding">Ngoding</label>
                <br><br>
                <button type="submit">Kirim</button>
</form>
</body>
</html>

Kalau kita lihat hasilnya akan menjadi seperti ini

lupacode - membuat form pada tabel 2

     Saya akan bahas sedikit mengenai syntax yang saya tuliskan diatas, saya sarankan untuk menggunakan label dan pasangkan dengan atribut for dan id jika atribut for nya “nama” maka atribut id nya juga harus sama, yaitu “nama” paham yah maksud saya. Tag <br> adalah untuk menambahkan spasi pada baris, seperti yang sudah saya bahas pada materi sebelumnya.
       Pada tag <input> type “radio” kita harus memberikan atribut name pada inputannya, agar user hanya dapat memilih satu option saja. Jangan sampai biarkan user dapat memilih dua option kecuali pada atribut checkbox untuk hobi. Kita dapat memilih lebih dari satu option.
Untuk type button ada 3 atribut yang dapat kita gunakan pada tag button tersebut

<button>

type=” ”> </button>

Submit

Reset

Button
Submit = Untuk mengirimkan data

Reset = Untuk menghapus semua data yang telah di inputkan

Button = Tombol untuk mengirim data

      Baiklah sampai sini dulu untuk pertemuan kali ini, semoga apa yang kita pelajari pada artikel yang saya tulis dapat sahabat mengerti dan paham akan maksud dan tujuannya. Baik kita akan lanjut ke dalam materi selanjutnya yaitu Belajar HTML dan CSS Bagian 13

1 komentar so far

kalau mau buat php gimana,phising bisa juga itu kan?
ajarin dong scriptlagi

Silahkan berkomentar yang baik dan menarik sesuai dengan isi konten.
Komentar yang tidak diperbolehkan :

1. Berbau penghinaan SARA & PXXN
2. Komentar dengan Link hidup ( akan dianggap spam )
3. Komentar tidak nyambung dengan isi postingan
EmoticonEmoticon