Penyajian Text Area, Form dan Element-element Multimedia - Praktikum 4

Ilham Prabu Zaky Setiawan
XI RPL 2
Absen 15
SMKN 4 Bandung

Assalamualaikum wr.wb.
Pada kesempatan kali ini saya akan melanjutkan materi pembahasan tentang Pengenalan Dasar HTML bagian ke-empatnya, melanjutkan bagian kedua seminggu yang lalu,
Pada materi kali ini kita akan membahas berbagai tag html lagi beserta fungsi dan penggunaannya, begitupula dengan cara penulisannya.

Yang akan kita pelajari pada  materi ini merupakan tentang "Penyajian Text Area, Pembuatan form dan Multimedia Layout Page", dengan menggunakan tag-tag html keren yang lain lho.
Dalam pembelajaran kali ini semua hal yang telah kita pelajari kemarin akan kita praktekan lagi disini.
Oke tanpa berlama-lama lagi mari kita lanjut ke pembahasan materinya, pertama kita disini akan menelaah berbagai tag html lagi nih, untuk lebih jelasnya mari kita bahas secara seksama.


A. Penyajian Text Area 

Dalam menyajikan text area, tag yang dipakai ialah tentu tag text area itu sendiri, berikut penulisan tagnya <textarea></textarea>.
Dilihat dari namanya saja sudah terbayang bagaimana fungsi dari textarea itu sendiri bukan? biar lebih jelas lagi mari simak berbagai penjelasan dibawah ini !


Fungsi Tag Textarea dalam pembuatan Form HTML

Objek form textarea digunakan untuk membuat text inputan yang bisa menampung lebih dari 1 baris inputan. Tag textarea mirip dengan tag input type text, namun memiliki kelebihan untuk menampung beberapa baris. Biasanya textarea digunakan untuk inputan yang panjang, seperti komentar, keterangan, atau catatan.
Untuk menggunakan textarea, kita cukup membuat tag textarea sebagai berikut:
<textarea></textarea>
Diantara tag pembuka dan penutup bisa diselipkan text yang akan ditampilkan sebagai isian awal dari text area seperti berikut ini:
<textarea>Silahkan isi komentar anda</textarea>

Atribut name: Untuk pemrosesan Tag Textarea

Walaupun tidak harus, namun jika text area digunakan di dalam form, maka atribut name berfungsi sebagai identitas dari tag textarea tersebut. Identitas ini diperlukan pada saat pemrosesan di sisi server (misalnya menggunakan PHP). Atribut name inilah yang akan menjadi varibel penampung nilai yang dipilih oleh user. Atribut name diletakkan di dalam tag textarea:
<textarea name="komentar">Silahkan isi komentar anda</textarea>

Atribut cols dan rows: Menentukan Lebar dan Tinggi Textarea

Kedua atribut ini berfungsi untuk membatasi tampilan lebar kolom(cols) dan tinggi baris (rows) dari textarea. Nilai yang diinput adalah jumlah karakter yang menjadi lebar dari text area. Misalkan kita membuat atribut cols=”40”, maka text area akan memiliki lebar 40 karakter. Namun lebar ini tidak akan persis sama dengan 40 karakter, karena akan tergantung font, serta jenis huruf yang diinput.
Contoh penggunaan atribut cols dan rows:
<textarea cols="40">Silahkan isi komentar anda</textarea>
<textarea cols="40" rows="10">Silahkan isi komentar anda</textarea>

Atribut disabled dan readonly: menonaktifkan tag Textarea

Atribut disabled dan readonly digunakan untuk membuat textarea tidak bisa digunakan. Penggunaan atribut ini biasanya di kombinasikan dengan javascript agar berfungsi maksimal. Misalkan sebuah textarea hanya dapat diisi ketika user telah mengisi kotak isian lainnya.
Kedua atribut ini hanya memiliki 1 nilai, yaitu dirinya sendiri, yang ditulis dengan disabled=”disabled” dan readonly =“readonly”. Berikut contoh penulisannya:
<textarea readonly="readonly">Silahkan isi komentar anda</textarea>
<textarea disabled="disabled">Silahkan isi komentar anda</textarea>
Walaupun kedua textarea yang memiliki atribut ini tidak bisa digunakan, namun keduanya akan memiliki tampilan yang berbeda. Atribut disabled akan membuat kotak text berwarna abu-abu, sedangkan atribut readonly tampak seperti kotak text biasa.
Sehingga biasanya atribut disabled lah yang sering digunakan, karena akan memberikan tampilan kepada user bahwa kotak text tersebut tidak bisa digunakan
.

