Scribd Logo
Unggah

Selamat datang di Scribd!

  • 4 Basic HTML (Form)

    Diunggah oleh

    Rizky Dwi Ananda
    27 tayangan9 halaman

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    27 tayangan9 halaman

    4 Basic HTML (Form)

    Diunggah oleh

    Rizky Dwi Ananda

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 9

    MODUL KULIAH

    PROGRAM KULIAH KARYAWAN & PROFESIONAL


    STTI ITECH

    Mata kuliah Aplikasi Berbasis Web ( 3 sks )


    Semester

    Kelas PKKP
    Dosen Jefri Rahmadian S.Kom

    Pertemuan : 4 (Empat) Waktu : …………. 2011

    Modul 4 (Empat)

    Topik Form HTML


    Sub Topik Merancang Form HTML
    Materi  Tag Form HTML
     Form, Input, Text Area, Label, Fieldset, legend, Select,
    Optgroup dan Button
     checkboxes, radio-buttons, Dropdown List
    Tujuan Mahasiswa memahami form HTML dalam desain aplikasi
    berbasis web
    Form HTML
    Form HTML digunakan untuk tempat memasukan data sebelum diteruskan ke server.
    bentuk dapat berisi elemen input seperti text fields, checkboxes, radio-buttons, submit
    buttons dan banyak lagi. Form juga dapat berisi select lists, textarea, fieldset, legend, dan
    label elements

    Tag Form HTML

    Tag Deskripsi
    <form> Mendefinisikan HTML formulir untuk input pengguna
    <input /> Mendefinisikan input kontrol
    <textarea> Mendefinisikan teks multi-line input kontrol
    <label> Mendefinisikan label untuk suatu elemen input
    <fieldset> Mendefinisikan sebuah perbatasan sekitar elemen dalam bentuk
    <legend> Mendefinisikan keterangan untuk elemen fieldset
    <select> Mendefinisikan daftar pilih (daftar drop-down)
    <optgroup> Mendefinisikan kelompok opsi terkait dalam daftar pilih
    <option> Mendefinisikan pilihan dalam daftar pilih
    <button> Mendefinisikan tombol push

     Form
    <html>
    <body>

    <form action="form_action.asp">
    First name: <input type="text" name="FirstName" value="Mickey"
    /><br />
    Last name: <input type="text" name="LastName" value="Mouse"
    /><br />
    <input type="submit" value="Submit" />
    </form>

    <p>Click "Submit" button dan data inputan akan masuk melalui


    server ke dalam "form_action.asp".</p>

    </body>
    </html>
     Input
    Tag <input> digunakan untuk memilih informasi bagi pengguna.
    Sebuah kolom input dapat bervariasi dalam banyak cara, tergantung pada tipe
    atribut. Sebuah kolom input bisa menjadi kolom teks, sebuah kotak centang,
    lapangan password, tombol radio, tombol, dan banyak lagi.

    <html>
    <body>

    <form action="form_action.php">
    First name: <input type="text" name="FirstName" value="Jhon"
    /><br />
    Last name: <input type="text" name="LastName" value="Rambo"
    /><br />
    <input type="submit" value="Submit" />
    </form>

    <p> Click "Submit" button dan data inputan akan masuk melalui
    server ke dalam "form_action.php".</p>

    </body>
    </html>

     Text Area
    Tag <textarea> mendefinisikan kontrol multi-line untuk text input.
    Wilayah sebuah teks dapat memunculkan jumlah karakter yang terbatas. Ukuran
    textarea bisa ditentukan oleh kolom dan atribut baris

    <html>
    <body>

    <textarea rows="2" cols="20">


    Ini adalah contoh penggunan textarea.
    </textarea>

    </body>
    </html>
     Label
    Tag <label> mendefinisikan sebuah label untuk sebuah elemen input. Elemen label
    tidak dibaca sebagai sesuatu yang istimewa bagi pengguna. Namun, menyediakan
    peningkatan kegunaan bagi pengguna mouse, karena jika pengguna mengklik pada
    teks dalam elemen label, itu matikan kontrol. Untuk atribut dari tag <label> harus
    sama dengan atribut id elemen yang terkait untuk mengikat mereka bersama-sama.

    <form>
    <label for="male">Male</label>
    <input type="radio" name="sex" id="male" />
    <br />
    <label for="female">Female</label>
    <input type="radio" name="sex" id="female" />
    </form>

     Fieldset
    Tag <fieldset> digunakan untuk mengelompokkan berbagai elemen logis dalam
    formulir. Tag <fieldset> menarik sebuah kotak di sekitar elemen form yang terkait.
    Tag <legend> mendefinisikan keterangan untuk elemen fieldset.

    <form>
    <fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text" size="30" /><br />
    Email: <input type="text" size="30" /><br />
    Date of birth: <input type="text" size="10" />
    </fieldset>
    </form>

     Legend
    Tag <legend> mendefinisikan keterangan untuk elemen fieldset .

    <html>
    <body>
    <form>
    <fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text" size="30" /><br />
    Email: <input type="text" size="30" /><br />
    Date of birth: <input type="text" size="10" />
    </fieldset>
    </form>

    </body>
    </html>

     Select
    Tag <select> digunakan untuk membuat daftar pilih (daftar drop-down).
    Tag <option> dalam elemen pilih menentukan pilihan yang tersedia dalam daftar.

    <html>
    <body>

    <select>
    <option>Volvo</option>
    <option>Saab</option>
    <option>Mercedes</option>
    <option>Audi</option>
    </select>

    </body>
    </html>

     Optgroup
    Tag <optgroup> digunakan untuk pilihan grup yang terkait dalam daftar
    pilih. Jika Anda memiliki daftar panjang opsi, kelompok opsi yang terkait
    lebih mudah untuk digunakan bagi pengguna

    <html>
    <body>

    <select>
    <optgroup label="mobil jerman">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
    </optgroup>
    <optgroup label="mobil jepang">
    <option value="toyota">Toyota</option>
    <option value="honda">Honda</option>
    </optgroup>
    </select>

    </body>
    </html>

     Option

    Tag <option> mendefinisikan pilihan dalam daftar pilih. Elemen opsi yang masuk ke
    dalam elemen pilihan.

    <html>

    <body>

    <select>

    <option>Volvo</option>

    <option>Saab</option>

    <option>Mercedes</option>

    <option>Audi</option>

    </select>

    </body>

    </html>
     Button
    Tag <button> mendefinisikan sebuah tombol push.
    Di dalam elemen tombol Anda dapat memasukkan konten, seperti teks atau
    gambar. Ini adalah perbedaan antara unsur dan tombol dibuat dengan elemen input.

    <html>
    <body>

    <form action="">
    <input type="button" value="Enter">
    </form>

    </body>
    </html>

     Checkboxes
    Checkbox merupakan fungsi input data yang membolehkan user memilih satu atau
    lebih pilihan dari sejumlah pilihan yang terbatas.

    <html>
    <body>

    <form action="">
    <input type="checkbox" name="kendaraan" value="Sepeda" />
    Sepeda gunung<br />
    <input type="checkbox" name="kendaraan" value="Mobil" /> Mobil
    Sport
    </form>

    </body>
    </html>

     Radio Button
    Radio Button membolehkan user memilih hanya satu dari sejumlah pilihan yang
    terbatas. Cara membuat Radio Button dengan HTML adalah :
    <html>
    <body>

    <p>Jenis Kelamin</p>

    <form action="">
    <input type="radio" name="sex" value="pria" /> Pria<br />
    <input type="radio" name="sex" value="wanita" /> Wanita
    </form>

    </body>
    </html>

     Drop down List

    <html>
    <body>

    <form action="">
    <select name="Mobil">
    <option value="volvo">Volvo</option>
    <option value="bmw">BMW</option>
    <option value="toyota">Toyota</option>
    <option value="daihatsu">Daihatsu</option>
    </select>
    </form>

    </body>
    </html>

    Jika memunculkan nilai yang diseleksi tambahkan :


    <option value="bmw" selected="selected">BMW</option>

     Membuat text fields

    <html>
    <body>
    <form action="">
    First name: <input type="text" name="firstname" /><br />
    Last name: <input type="text" name="lastname" />
    </form>

    </body>
    </html>

    Membuat password field

    <html>
    <body>

    <form action="">
    Username: <input type="text" name="user" /><br />
    Password: <input type="password" name="password" />
    </form>

    <p><b>Note:</b> The characters in a password field are


    masked (shown as asterisks or circles).</p>

    </body>
    </html>

    Anda mungkin juga menyukai