HTML (Hypertext Markup Language)
adalah bahasa markup yang digunakan untuk membuat website, nah jadi untuk membuat sebuah website kita memerlukan syntax html.
Dalam HTML kita akan mengenal beberapa istilah dibawah ini :
1. Push Buttons
Push Buttons terdiri dari 2 jenis :
- Submit Button : Tombol ini berfungsi untuk memproses form.
<input type = "submit" value="submit">
- Reset Button : Tombol ini berfungsi untuk mengosongkan isian form.
<input type = "reset" value="reset">
2. Radio Buttons
Tombol ini berfungsi untuk memasukkan pilihan (hanya satu pilihan) . Contohnya pilihan jenis kelamin
Syntax
<input type="radio" name="jk" value="Laki-laki">Laki-Laki</input>
<input type="radio" name="jk" value="Laki-Perempuan">Perempuan</input>
Fitur untuk pilihan yang dapat dicentang lebih dari satu pilihan
Syntax
<input type="checkbox" name="hobi" value="Berenang">Berenang</input>
<input type="checkbox" name="hobi" value="Basket">Basket</input>
<input type="checkbox" name="hobi" value="Basket">Voly</input>
4. Combo Boxes
Fitur untuk memilih salah satu pilihan, dengan tampilan drop down.
Syntax
<select>
<option value="Pekanbaru">Pekanbaru</option>
<option value="Jakarta">Jakarta</option>
<option value="Medan">Medan</option>
<option value="Bandung">Bandung</option>
</select>
5. List Boxes
Fungsinya sama dengan combo boxes di atas, hanya saja berbeda pada tampilannya, yaitu list box dapat di scroll.
Syntax
<select name="Kota" multiple="multiple">
<option>Pekanbaru</option>
<option>Jakarta</option>
<option>Medan</option>
<option>Bandung</option>
<option>Surabaya</option>
</select>
6. Text Control
Text Control terbagi menjadi 3 :
- Text Field : Text box inputan yang menerima inputan berupa tulisan / text. Contohnya inputan nama, alamat, username, dan lain lain yang merupakan inputan text pendek.
Nama : <input type="text">
- Password Field : Text box inputan yang menerima inputan berupa password, tampilannya sama dengan text field hanya saja, inputan yang dimasukkan nantinya akan tampak berupa **** atau ••••
Password : <input type="password">
- Text Areas : Berfungsi sebagai kolom area teks yang dapat menampung karakter
Alamat : <text area cols="30" rows="10">
7. Form
Merupakan salah satu elemen html yang digunakan untuk menerima inputan data dari pengunjung melalui sebuah form pengunjung pada halaman web yang dapat melakukan interaksi dengan web.
Syntax
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
8. File Upload
Fitur untuk meng-upload file sesuai dengan kebutuhan
Syntax
Masukkan file :
<input type="file">
</input>
9. Server Side Image Maps
Berfungsi untuk menyimpan definisi map ke dalam server. Contohnya pada sebuah gambar peta dunia, terdapat pula beberapa gambar benua di dalamnya, maka ketika kita mengklik gambar benua asia contohnya, maka akan keluar informasi mengenai benua asia.
Syntax :
<a href="/action_page.php">
<img src="w3html.gif" alt="W3Schools.com" width="100" height="132" ismap>
</a>
Misalnya pada gambar di bawah kita klik terserah dibagian mana saja.
10. Hidden Fields
Berfungsi untuk mengirim data ke suatu halaman ke halaman yang lain tanpa mengganggu bentuk form yang ada, biasa digabyngkan dengan proses javascript/php
Syntax
<form action="/action_page.php">
First name: <input type="text" name="fname"><br>
<input type="hidden" name="country" value="Norway">
<input type="submit" value="Submit">
</form>
<p>Perhatikan bahwa fields bertipe data hidden tidak terlihat oleh user.</p>
Sumber : w3schools.com
11. Grouping Controls
Berfungsi untuk mengelompokkan beberapa selector maupun tag html agar terlihat lebih rapi
Syntax
<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
</form>
12. Method Pengiriman Data
Dalam pengiriman data terdapat 2 method :
1.Post
Pada method post ini memiliki beberapa karakteristik, yaitu :
- Tidak menampilkan nilai variabel ada URL
- Lebih aman karena password tidak tampil pada URL
- Dibatasi panjang string
- Method post biasanya digunakan untuk input dari form
- Untuk mengirim data rahasia
- Dibatasi ukuran filenya 8mb hanya saja dapat diubah pada pengaturan
Syntax
<form action ="thanks.html" method ="post">
nama : <input type = "text" name="nama">
pass : <input type = "password" name="pass">
<input type="submit">
</form>
Contohnya pada pengiriman form diatas menggunakan method "POST", ketika kita menekan tombol submit maka yang akan muncul di URL nya akan tampak seperti berikut ini :
2.Get
Pada method post ini memiliki beberapa karakteristik, yaitu :
- Menampilkan nilai variabel yang dikirimkan
- Kurang aman karena password ditampilkan pada URL
- Dibatasi string hingga 2047 karakter
- Menggunakan input dari link / akses menggunakan link
- Digunakan untuk mengirim / mengambil data publik
Syntax
<form action ="thanks.html" method ="get">
nama : <input type = "text" name="nama">
pass : <input type = "password" name="pass">
<input type="submit">
</form>
Contohnya pada pengiriman form diatas menggunakan method "GET", ketika kita menekan tombol submit maka yang akan muncul di URL nya akan tampak seperti berikut ini :
Tampak perbedaan antara URL yang menggunakan method POST dan GET adalah nilai yang kita kirimkan menggunakan method POST tidak tampak, sedangkan pada method GET nilai yang dikirimkan ditampilkan pada URL.
Sumber : wikipedia.co.id
Sekian pembahasan mengenai HTML kali ini, mohon maaf jika terdapat kesalahan karena saya masih belejar. Terimakasih sudah membaca 😀😀😀😀
7. Form
Merupakan salah satu elemen html yang digunakan untuk menerima inputan data dari pengunjung melalui sebuah form pengunjung pada halaman web yang dapat melakukan interaksi dengan web.
Syntax
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
8. File Upload
Fitur untuk meng-upload file sesuai dengan kebutuhan
Syntax
Masukkan file :
<input type="file">
</input>
9. Server Side Image Maps
Berfungsi untuk menyimpan definisi map ke dalam server. Contohnya pada sebuah gambar peta dunia, terdapat pula beberapa gambar benua di dalamnya, maka ketika kita mengklik gambar benua asia contohnya, maka akan keluar informasi mengenai benua asia.
Syntax :
<a href="/action_page.php">
<img src="w3html.gif" alt="W3Schools.com" width="100" height="132" ismap>
</a>
Misalnya pada gambar di bawah kita klik terserah dibagian mana saja.
kemudian maka ketika diklik, akan mengantarkan kita ke suatu halaman yang berisikan koordinat dari gambar tersebut
Sumber : w3schools.com
10. Hidden Fields
Berfungsi untuk mengirim data ke suatu halaman ke halaman yang lain tanpa mengganggu bentuk form yang ada, biasa digabyngkan dengan proses javascript/php
Syntax
<form action="/action_page.php">
First name: <input type="text" name="fname"><br>
<input type="hidden" name="country" value="Norway">
<input type="submit" value="Submit">
</form>
<p>Perhatikan bahwa fields bertipe data hidden tidak terlihat oleh user.</p>
namun ketika di submit, data fields yang bertipe hidden tetap terkirim
Sumber : w3schools.com
Berfungsi untuk mengelompokkan beberapa selector maupun tag html agar terlihat lebih rapi
Syntax
<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
</form>
12. Method Pengiriman Data
Dalam pengiriman data terdapat 2 method :
1.Post
Pada method post ini memiliki beberapa karakteristik, yaitu :
- Tidak menampilkan nilai variabel ada URL
- Lebih aman karena password tidak tampil pada URL
- Dibatasi panjang string
- Method post biasanya digunakan untuk input dari form
- Untuk mengirim data rahasia
- Dibatasi ukuran filenya 8mb hanya saja dapat diubah pada pengaturan
Syntax
<form action ="thanks.html" method ="post">
nama : <input type = "text" name="nama">
pass : <input type = "password" name="pass">
<input type="submit">
</form>
Contohnya pada pengiriman form diatas menggunakan method "POST", ketika kita menekan tombol submit maka yang akan muncul di URL nya akan tampak seperti berikut ini :
2.Get
Pada method post ini memiliki beberapa karakteristik, yaitu :
- Menampilkan nilai variabel yang dikirimkan
- Kurang aman karena password ditampilkan pada URL
- Dibatasi string hingga 2047 karakter
- Menggunakan input dari link / akses menggunakan link
- Digunakan untuk mengirim / mengambil data publik
Syntax
<form action ="thanks.html" method ="get">
nama : <input type = "text" name="nama">
pass : <input type = "password" name="pass">
<input type="submit">
</form>
Tampak perbedaan antara URL yang menggunakan method POST dan GET adalah nilai yang kita kirimkan menggunakan method POST tidak tampak, sedangkan pada method GET nilai yang dikirimkan ditampilkan pada URL.
Sumber : wikipedia.co.id
Sekian pembahasan mengenai HTML kali ini, mohon maaf jika terdapat kesalahan karena saya masih belejar. Terimakasih sudah membaca 😀😀😀😀