Contoh Penerapannya

Hasil : 





























Source code :


<!DOCTYPE html>
<html>
<head>
     <title>Latihan 18 - Macam-macam text Area</title>
</head>
<body>

     <p> Silakan diisi pada teks area yang tersedia</p>
          <textarea name="rendah" cols=30 rows=5></textarea>
          <textarea name="sedang" cols=30 rows=10></textarea>

     <p> Silahkan coba klik</p>
          <textarea name="terlarang" cols="40" rows="6" disabled>Tulisan ini tidak dapat disalin maupun diubah.</textarea>
     <p> sedangkan tulisan ini read only</p>
          <textarea name="untukdibaca" cols="40" rows="6" readonly>Tulisan ini tidak dapat diubah tetapi dapat disalin.</textarea>
</body>
</html>


B. Pembuatan Form

Form, merupakan tag dari html yang hampir banyak sekali digunakan disetiap kian website. Nah karena tag form ini banyak sekali kegunaannya, langsung saja mari kita pahami penjelasannya secara seksama.


Tujuan serta fungsi dari tag Form

Form biasanya digunakan untuk mengumpulkan data dari pengunjung web kita. Mulai dari form untuk login, form kontak, form untuk pendaftaran user, bahkan untuk mengirimkan data antar halaman web

Penggunaan form hanya menggunakan HTML saja tidak akan terlalu berguna. Form biasanya hanya berupa interface yang disediakan untuk mengumpulkan data dari user, dan akan diproses dengan bahasa pemograman web seperti JavaScript atau PHP, dan disimpan di dalam tabel MySQL. Untuk pembahasan lebih lanjut, saya akan menjelaskannya pada tutorial tentang PHP dan JavaScript.
Tag dasar yang akan kita gunakan untuk membuat form di HTML adalah tag form, input, textarea, select dan option.
Pengertian dari tag <form>
Sebuah form dalam HTML harus berada di dalam tag form, yang diawali dengan <form> dan diakhiri dengan </form>. Tag form akan membutuhkan beberapa atribut untuk dapat berfungsi dengan seharusnya.
Atribut pertama adalah action, yang berfungsi untuk menjelaskan kemana data form akan dikirimkan. Biasanya nilai dari atribut action ini adalah alamat dari sebuah halaman PHP yang digunakan untuk memproses isi data form.
Atribut kedua adalah method, yang berfungsi untuk menjelaskan bagaimana data isian form akan dikirim oleh web browser. Nilai dari atribut method ini bisa berupa get atau post.
Mengenal pengertian serta kegunaan dari tag input

Tag input merupakan tag paling banyak digunakan di dalam form dan memiliki banyak bentuk, mulai dari isian text biasa, text passwordcheckbox, radio, sampai dengan tombol submit, semuanya dalam bentuk tag <input>.
Bentuk-bentuk dari keluarga tag input ini dibedakan berdasarkan atribut type:
  • <input type=”text” /> atau bisa juga <input /> adalah textbox inputan biasa yang menerima input berupa text, contohnya digunakan untuk inputan namausername, dan inputan yang berupa text pendek. Input type text ini juga bisa memiliki atribut value yang bisa diisi nilai tampilan awal dari text
  • <input type=”password” /> dalam tampilannya sama dengan type text, namun teks yang diinput tidak akan terlihat, akan berupa bintang atau bulatan. Biasanya hanya digunakan untuk inputan yang sensitif seperti password.
  • <input type=”checkbox” /> adalah inputan berupa checkbox yang dapat diceklist atau di centang oleh user. User dapat memilih atau tidak memilih checkbox ini. Type checkbox memiliki atribut checked yang jika ditulis atau diisi dengan nilai checked, akan membuat chexkbox langsung terpilih pada saat pertama kali halaman ditampilkan. Contoh inputan checkbox berupa hobi, yang oleh user dapat dipilih beberapa hobi.
  • <input type=”radio” /> mirip dengan checkbox, namun user hanya bisa memilih satu diantara pilihan group radio. Type radio ini berada dalam suatu grup dan user hanya bisa memilih salah satunya. Contoh inputan type radio adalah jenis kelamin.
  • <input type=”submit” /> akan menampilkan tombol untuk memproses form. Biasanya diletakkan pada baris terakhir dari form. Atribut value jika diisi akan membuat text tombol submit berubah sesuai inputan nilai value.


