Assalamu'alaikum, hallo semuanya! Kembali lagi dengan saya Fadli Mahesa, seorang siswa yang bersekolah di SMKN 4 Bandung dan duduk di bangku kelas XI RPL 3. Kali ini saya akan membagikan lagi sedikit ilmu di dunia percodingan, yaitu tentang Form & Multimedia pada HTML. Beberapa tags yang akan akan di pakai kali ini adalah :
| Elemen | Description |
| <form> | Untuk membuat body formulir/form |
| <textarea> | Untuk membuat kolom yang bisa diisi teks |
| <input> | Untuk memasukkan input, bisa berupa teks biasa; password; tanggal; nomor; file; tombol submit; dll |
| <select> | Berfungsi untuk membuat opsi, diisi dengan value sesuai kebutuhan |
| <button> | Berfungsi untuk membuat tombol |
| <audio> | Digunakan untuk membuat player suara |
| <video> | Digunakan untuk membuat player video |
A. Text Area
Pada HTML, terdapat komponen entri teks yang fungsinya berbeda-beda salah satunya yang belum dipelajari adalah textArea.
TextArea merupakan komponen entri teks yang digunakan untuk memasukan teks yang tersusun lebih dari 1 baris. Untuk menggunakannya textarea disisipkan pada tag form layaknya komponen form lain yang biasa digunakan.
Syntax Pembuatan TextArea :
<html>
<head><title>Lat 18 Macam - Macam TextArea, by Fadli Mahesa</title>
</head>
<body>
<p>Silahkan 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="terlarang" cols=40 rows=6 readonly>
Tulisan ini tidak dapat diubah tapi bisa disalin.
</textarea>
</body>
</html>
Hasil
B. Form Input
Adapun tags yang dipakai pada form input ini yaitu <input> dan memiliki atribut (type = "" ), dan atribut yang saat ini dipakai adalah type="password" untuk mengubah teks menjadi bintang, dan type="hidden" untuk menghilangkan teks setelah di submit, lalu type="submit" untuk mengirimkan data. dan terakhir type="file" untuk peng-input-an file.
Syntax Pembuatan Form Input :
<html>
<head><title>Macam - Macam Input pada Form, by Fadli Mahesa</title>
</head>
<body>
<form>
<p>Ini adalah input password</p>
<label>PASSWORD</label>
<input type="password" name="pswd" maxlength="8">
<p>Ini adalah text area tersembunyi</p>
Nama <input type="textarea" name="ID">
<input type="hidden" name="ID" value="yourID">
<input type="submit" value="Submit">
<p>Ini adalah upload button</p>
<font face="Hatton Black">Upload Foto</font>
<input type="file" name="pic" accept="image/*">
</form>
</body>
</html>Hasil
C. Atribut Option pada Form
Syntax Pembuatan Atribut Option pada Form :
<html>
<head><title>Macam - Macam Option pada Form</title>
</head>
<body>
<form>
<h4>Contoh Radio Button</h4> Tingkat Pendidikan :<br>
<input type="radio" name="pendidikan">SD<br>
<input type="radio" name="pendidikan">SMP<br>
<input type="radio" name="pendidikan">SMK<br>
<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>
<h4>Contoh Select Dropdown</h4>Pilih Jurusanmu<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="Media/submit.png"
width="228" height="67" alt="Submit">
</form>
</body>
</html>
Hasil
D. Challenge 1! Tabel Form.
Syntax Pembuatan Tabel Form :
<html>
<head><title>Challenge Table Form, by Fadli Mahesa</title>
</head>
<body>
<table border="3" background="Media/BG.jpg">
<tr>
<td>
<p><center><b><big>PENDAFTARAN</big></b></center></p>
<table border="0">
<tr>
<td>Nama Pengguna</td>
<td>: </td>
<td><input type="textarea" name="IDUser"></td>
</tr>
<tr>
<td>Kata Sandi</td>
<td>: </td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>: </td>
<td>
<input type="radio" name="jeniskelamin"> Pria
<input type="radio" name="jeniskelamin"> Wanita
</td>
</tr>
<tr>
<td>Tanggal Lahir</td>
<td>: </td>
<td><input type="date"></td>
</tr>
<tr>
<td colspan="3" align="center">
<button type="submit">Simpan</button>
<button type="reset">Batal</button>
</td>
</tr>
</td>
</tr>
</table>
</body>
</html>
Hasil
E. Audio Player di HTML
Syntax Pembuatan Audio Player :
<html>
<head><title>Audio pada Web, by Fadli Mahesa</title>
</head>
<body bgcolor="midnightblue">
<font face="Lucida Handwriting">
<center>
<p>
Audio ini akan langsung play ↓</p>
<audio controls="controls" autoplay="autoplay" loop="loop">
<source src="Media/Justin Bieber - Sorry.mp3" type="audio/mp3">
Jika tidak autoplay, browser yang digunakan tidak mendukung
</audio>
<p>
Klik ► untuk menyalakan audio dibawah ini</p>
<audio controls>
<source src="Media/Rixton - Me and My Broken Heart.mp3" type="audio/mp3">
</audio>
</center>
</font>
</body>
</html>
Hasil
F. Video Player
Syntax Pembuatan Video Player :
<html>
<head><title>Video pada Web, by Fadli Mahesa</title>
<link rel="shortcut icon" href="Media/">
</head>
<body bgcolor="rebeccapurple">
<font face="montserrat medium, oxygen">
<center>
<p>
Video ini di set autoplay & replay jika berakhir ↓</p>
<video width="320" height="240" controls="controls" autoplay="autoplay"
loop="loop">
<source src="Media/1D - You and I.mp4" type="video/mp4">
jika tidak autoplay, browser yang digunakan tidak mendukung.
</video>
<p>
</p>
<video width="320" height="240" controls poster="Media/poster.jpg">
<source src="Media/1D - You and I.mp4" type="video/mp4">
browser anda tidak mendukung format video ini.
</video>
</center>
</font>
</body>
</html>
Hasil
G. Challenge 2! Multimedia Layout Page
Syntax Pembuatan Multimedia Layout Page :
<html>
<head><title>Challenge Multimedia Layout Page, by Fadli Mahesa</title>
</head>
<body>
<center>
<font face="source sans pro semibold, zona pro bold">
<table border="0" bgcolor="silver">
<tr>
<td colspan="3" bgcolor="darkgrey">
<font size="6 pt">
<center>G-DRAGON</center>
</font>
</td>
</tr>
<tr>
<td colspan="3" bgcolor="lightgrey">
Welcome to my site!
</td>
</tr>
<tr>
<td rowspan="4">
<img src="Media/GDr.png" alt="G-D Wallpaper" width="190px" height="339px">
</td>
<td>Him Name</td>
<td>Kwon Ji-yong</td>
</tr>
<tr>
<td>Him Birthday</td>
<td>18 Agustus 1988</td>
</tr>
<tr>
<td>Fav Song Form Him</td>
<td>
<audio controls>
<source src="Media/G-DRAGON - Untitled.mp3" type="audio/mp3">
</audio>
</td>
</tr>
<tr>
<td>Fav Music Video Form Him</td>
<td>
<video width="320" height="240" controls="controls" autoplay="autoplay" loop="loop">
<source src="Media/G-DRAGON MV.mp4" type="video/mp4">
</video>
</td>
</tr>
<tr>
<td colspan="3" bgcolor="lightgrey">
Thank's for coming my page.
</td>
</tr>
<tr>
<td colspan="3" bgcolor="black" align="center">
<font size="6 pt" color="white">COPYRIGHT ALE</font>
</td>
</tr>
</table>
</font>
</center>
</body>
</html>
Hasil
0 komentar: