HTML Form

Pengertian

Form pada HTML digunakan untuk mengambil input yang ditujukan kepada user.
Syntax :

<form> . . Element dari form . . </form>

Atribut yang terdapat dalam tag <form>

Atribut	Value	Keterangan
action	url yang dituju	Merupakan tujuan dimana data-data yang berasal dari elemen-elemen form akan dikirim. Jika tidak dibuat maka tujuannya adalah halaman itu sendiri
method	get atau post	get -> data yang dikirim akan muncul di address. Tidak tepat apabila menggunakannya untuk memngirim data-data sensitif. Memiliki keterbatasan ukuran data, sehingga hanya untuk data-data yang sedikit. post data yang dikirim tidak ditampilkan pada bagian address. tidak ada batasan seberapa banyak data yang akan dikirim.
enctype	nilai enctype	Hanya bisa digunakan ketika method="post" Menentukan tipe penyamaran dari data yang akan di kirim

Jenis-jenis nilai atribut enctype

Nilai	Keterangan
application/x-www-form-urlencoded	Semua karakter di enskripsi sebelum dikirim (spasi dikonversi menjadi simbol "+" dan karakter spesial dikonversi dalam bentuk kode Ascii Hex
multipart/form-data	Tidak ada karakter yang di enkripsi. jenis ini biasa digunakan saat upload file
text/plain	Spasi dikonversi ke simbol "+". Tetapi karakter spesial tidak di enskrip

Objek Input

Objek input merupakan jenis-jenis input yang difungsikan untuk mengambil data yang diperlukan dari user. Sehingga, pengambilan data dapat dilakukan dengan efisien. objek input berupa button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, seubmit, tel, text, time, url, week.

Syntax

<input type = "Tipe objek"/>

Text Box (1 baris)

 Digunakan untuk menginput data 1 baris (tulisan tidak di wrap ke bawah)

Syntax :

<input type = "text" name = "?" value = "?"/>

Attribute TextBox 1 baris

Atribut	Nilai	Keterangan
name	<nama>	(wajib ada) untuk memberi nam objek
value	<teks>	Teks default ditampilkan. Ketika form direset, maka teks ini yang muncul
minlength	<jumlah karakter>	Membatasi jumlah minimum karakter input
maxlength	<jumlah karakter>	Membatasi jumlah maksimum karakter input
placeholder	<teks>	Digunakan sebagai petunjuk untuk input apa teksbox tersebut. Tulisan ditampilakn didalam texbox apabila value textbox tidak ada.
size	<jumlah karakter>	Mengatur tempat isian (jumlah karakter). Default ukuran untuk 20karakter
readonly	readonly	Teks tidak bisa diubah
required	required	Input harus diisi sebelum disubmit
disabled	disabled	Input tidak dapat dilakukan dilakukan (mematikan textbox).
autocomplete	on atau off	Fitur autocomplete ditampilkan atau tidak
autofocus	autofocus	Mem-fokuskan kursor ketika halaman ditampilkan
list	<id datalist>	Memunculkan nilai tambahan yang didefinisikan dengan elemen datalist

Contoh :

 

Label

 Fungsi dari label adalah untuk mendefinisikan keterangan untuk elemen lain. ketika teks label di klik maka elemen yang berhubungan akan ikut terpilih.

Syntax :

<label for = "id elemen"> teks </label> <input type = "id elemen">

Contoh :

Masukkan Nama

TextBox Password

 Digunakan untuk input informasi password. Data yang ditampilkan di dalam textbox password hanya berupa karakter pengganti (lingkaran hitam atau '*')
Atribut lainnya : autocomplete, maxlength, minlength, placeholder, readonly, required, dan size.

Syntax :

<input type = "password" name = "?" value = "?"/>

Contoh :

Text Box Multi Baris

 Fungsinya sama seperti textbox hanya saja textbox ini bisa digunakan lebih dari 1 baris. Teks ditampilkan dengan fixed-width, dan font (Courier)

Syntax

<textarea name = "?">...</textarea>

Attribut yang umum dipakai :

Atribut	Value	Keterangan
rows	<jumlah baris>	Ukuran Input untuk n baris
cols	<jumlah kolom>	Ukuran input untuk n kolom
Wrap	hard atau soft	Mengatur Penggulungan teks. Hard -> Teks mengandung CR+LF (digulung) saat submit. Soft -> Teks tidak mengandung CR+LF (digulung) saat submit.

Atribut lainnya: cols, rows, wrap, autocomplete, autofocus, disabled, maxlength, minlength, placeholder, readonly, dan required.
Contoh :

Drop Down List

 Mendefinisikan drop-down list.

Syntax :

<select name = "?">  <option value = "?"> Opsi 1 </option>  <option value = "?"> Opsi 2 </option> </select>

Atribut umum yang sering dipakai :

Atribut	Value	Keterangan
multiple	multiple	Membuat agar opsi dapat dipilih lebih dari satu
size	<numerik>	Jumlah baris listbox ketika ditampilkan

Atribut lainnya : multiple, autofocus, disabled, required, dan size.
Contoh :

Teh Kopi

Elemen <optgroup> ... </optgroup>
 Digunakan untuk mengelompokkan beberapa opsi dalam dropdown list.

Syntax

<select name = "?">  <optgroup label = "?">   <option value = "?"> Opsi 1 </option>   <option value = "?"> Opsi 2 </option> </optgroup> </select>

Atribut Option :

Atribut	Value	Keterangan
disabled	disabled	Menonaktifkan isian/pilihan
label	<teks>	Menampilkan teks label grup
disabled	disabled	Menonaktifkan isian/pilihan
label	<teks>	Memunculkan isian teks yang disingkat
selected	selected	Input harus diisi/dipilih sebelum disubmit

Contoh :

Nasi Goreng Nasi Goreng Cabe Hijau Smirnoff Carlsberg

RadioButton

 Digunakan untuk memilih hanya satu dari banyak pilihan

Syntax

<input type = "radio" name = "?" value = "?" >

Atribut lainnya :

Atribut	value	Keterangan
checked	checked	Membuat checkbox terpilih secara default

Contoh :

Laki-laki Perempuan

CheckBox

 Digunakan untuk memilih satu atau lebih dari beberapa pilihan yang tersedia.

Syntax

<input type = "checkbox" name = "?" value = "?" />

atribut lainnya :

Atribut	Value	Keterangan
checked	checked	Membuat checkbox terpilih secara default

Contoh :

Hobby Musik Sport

GroupBox

 Untuk mengelompokkan elemen-elemen yang berhubungan dalam sebuah form. Elemen lain diletakkan pada sebuah kotak yang memiliki judul

Syntax :

<fieldset>  <legend>judul grup </legend>  .......elemen lainnya....... </fieldset>

Contoh :

Hobby Musik Sport

Tombol Submit

 Untuk mengirimkan hasil input/pilih dari client ke server yang dituju.

Syntax 1 :

<input type = "submit" name = "?" value = "?"/>

Syntax 2 :

<button type = "submit" name = "?"> Teks atau Gambar </button>

Syntax 3 :

<input type = "image" name = "?" src = "?" alt = "?"/>

Atribut terkait :

Atribut	Value	keterangan
formaction	<URL>	URL tujuan pengiriman data dari elemen form. Atribut ini mengabaikan atribut action pada elemen form
formenctype	<nilai enctype>	Menentukan bagaimana data di-encode ketika dikirim ke server (hanya jika menggunakan method = "post"). Atribut ini mengabaikan atribut enctype pada elemen form

Contoh :

Tombol Reset

 Dapat digunakan untuk mengembalikan nilai elemen form ke nilai default

Syntax 1:

<input type = "reset" value = "?" />

Syntax 2

<button type = "reset"> Teks atau Gambar </button>

Tombol Sederhana

 Digunakan untuk klik tanpa ada event handler default (fungsi bisa di custom).

Syntax 1 :

<input type = "button" name = "?" value = "?" />

Syntax 2

<button type = "button" name = "?"> Teks atau Gambar </button>

Objek Hidden

 Digunakan untuk mendefinisikan field yang disembunyikan. Sering dipakai untuk menyimpan nilai default atau mendapatkan nilai dari JavaScript.

Syntax :

<input type = "hidden" name = "?" value = "?">

Objek File Upload

 Digunakan untuk memilih satu atau lebih file dari media penyimpanan.

Syntax :

<input type = "file" name = "?" />

Atribut lainnya

Atribut	Nilai	Keterangan
accept	Ekstensi file seperti .jpg, .xlsx, .docx audio/* video/* image/*	Mendefinisikan tipe file yang dapat diterima oleh server
multiple	multiple	File yang dipilih lebih dari satu
required	required	File harus dipilih sebelum disubmit (digunakan untuk validasi)

Color Picker

 Objek yang difungsikan untuk mempermudah memilih atau input warna. Objek ini tidak ada di semua browser, sehingga hanya browser - browser tertentu saja yang dapat menampilkan objek ini secara default.

Syntax :

<input type = "color" name = "?" value = "?" />

adapun atribut lainnya yang biasa dipakai yaitu autocomplete dan list.

Contoh :

DateTimePicker

 Digunakan untuk pengambilan date, time, date dan time, bulan dan tahun. Validasi input secara otomatis.

Syntax :

<input type = "date" name = "?" value = "?" />

<input type = "time" name = "?" value = "?" />

<input type = "datetime-local" name = "?" value = "?" />

<input type = "month" name = "?" value = "?" />

<input type = "week" name = "?" value = "?" />

Format Value

• date="yyyy-MM-dd"
• time="HH:mm:ss"
• datetime-local="yyyy-MM-ddTHH:mm"
• month="yyyy-MM"
• week="yyyy-Www"

Atribut Lainnya:

Atribut	Nilai	Keterangan
min	<date time>	Mendefinisikan minimum datetime yang dapat dipilih
max	<date time>	Mendefinisikan maximum datetime yang dapat dipilih

Input Email

 Digunakan untuk input alamat email. Tergantung kepada web browser, alamat email divalidasi otomatis saat disubmit.

Syntax :

<input type = "email" name = "?" value = "?" />

Atribut lainnya

• autocomplete
• list
• maxlength
• maxlength
• minlength
• multiple
• placeholder
• readonly
• size

NumericUpDown

 Digunakan untuk input numerik dengan validasi otomatis.

Syntax :

<input type = "number" name = "?" value = "?" />

Atribut Lainnya

• min
• max
• step
• autocomplete
• list
• placeholder
• readonly

Atribut	Nilai	Keterangan
min	<numerik>	Mendefinisikan minimum numerik yang dapat dipilih
max	<numerik>	Mendefinisikan maximum numerik yang dapat dipilih
step	<numerik>	Mendefinisikan perubahan nilai increase dan decrease saat tombol navigasi updown diklik

TrackBar

 Digunakan untuk menginput numerik.

Syntax :

<input type = "range" name = "?" value = "?" />

Atribut Lainnya

• min
• max
• step
• autocomplete
• list

Atribut	Nilai	Keterangan
min	<numerik>	Mendefinisikan minimum yang dapat dipilih
max	<numerik>	Mendefinisikan maximum numerik yang dapat dipilih
step	<numerik>	Mendefinisikan perubahan nilai increase dan decrease saat tombol navigasi updown diklik

Contoh :

Input Pencarian

 Digunakan untuk melakukan pencarian teks.

Syntax :

<input type = "search" name = "?" value = "?" />

Atribut Lainnya

• autocomplete
• list
• maxlength
• placeholder
• required
• size

Input Nomor Telepon

 Digunakan khusus untuk input nomor telepon. Nilai ini tidak otomatis divalidasi saat submit karena format nomor telepon di dunia berbeda.

Syntax :

<input type = "tel" name = "?" value = "?" />

Atribut Lainnya

• autocomplete
• required

Input URL

 Digunakan untuk input URL.

Syntax :

<input type = "url" name = "?" value = "?" />

Atribut Lainnya :

• autocomplete
• list
• maxlength
• minlength
• placeholder
• readonly
• size

Elemen DataList

 Digunakan untuk menyediakan berbagai nilai untuk elemen form lainnya. User melihat drop down list ketika input data.

Syntax :

<input type = "?" list = "id elemen" /> <datalist id = "id elemen">   <option value = "teks1"/>   <option value = "teks2"/>   dstnya.... </datalist>

Contoh :

Contoh Form Pendaftaran dengan menggunakan Objek input Email, Password, DateTimePicker, NumericUpDown, dan Gambar Submit, serta button sederhana menggunakan gambaryang digunakan untuk reset.
(untuk membuka file silahkan menggunakan browser google atau Firefox karena ada beberapa objek input yang tidak disupport oleh browser lain.)
Silahkan Download Di Sini

Table

Table dapat digunakan untuk mempermudah penguna. Dengan tabel pengguna dapat melihat informasi seperti angka, teks, gambar dan objek multimedia.
Tabel juga dapat digunakan untuk menampilkan data tabular (disusun dalam baris dan kolom).

1. Tag table Tabel adalah pembuka dari pembuatan table dimana tag table ini yang kita awali untuk pembuatan table di blok kita.
2. Tag TR Tag TR adalah tag yang berfungsi untuk membuat baris dalam sebuah table
   
3. Tag TH Tag TH memiliki atribut ALIGN untuk mengatur Alignment horizontal dan VALIGN untuk mengatur alignment Vertikal.
   
4. Tag TD Tag TD berfungsi untuk mengatur atau menampilkan data dalam setiap sel tabel atau secara umum untuk membuat kolom dalam baris table.

Contoh : 

Spanning Cell

Digunakan untuk menggabunkan beberapa cell terdiri dari 2 jenis spanning style yaitu :

colspan	Untuk menggabungkan kolom
rowspan	Untuk menggabungkan Baris

Contoh :

Aksesibilitas Tabel

• Untuk membuat konten table semakin mudah dipahami.
• Tag <caption> ... </caption>  untuk memberi judul atau deskripsi singkat pada table.
• Peletakan tag <caption> ... </caption> harus pertama kali setelah tag <table>

Contoh :





[Kembali ke Image, ImageMap dan Multimedia]

Image, ImageMap dan Multimedia

Pengantar

Selain tulisan, web dapat memuat gambar, animasi, grafik, audio, dan video. Untuk gambar, Format yang biasanya digunakan antara lain : GIF (Graphic Interchange Format), PNG (Portable Network Graphics) dan JPEG (Joint Photographic Experts Group).

Element Gambar HTML

• Gambar didefinisikan menggunakan tag <img>.
  
  

  <img src = "url" alt = "some_text" style = "width:width;height:height;">

  
  
• Termasuk empty element, sehingga bisa juga ditulis dengan <img/>
• Attribut:
  • src: nama file gambar (lengkap dengan Url jika merupakan gambar eksternal, relative path jika merupakan gambar pada website yang sama).
  • alt: teks alternatif jika gambar tidak dapat ditampilkan (karena koneksi lambat atau kesalahan pada atribut src).
  • Style: dapat mengatur lebar (width), tinggi (height) gambar, mengatur peletakkan gambar ke kiri atau ke kanan (float), garis pinggir (border).

Contoh :

Tag <figure> dan <figcaption>

• <figure> digunakan bersamaan dengan <figcaption> untuk menandai diagram, ilustrasi, atau foto.
• <figcaption> mendefinisikan caption (judul) untuk untuk tag <figure> biasa diletakan dibawah gambar yang menjadi figure.

contoh:

Tag <picture> dan <source>

• Tag <picture> untuk menambah fleksibilitas ketika menampilkan gambar yang dapat terdiri dari berbagai tag <source>
• Tag <source> untuk mereferensikan berbagai sumber gambar.

contoh:

*note: srcset dan src berisi url dimana file disimpan

Hasil : 

Ketika browser di zoom

Untuk lebih jelasnya silahkan zoom gambar dibawah ini untuk melihat perubahan dengan menekan tombol Ctrl + Scroll Up

Image Map

Merupakan gambar dengan area yang dapat diklik dan menampilkan halaman lainnya.

Jenis - jenis image map :

• Polygon
  
  
  
  
• Rectangle
  
  
  
  
  
  
• Circle
  
  
  
  

Contoh Image Map :

Source : https://www.techadvisor.co.uk/feature/pc-components/amd-vs-intel-3528212/

Video dan Audio

Tag yang digunakan :

• Tag <video> memutar video dengan format : MP4, WebM dan Ogg.
• Tag <audio> memutar audio dengan format : MP3, Wav dan Ogg.
• Tag <source> mendefinisikan berbagai sumber media untuk diputar pada tag <video> dan <audio>.

Contoh :

contoh detail : 

[Lanjutkan ke Table]