Contoh Penerapannya
Hasil : 















Source code :


<!DOCTYPE html>
<html>
<head>
     <title>Macam-macam Input pada Form</title>
</head>
<body>

     <form>
          <p>Ini adalah input untuk password</p>
               <label>Password</label>
               <input type="password" name="pswd" maxlength="8">
          <p>Ini adalah text area tersembunyi</p>
             Nama <input type="textarea" name="negara">
          <input type="hidden" name="negara" value="Indonesia">
          <input type="submit" value="Submit">
          <p>Ini adalah upload button</p>
           <font face= "stabillo, Courier, mono">Upload Foto</font>
           <input type="file" name="pic" accept="image/*">
     </form>
     
</body>
</html>

Mengenal pengertian serta kegunaan dari tag select

Tag select digunakan untuk inputan yang telah tersedia nilainya, dan user hanya dapat memilih dari nilai yang ada. Tag select digunakan bersama-sama dengan tag option untuk membuat box pilihan.

Contoh penggunaan tag select adalah sebagai berikut:
<select>
    <option>Ini merupakan pilihan atau option ke-1</option>
    <option>Ini merupakan pilihan atau option ke-2</option>
    <option value="pilihan ketiga">Pilihan ke-3</option>
</select>
Ketika form dikirim untuk diproses, nilai dari tag <option> akan dikirimkan. Nilai ini adalah berupa text diantara tag option, kecuali jika kita memberikan atribut value. Jika atribut value berisi nilai, maka nilai value-lah yang akan dikirim. Ada atau tidaknya atribut value ini tidak akan tampak dalam tampilan form.

Contoh Penerapannya

Hasil :































Source code : 


<!DOCTYPE html>
<html>
<head>
     <title>Macam-macam Option pada Form</title>
</head>
<body>
     
     <p><h4>Contoh Radio Button</h4>Tingkat Pendidikan : <form>
          <input type="radio" name="Pendidikan" > SD<br>
          <input type="radio" name="Pendidikan"> SMP<br>
          <input type="radio" name="Pendidikan"> SMK<br>
     </form>

     <h4>Contoh Checkbox</h4>Macam Penyakit<br>
          <input type="checkbox" name="checkbox1" value="darting">Darah Tinggi </input><br>
          <input type="checkbox" name="checkbox2" value="samurat">Asam Urat </input><br>
          <input type="checkbox" name="checkbox3" value="maag">Maag </input><br>
     </p>

     <h4>Contoh Select Dropdown</h4>Pilih <J>     </J>urusanmu<br>
     <select name="Jurusan">
          <option value="RPL">Rekayasa Perangkat Lunak</option>
          <option value="TKJ">Teknik Komputer & Jaringan</option>
          <option value="MM">Multimedia</option>
     </select><br>

     <h4>Contoh Button</h4>Click it!<br>
          <button type="button">Aku button biasa</button><br>
          Ini button image->
          <input type="image" src="IMG/red button .jpg" width=90px alt="Submit">


</body>
</html>



Mengenal attribut : name

Setiap tag inputan di dalam form harus ditambahkan atribut name agar dapat diproses oleh web server nantinya. Di dalam halaman proses (yang biasanya berupa bahasa PHP atau ASP), nilai dari atribut name inilah yang akan menjadi variabel form. Contoh pemakaiannya adalah sebagai berikut:
<input type="text" name="username">
<input type="text" name="email">
Kedua input diatas akan tampak sama persis, namun pada saat pemrosesan data, masing-masing akan dibedakan menurut atribut name.

Penerapan Form Utuh

Hasil : 































Source Code : 



<!DOCTYPE html>
<html>
<head>
     <title>Realnya</title>
