Senin, 03 April 2017

Belajar HTML dan CSS Bagian 13 : Form Lanjutan

Form Lanjutan

       Assalamualaikum Wr. Wb. Selamat datang kembali di blog lupacode. Sebelumnya kita telah mempelajari tentang Belajar HTML dan CSSBagian 12  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

lopacode - form lanjutan

         Baik kita akan melanjutkan materi yang sebelumnya masih membahas tentang form. Kemarin kita sudah membuat form dengan elemen – elemen sederhana di dalamnya. Yang akan kita buat sekarang adalah <textarea> </textarea> textarea ini mirif dengan text field namun ukurannya lebih besar dan inputannya pun lebih banyak. Kalau input kalian bisa gunakan untuk nama, password dll sedangkan untuk textarea bisa kalian gunakan untuk komentar, testimoni, alamat dan masih banyak lagi disesuakan dengan keperluan saja.
       Saya akan tuliskan syntax nya dibawah checkbox dimana pada artikel sebelumnya kita telah membuat syntak yang pertama. Saya tuliskan 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" name="hobi" id="Menyanyi"><label for="Menyanyi">Menyanyi</label>
                <input type="checkbox" name="hobi" id="Olahraga"><label for="Olahraga">Olahraga</label>
                <input type="checkbox" name="hobi" id="Ngoding"><label for="Ngoding">Ngoding</label>
                <br><br>
                <textarea></textarea>
                <br><br>
                <button type="submit">Kirim</button>
</form>
</body>
</html>

Dan kita lihat hasilnya adalah seperti ini

lopacode - form lanjutan 1
Selanjutnya adalah dropdown atau di dalam html kita sebutnya select dan strukturnya adalah seperti ini
<select>
<option>Pilihan 1</option>
            <option>Pilihan 2</option>
            <option>Pilihan 3</option>
</select>

      Ini agak berbeda dengan tag sebelumnya, kita harus punya dulu tag <select> sebagai pembungkus nya lalu didalamnya untuk pilihan-pilihan nya kita gunakan tag <option> kita bisa tulis sebanyak mungkin tag option sesuai dengan keperluan saja. Contoh syntax nya adalah seperti ini, saya akan menuliskan contohnya membuat nama kota sebagai berikut :

<select>
            <option>Bandung</option>
            <option>Jakarta</option>
            <option>Surabaya</option>
</select>

Dan hasilnya adalah seperti berikut :

lopacode - form lanjutan 2

      Itu untuk membuat combo box. Karna kita belum belajar css maka tampilannya kurang begitu rapi atau indah. Nah kita bisa gunakan ilmu – ilmu yang sudah kita pelajari pada pembahasan sebelumnya, yaitu dengan menggunakan elemen-elemen milik html dan memasukannya kedalam tabel. Nanti tugas kalian coba elemen – elemen yang sudah dibuat masukan kedalam tabel sehingga hasilnya nanti seperti ini
lopacode - form lanjutan 3

      Labelnya coba masukan ke <td> yang satu dan elemen inputnya masukan kedalam <td> yang satu. Nah ini untuk satu <tr> seperti itu sampai seterusnya. Tabel yang margin tinggal gunakan colspan. Dan kalau sudah rapi seperti itu kita tinggal hilangkan saja bordernya menjadi seperti ini

lopacode - form lanjutan 4

    Kalau kalian ingin belajar mengetahui lebih banyak tag – tag atau atribut dari html itu sendiri kalian dapat mengunjungi website www.w3school.com/tags nanti disana dibahas secara lengkap mengenai tag atau atribut lebih lengkap lagi. Silahkan kalian pelajari sendiri, eksplorasi sendiri dan lebih banyak lagi latihan agar kalian lebih hafal lagi kode – kode nya.
     Mungkin ini adalah materi terakhir dari pembahasan HTML. Saya berharap sahabat semua dapat mengerti dari mulai pembahasan saya yang pertama sampai dengan yang terakhir ini. Jika ada salah kata atau salah pembahasan saya mohon maaf yang sebesar – besarnya. Mohon untuk sahabat lupacode koreksi lagi kesalahan – kesalahannya, dan bagi yang sudah senior atau master silahkan jika ingin menambahkan pembahasan ini sudah saya sediakan kolom komentar, dan saya sangat menerima itu untuk kebaikan blog lupacode ini maupun untuk sahabat lupacode semuanya.
     Baiklah saya rasa dicukupkan sampai disini dan insya allah untuk kedepannya saya akan membuat materi selanjutnya yaitu mengenai Belajar CSS Dasar. Jadi untuk sahabat lupacode silahkan kunjungi terus blog lupacode ini untuk belajar bersama – sama. Terima kasih


Admin - Lupa code
Wasalamualaikum Wr. Wb.

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