4 basic html form
•Download as DOCX, PDF•
0 likes•428 views
Modul ini membahas tentang form HTML untuk merancang formulir input data pada aplikasi berbasis web. Tag-tag form HTML seperti form, input, textarea, label, fieldset, select, dan button dijelaskan untuk membuat berbagai jenis kontrol form seperti teks, daerah teks, daftar pilih, tombol radio, kotak centang dan tombol submit. Tujuannya adalah agar mahasiswa memahami penggunaan form HTML dalam merancang antarmuka pengguna untuk aplikasi web.
More Related Content
Viewers also liked
Viewers also liked (16)
Similar to 4 basic html form
Similar to 4 basic html form (20)
Recently uploaded
Recently uploaded (20)
4 basic html form
- 1. MODUL KULIAH PROGRAM KULIAH KARYAWAN & PROFESIONAL STTI ITECH Mata kuliah Aplikasi Berbasis Web ( 3 sks ) Semester Kelas PKKP Dosen Jefri Rahmadian M.Kom Pertemuan : 4 (Empat) Waktu : …………. 2012 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
- 2. 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>
- 3. 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>
- 4. 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>
- 5. <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>
- 6. <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>
- 7. 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 :
- 8. <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>
- 9. <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>