</head>
<body>
     <center><table background="IMG/white.jpg">
          <tbody>
               <tr>
                    <td align="center" colspan="2"><label for="pendaftaran"><b>PENDAFTARAN</b></label></td>
               </tr>
               <tr>
                    <td colspan="0"><label for="username">Username</label></td>
                    <td>: <input id="username" type="text"></td>
               </tr>
               <tr>
                    <td colspan="0"><label for="password">Password</label></td>
                    <td>: <input id="password" type="password"></td>
               </tr>
               <tr>
                    <td colspan="0"><label for="jeniskelamin">Jenis Kelamin</label></td>
                    <td>
                         :<input type="radio" id="pria" name="jeniskelamin"><label for="pria">pria</label>
                         <input type="radio" id="wanita" name="jeniskelamin"><label for="wanita">wanita<label></label>
                    </td>
               </tr>
               <tr>
                    <td colspan="0">
                         <label for="tanggallahir">Tanggal lahir</label>
                    </td>
                    <td>
                         : <select name="hari" id="dd">
                              <option value="">1</option>
                              <option value="">2</option>
                              <option value="">3</option>
                              <option value="">4</option>
                              <option value="">5</option>
                              <option value="">6</option>
                              <option value="">7</option>
                              <option value="">8</option>
                              <option value="">9</option>
                              <option value="">10</option>
                              <option value="">11</option>
                              <option value="">12</option>
                              <option value="">13</option>
                              <option value="">14</option>
                              <option value="">15</option>
                              <option value="">16</option>
                              <option value="">17</option>
                              <option value="">18</option>
                              <option value="">19</option>
                              <option value="">20</option>
                              <option value="">21</option>
                              <option value="">22</option>
                              <option value="">23</option>
                              <option value="">24</option>
                              <option value="">25</option>
                              <option value="">26</option>
                              <option value="">27</option>
                              <option value="">28</option>
                              <option value="">29</option>
                              <option value="">30</option>
                              <option value="">31</option>
                         </select>
                         <select name="bulan" id="month">
                              <option value="">January</option>
                              <option value="">Februari</option>
                              <option value="">Maret</option>
                              <option value="">April</option>
                              <option value="">Mei</option>
                              <option value="">Juni</option>
                              <option value="">July</option>
                              <option value="">Agustus</option>
                              <option value="">September</option>
                              <option value="">Oktober</option>
                              <option value="">November</option>
                              <option value="">Desember</option>
                         </select>
                         <select name="tahun" id="yy">
                              <option value="">1970</option>
                              <option value="">1971</option>
                              <option value="">1972</option>
                              <option value="">1973</option>
                              <option value="">1974</option>
                              <option value="">1975</option>
                              <option value="">1976</option>
                              <option value="">1977</option>
                              <option value="">1978</option>
                              <option value="">1979</option>
                              <option value="">1980</option>
                              <option value="">1981</option>
                              <option value="">1982</option>
                              <option value="">1983</option>
                              <option value="">1984</option>
                              <option value="">1985</option>
                              <option value="">1986</option>
                              <option value="">1987</option>
                              <option value="">1988</option>
                              <option value="">1989</option>
                              <option value="">1990</option>
                              <option value="">1991</option>
                              <option value="">1992</option>
                              <option value="">1993</option>
                              <option value="">1994</option>
                              <option value="">1995</option>
                              <option value="">1996</option>
                              <option value="">1997</option>
                              <option value="">1998</option>
                              <option value="">1999</option>
                              <option value="">2000</option>
                              <option value="">2001</option>
                              <option value="">2002</option>
                              <option value="">2003</option>
                              <option value="">2004</option>
                              <option value="">2005</option>
                              <option value="">2006</option>
                              <option value="">2007</option>
                              <option value="">2008</option>
                              <option value="">2009</option>
                              <option value="">2010</option>
                              <option value="">2011</option>
                              <option value="">2012</option>
                              <option value="">2013</option>
                              <option value="">2014</option>
                              <option value="">2015</option>     
                              <option value="">2016</option>
                              <option value="">2017</option>
                              <option value="">2018</option>
                              <option value="">2019</option>
                              <option value="">2020</option>
                         </select>
                    </td>
               </tr>
               <tr>
                    <td align="center" colspan="2">
                         <button type="submit">simpan</button>
                         <button type="reset">batal</button>
                    </td>
               </tr>
          </tbody>
     </table></center>
</body>
</html>


C. Multimedia Layout Page


1. Element Audio

        HTML audio element merupakan sebuah element yang bertujuan untuk menunjukan sebuah sound/suara atau audio yang dapat disertakan atau disisipkan pada halaman web dan dapat diputar unttuk didengarkan.

Untuk memasukkan Audio / Musik / Suara lainnya di HTML, gunakan tag <audio> dan <source>, misalnya seperti ini:
<audio controls>
  <source src="contohaudio.mp3" type="audio/mp3">
</audio>
Ada tambahan controls didalam tag <audio> fungsinya untuk menampilkan control tombol play / pause, dsb. Pada bagian <source src=””> masukkan file musik beserta ekstensinya misalnya .mp3 dan tambahkan juga type=”audio/mp3″ jika musik tersebut berupa mp3. Jiak tidak ingin menggunakan control cukup hilangkan / hapus controls didalam <audio>.
Itu adalah contoh audio di direktori lokal, jika audio diambil dari URL / link maka ganti contohaudio.mp3 dengan link dimana file musik itu berada. Sama juga seperti pemanggilan gambar di direktori lokal, jika audio berada didalam beberapa folder misalnya di folder musik -> pop -> contohaudio.mp3 maka panggil semua direktorinya (musik/pop/contohaudio.mp3).

Contoh Penerapan

Hasil :






















Source Code :



<!DOCTYPE html>
<html>
<head>
     <title>Audio pada Web</title>
</head>
<body bgcolor="snow">
     <font face ="Kg Happy, Lucida Handwriting">
          <center>
               <p>Audio ini akan langsung play ⇓</p>
               <audio controls = "controls" autoplay="autoplay" loop="loop">
                    <source src="Media/hd-stardust-crusaders-za-warudo_1.mp3" type="audio/mp3">
                         Jika tidak autoplay, berarti browser yang anda gunakan tidak mendukung
               </audio>
               <p>Klik ▶ untuk menyalakan audio dibawah ini</p>
               <audio controls>
                    <source src="Media/hd-stardust-crusaders-za-warudo_1.mp3" type="audio/mp3">
               </audio>
          </center>
     </font>
</body>
</html>



2. Element Video

     Sudah banyak sekali yang menyisipkan video dengan cara embed dari pihak ketiga karena tampilannya lebih menari dibanding HTML biasa. Tapi untuk HTML saya rasa tidak kalah menarik karena sudah memiliki full control seperti tombol play, pause, fullscreen, dsb. Untuk menyisipkan video di HTML gunakan tab <video> dan <source> tidak berbeda jauh dengan menyisipkan audio:
<video controls>
  <source src="contohvideo.mp4" type="video/mp4">
</video>
Sama seperti audio, ada tambahan controls didalam video ini fungsinya untuk menampilkan tombol control seperti play / pause / dsb. Jika ingin memanggil video dari link maka ubah contohvideo.mp4 nya dengan URL video tersebut. Jika video berada didalam beberapa folder misalnya folder video -> videosaya -> contohvideo.mp4 maka panggil semua direktorinya (video/videosaya/contohvideo.mp4) jangan lupa masukkan juga ekstensi videonya misalnya .mp4.

Contoh Penerapan

Hasil :












































Source Code : 


<!DOCTYPE html>
<html>
<head>
     <title>Video pada Web</title>
     <link rel="shortcut icon" href="IMG/play button.png"/>
</head>
<body bgcolor="lemonchiffon">
     <font face="Happy School, Impact">
          <center>

               <p>Video ini di set autoplay & replay jika telah berakhir ⇓</p>
               <video width="320" height="240" controls="controls" autoplay="autoplay" loop="loop">
               <source src="Media/7 Page Muda.mp4" type="video/mp4">
               Jika tidak autoplay, berarti browser yang anda gunakan tidak mendukung
               </video>

               <p>Video ini ⇓ di set ada gambar posternya di awal</p>
               <video width="320" height="240" controls poster="IMG/play button.png">
               <source src="Media/7 Page Muda.mp4" type="video/mp4">browser anda tidak mendukung format video ini.
               </video>
          </center>
     </font>
</body>
</html>



Nah, jadi akhirnya jadi juga nih Halaman Web  dengan element multimedianya teman-teman !, kita telah berhasil menyelesaikannya, kalian juga bisa langsung membuatnya dengan tag-tag yang telah kita pelajari tadi sama-sama, dan untuk tag dan attribut lainnya bisa anda cari di w3schools tempat saya belajar bermacam-macam tag,  untuk link nya silahkan klik disini.

Alhamdulillah telah selesai tugas dan pembahasan kali ini, semoga dapat dimengerti dan dipahami, mohon maaf sebesar-besarnya atas segala kesalahan yang telah saya buat, dan saya ucapkan terimakasih atas kunjungannya.

Wassalamualaikum wr.wb

0 Response to "Penyajian Text Area, Form dan Element-element Multimedia - Praktikum 4"

Post a Comment

Postingan Terbaru

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel