Bootstrap

Pengenalan Bootstrap

Apa itu Bootstrap?.Bootstrap adalah library framework CSS yang dibuat untuk mempermudah developer maupun pengguna awam untuk merancang tampilan website yang responsif. Dengan menambahkan class - class tertentu yang sudah disediakan framework Bootstrap ini kita sudah bisa membuat tampilan menarik nan responsif dengan sangat mudah. Misalnya untuk membuat tombol, navigasi, grid, dsb.

Referensi : https://www.malasngoding.com/pengertian-dan-cara-menggunakan-bootstrap/

Asal-usul

Sedikit asal-usul tentang Bootstrap. Awalnya Bootstrap bernama Twitter Blueprint, dikembangkan oleh Nirav Panchal dan Jacob Thornton di Twitter sebagai kerangka kerja untuk mendorong konsistensi di perangkat internal yang sesuai. Sebelum Bootstrap, berbagai library (kumpulan kode-kode pemrograman) sudah banyak digunakan untuk pengembangan antarmuka, yang menyebabkan ketidak-konsistenan dan beban pemeliharaan yang berat. Menurut Mark Otto, pengembang Twitter:

"Sebuah grup developer super kecil dan juga aku telah bersama-sama untuk mendesain dan membangun perangkat internal baru dan melihat kesempatan untuk melakukan hal yang lebih banyak lagi. Melalui proses itu, kami melihat bahwa kami sedang membangun sesuatu yang lebih substansial dari perangkat internal lainnya. Beberapa bulan kemudian, kami menghasilkan sebuah versi paling awal dari Bootstrap, sebagai sebuah cara untuk berbagi pola desain yang lazim dan dan aset-aset perusahaan."

Setelah beberapa bulan pengembang oleh sebuah kelompok kecil, banyak pengembengan di Twitter mulai memberikan kontribusi untuk proyek ini sebagai bagian dari Hack Week, sebuah pekan ala hackathon untuk tim pengembangan Twitter. Nama itu diganti dari Twitter Blueprint menjadi Bootstrap, dan dirilis sebagai proyek open-source pada 19 Agustus 2011. Hal ini terus dipertahankan oleh Mark Otto, Jacob Thornton, dan sekelompok kecil pengembang inti, serta sejumlah besar komunitas dari para kontributor.

Sumber : https://id.wikipedia.org/wiki/Bootstrap_(framework_front-end)

Cara Install

Untuk Cara Install bisa liat video di bawah ini:

Layout Responsif

Layout

Pengantar

Tujuan membuat layar lebih responsif sangat penting. Alasannya, karena setiap device memiliki rasio layar serta ukuran piksel yang berbeda, sehingga kita web kita harus bisa menyesuaikan ukuran nya secara otomatis dengan device yang user gunakan. Layout yang tidak responsif terhadap setiap device dapat menyebabkan perubahan tata letak yang menjadi tidak seharusnya.

View Port

• Merupakan area yang dapat dilihat oleh pengguna pada halaman web
• viewport bervariasi antara device
• dan viewport Secara garis besar, tag tersebut akan mengatur layout lintas-perangkat untuk anda dengan sendirinya.

Grid View

• banyak halaman web dirancang berdasarkan tampilan grid.
• tampilan grid membagi halaman menjadi berbagai kolom
• grid-view responsif sering terdiri dari 12 kolom dari total 100%
• komponen utama yang dapat menampilkan dan menampung data dalam jumlah yang banyak dalam bentuk grid (baris dan kolom). Biasanya implementasinya adalah menampilkan katalog barang pada mobile commerce, gallery Image dsb.

SUMBER : https://www.slideshare.net/cdiqsanz/layout-listview-gridview-and-adapter

Media Query

Media query terdiri dari jenis media (media type) dan dapat, sesuai dengan spesifikasi CSS3, mengandung satu atau lebih ekspresi, diekspresikan sebagai fitur media, baik benar (true) atau salah (false). Hasil query adalah benar jika jenis media yang disebutkan dalam media query cocok dengan jenis alat yang digunakan untuk menampilkan dokumen dan semua ekspresi di dalam media query adalah benar.
SUMBER : https://developer.mozilla.org/id/docs/Web/Guide/CSS/Media_queries

Mobile First Design

Desain mobile-first mirip dengan merancang aplikasi seluler dan kemudian mengadaptasi tata letak yang dapat dilihat dengan rapi di perangkat tablet dan desktop tanpa terlalu banyak modifikasi. Seluruh desain dan tata letak Anda didasarkan pada penyediaan pengalaman pengguna seluler yang luar biasa: kecepatan unduh yang cepat, konten media yang kaya untuk membuat audiens target Anda tetap tertarik, navigasi layar sentuh yang mudah, dan sebagainya.

Tahapan membuat layout responsif

1. Definisikan meta yang digunakan
   
2. Ketikan Kode berikut pada tag style di bagian head (untuk tampilan dekstop)
   
3. Ketikan juga untuk tampilan Tablet
   
4. Selanjutnya untuk mobile phone
   
5. Jangan lupa menggunakan box sizing untuk setiap tag agar kamu bisa mengetahui tata letaknya (jika sudah benar kalian bisa menghapus box-sizing)
   
6. Pada Tag body ketikan kode seperti berikut
   
7. Hasil
   

Perlu diingat property float adalah hal yang sangat penting dalam layout responsif. Cobalah dengan tanpa menggunakan float pada koding yang sudah dibuat tadi.

Contoh untuk Layout Responsif:

See the Pen Contoh Layout responsif by David Steven (@davidst19) on CodePen.

Gambar Responsif

Membuat Gambar Responsif Denagan elemen img

Gambar Latar Belakang

Untuk Contoh lanjutan Layout Responsif bisa di download di sini

CSS Lanjutan Dan Transisi

Property CSS

Pengantar

CSS umumnya digunakan untuk mengatur dan mengkelompokan property-property yang bisa di implementasi di setiap elemen menjadi satu class, Sehingga dapat mempermudah pengaturan tata letak, property elemen, dsb.
Beberapa property css yang biasa digunakan:

vertical-align

Digunakan Untuk mengatur perataan vertical

list-style-type

Digunakan untuk mengatur simbol untuk ordered/unorderedlist

Keyword	Hasil
none
disc(default dari unorderedlist)
circle
square
decimal(default dari orderedlist)	1,2,3,4,5,....
decimal-leading-zero	01,02,03,04,05,....
lower-alpha	a,b,c,d,...
upper-alpha	A,B,C,D,...
lower-latin	a,b,c,d,...(sama dengan lower-alpha)
upper-latin	A,B,C,D,...(sama dengan upper-alpha)
lower-roman	i,ii,iii,iv,.....
upper-roman	I,II,III,IV,....
lower-greek	α, β, γ, δ, ε, στ,....

list-style-position

Digunakan untuk mengatur peletakan posisi simbol list. Terdiri dari 3 jenis

• Outside
• Inside
• Inherit

contoh Outside:

• Satu
• Dua
• Tiga

Contoh Inside

• Empat
• Lima
• Enam

list-style-image

Digunakan untuk menggantikan simbol list yang sudah ada pada html dengan gambar. File gambar yang direkomendasikan umumnya berekstensi .ico
Contoh :

• List 1
• List 2
• List 3

color dan background color

• color -> digunakan untuk mengatur warna tulisan
• background-color -> digunakan untuk megubah warna latar belakang dari html.

contoh:

See the Pen aPZvqq by David Steven (@davidst19) on CodePen.

opacity

digunakan untuk mengatur tingkat ke-tranparan. value hanya bernilai 0 s/d 1 saja. Contoh:

See the Pen opacity by David Steven (@davidst19) on CodePen.

pseudo-class selector

 Digunakan untuk mendefinisikan status khusus bagi element selector. Cara kerja nya seperti event. Misalnya, ketika link diklik maka tulisan akan berubah menjadi warna merah, atau ketika kursor mouse digerakan mengarah pada suatu objek maka objek tersebut akan menjadi besar, dsb.
Umumnya ada 2 jenis pseudo-class selector yaitu :

• Link pseudo-class
  

  :link	Untuk menerapkan style apa yang diberikan pada link ketika link belum diklik
  :visisted	Untuk menerapkan style apa yang diberikan pada link ketika link sudah diklik

• User action pseudo-class

• :focus	diterapkan ketika element dipilih dan siap untuk diinput
  :hover	diterapkan ketika pointer mouse berada di atas element
  :active	diterapkan ketika element(seperti link atau button) sudah diklik dan sedang menjalankan proses

Contoh:

Arahkan Mouse ke sini liat apa yang terjadi

Pseudo-element Selector

Mendefinisikan style untuk bagian tertentu dari elemen.
Terdiri dari :

• Huruf Awal & Baris Pertama
• Style sebelum dan sesudah.

Contoh:

See the Pen Pseudo-Element Selector by David Steven (@davidst19) on CodePen.

Menambah Gambar Latar Belakang

 Property yang umum digunakan untuk menambah latar belakang atau background antara lain:

• background
• background-image
  Values:
  • url(lokasi gambar)
  • none
  • inherit
• background-repeat
  Values
  • repeat
  • repeat-x
  • repeat-y
  • no-repeat
  • inherit
• background-position

  Values : length measurement | percentage | left | center | right | top | bottom | inherit

• background-attachment
  

  Values : scroll | fixed | local (new in CSS3) | inherit

  
  
  
  • background-attachment : scroll;
    
     Ketika kita men-scroll tulisan ke bawah atau keatas, gambar background juga ikut berpindah sesuai dengan scroll
  • background-attachment : fixed;
    
     Kebalikan dari scroll. Ketika kita men-scroll ke bawah maupun ke atas, gambar latar belakang posisinya akan tetap.

Poperty yang ada pada background

background values : background-color background-image background-repeat background- attachment background-position | inherit

Gradient

 Merupakan transisi dari warna yanng satu ke warna yang lainnya. Dapat diterapkan pada : background-image, border-image, dan list-style-image
Ada 2 tipe gradient pada Html, yaitu :

• Linear gradient -> perubahan warna sepanjang garis, dari ujung sebuah elemen ke elemen lainnya.
• Radial gradient -> perubahan warna dari sebuah titik dalam bentuk lingkaran atau elips.

Linear Gradient  Perubahan Warna dari atas ke bawah, Kiri ke kanan, dan kebalikannya.

#stylinear{ background-image : linear-gradient(left, red,orange,yellow,lime,green,blue);}

Hasil:

Radial Gradient  Perubahan warna dari pusat ke daerah sekeliling dalam bentuk lingkaran. Bentuk radial biasanya dimulai dari titik tengah yang membentuk elips.

#styradial{ background-image : radial-gradient(#e66465, #9198e5)}

Hasil:

Box Model

 Setiap elemen HTML (block dan inline ) memiliki kotak, sehingga bisa menginplementasikan property width, height, padding, border, dan margin.

   Box-Sizing

Overflow

 Overflow Berfungsi ketika ukuran elemen terlalu kecil untuk membuat konten. Kita bisa mengaturnya dengan overflow agar konten terlihat rapi.

overflow Values: visible | hidden | scroll | auto | inherit

Contoh:

See the Pen Radial Gradient by David Steven (@davidst19) on CodePen.

padding

 Untuk mengatur jarak antara konten dengan border. 

border-style property

 Digunakan untuk mengatur jenis border untuk suatu elemen

border-style value: none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit default: none Applies to: all element

Contoh:

See the Pen Jenis border by David Steven (@davidst19) on CodePen.

border-color property

 Digunakan untuk mengganti warna border. Property border bisa kita bagi menjadi beberapa bagian yaitu:

• border-top-color -> digunakan untuk mengubah warna bagian atas border
• border-right-color -> digunakan untuk mengubah warna bagian kanan border
• border-left-color -> digunakan untuk mengubah warna bagian kiri border
• border-right-color -> digunakan untuk mengubah warna bagian bawah border
• border-color -> untuk mengubah keseluruhan wana sisi border

Contoh:

See the Pen Border-Color by David Steven (@davidst19) on CodePen.

margin property

  Digunakan untuk mengatur letak elemen. Margin ini membanding kan ukuran berdasarkan layar, yang artinya terkadang ketika di komputer kita posisinya sudah pas, tetapi belum tentu pas pada komputer orang lain.
Contoh:

See the Pen Margin by David Steven (@davidst19) on CodePen.

display property

Fungsi property CSS Display adalah untuk menentukan bagaimana suatu elemen ditampilkan. Fungsi property CSS Display ini hampir mirip dengan property CSS Visibility, kedua-duanya memiliki fungsi untuk menyembunyikan suatu elemen. Selain untuk menyembunyikan suatu elemen fungsi property CSS Display ini mempunyai fungsi lainnya yaitu untuk membuat suatu Tag yang betipe block menjadi tidak bertipe block, atau sebaliknya membuat Tag yang tidak bertipe block menjadi Tag yang bertipe block.
SUMBER : https://www.dumetschool.com/blog/Fungsi-Property-CSS-Display
Contoh:

See the Pen Display Property by David Steven (@davidst19) on CodePen.

box-shadow property

CSS Box Shadow adalah suatu deklarasi bagaimana menciptakan efek bayangan suatu area sama seperti hal-nya dengan CSS Border Radius, CSS Box Shadow memiliki Properti disetiap Pramban yang dipergunakan dan memiliki fungsi menciptakan efek bayangan keluar dan kedalam dari objek area, yaitu :

• -webkit-box-shadow (Properti Safari dan Chrome)
• -moz-box-shadow (Properti Modzilla Firefox)
• box-shadow (Properti W3C)

SUMBER : http://wongwayang.blogspot.com/2013/02/css-box-shadow.html
Contoh:

See the Pen Box Shadow by David Steven (@davidst19) on CodePen.

float property

Teknik Floating pada bagian web design merupakan sebuah kebutuhan yang paling banyak di perlukan. floaat berfungsi untuk mengatur letak element secara horizontal. ada empat value yang bisa digunakn untuk property float, yaitu left, rigth inherit dan none.
Salah satu contoh penggunaan float yang paling sering di temukan ketika adalah ketika kita ingin membuat gambar potingan website yang terletak di bagian sampng tulisan konten.
SUMBER : https://www.malasngoding.com/belajar-css-menggunakan-float-css/

relative positioning

Posisi elemen tetap mengikuti alur dokumen, hampir sama dengan value static. Yang menjadi perbedaan yaitu, value top, bottom, left, right akan berfungsi. Pengaturan posisi pada suatu elemen menggunakan value tersebut akan “mendorong” elemen tersebut ke arah yang diinginkan. jadiproperti relative ini bergantung pada posisi elemen yang ada diatas / elemen sebelumnya.
SUMBER : https://belajarkoding.net/perbedaan-css-position-static-relative-absolute-fixed-dan-inherit/ Contoh:

See the Pen Relative Positioning by David Steven (@davidst19) on CodePen.

absolute positioning

Elemen akan dihilangkan / dicabut dari alur dokumen, dan elemen lainnya akan bekerja sebagaimana mestinya (tidak terganggu dengan elemen yang diberikan properti absolute). Apabila element yang mempunyai properti absolute tersebut ada didalam sebuah element lagi (parent), maka element tersebut akan diabaikan, seakan-akan elemen tersebut tidak ada di dalam element parent tersebut
SUMBER : https://belajarkoding.net/perbedaan-css-position-static-relative-absolute-fixed-dan-inherit/ Contoh:

See the Pen Aboslute Positioning by David Steven (@davidst19) on CodePen.

CSS Transition

• Sebelumnya efek animasi hanya dapat dilakukan oleh tools flash atau java script
• CSS TRANSITION telah dapat membuat efek yaitu menghaluskan perubahan dari setiap state ke state lainnya
• ADa 4 hal yang perlu dilihat yaitu :
  • Transition Property -> berisikan property css
  • Transition Duration -> durasi yang didbutuhkan untuk menyelasaikan animasi(satuan s atau ms)
  • Transition Timing Function -> TIpe Transisi
  • Transition Delay -> durasi untuk memulai animasi

Transition Property NEW IN CSS3 Values Property Name | all | None Default all Applies to all elemens : before and: after pseudo-elements	Transition Duration NEW IN CSS3 Values TIME Default 0s Applies to all elemens : before and: after pseudo-elements
Transtion Timing Function NEW IN CSS3 Values ease | linear | ease - in | ease - out | ease - in - out | step - start | step - and | steps | cubic bezier (#,#,#,#) Default ease Applies to all elemens : before and: after pseudo-elements	Transition Delay NEW IN CSS3 Values TIME Default 0s Applies to all elemens : before and: after pseudo-elements

Contoh:

See the Pen Menu by David Steven (@davidst19) on CodePen.

Belajar CSS

Pengenalan

CSS (Cascading Style Sheet) Merupakan standard W3C untuk mendefinisikan presenetasi dokumen HTML. Terdiri dari satu atau lebih dari satu instruksi yang menguraikan bagaimana elemen atau grup elemen ditampilkan. Simple nya, bagaimana kita mendefinisikan suatu tag itu seperti jenis fontnya, ukuran nya, dekorasi teksnya dsb. Ataupun kita bisa membuat suatu class yang isi dari jenis stylenya bisa digunakan di tag yang berbeda-beda. CSS biasanya terdiri dari 2 bagian utama yaitu Selector dan Declaration.

selector { property: value; }

selector { property1:value; property2:value; property3:value; }

Metode Penyisipan CSS

• Inline Styles
  • Ditulis dengan menggunakan atribut style pada elemen tertentu.
  • Berefek hanya kepada elemen tertentu di mana style itu ditulis
  • Metode ini tidak disarankan, kecuali kalau untuk hal penting dalam me-override style dari 2 metode yang lain.
  Contoh :
  

  <h1 style="color:red">Introduction</h1>

  
  

  <h1 style="color:red;font-family:arial;">Introduction</h1>

• Embeded Style Sheets
  • Ditulis dalam elemen <style>...</style> yang diletakkan di bagian <head>...</head>
  • Berefek kepada semua elemen pada dokumen atau file tersebut.

  <head>  <style>   /* tulis style di bagian sini */  </style> </head>

Metode Penyisipan CSS

• External Style
  • Penulisan rule (aturan) style pada dokumen yang terpisah dengan dokumen HTML
  • File ini harus disimpan dengan nama berekstensi *.css
  • File Eksternal ini dapat digunakan oleh satu atau lebih dokumen HTML
  • Cara menyisipkan eksternal style :
    • Mengguanakn elemen <link/>
    • Menggunakan perintah @import

Jenis - Jenis Selector

• Individual Element Selector -> nama elemen sebagai selector
  

  p{ color:navy; }

• Grouped Element Selector -> beberapa elemen satu grup dijadikan sebagai selector
  

  p, ul, p, td, th { color: navy; }

• Contextual Selector (Descendant, Child, Adjacent, General Siblings)
• Id Selector
• Class Selector
• Universal Selector

Descendant Selector

Elemen yang merupakan turunannya yang dijadikan sebagai target selector.

li em { color : olive; }

Child, Adjacent Sibling, General Sibling Selector

• Child Selector -> Elemen merupakan anak secara langsung yang dijadikan sebagai target.

  p > em {font-weight:bold;}

• Adjacent Sibling Selector -> Elemen setelah elemen lainnya secara langsung dengan orang tua yang sama dijadikan sebagai target.

  h1 + p {font-style: italic;}

• General Sibling Selector -> elemen setelah elemen lainnya (tidak perlu secara langsung) dengan orang tua yang sama dijadikan sebagai target.

  h1~h2 {font-weight:normal}

ID Selector

Atribut id berfungsi untuk memberikan nama unik pada elemen HTML.
Contoh:

<li id="catalog1234">Happy Face T-Shirt</li>

Berasal dari

li#catalog1234 { color: red;}

Class Selector

Mengklasifikasikan beberapa elemen sebagai sebuah grup.
Contoh:

p.special {color:orange; }

.special {color:orange; }

Universal Selector

Semua Elemen dijadikan sebagi target.

* {color: gray; }

#intro * {color: gray;}

Contoh untuk penggunaan CSS

*untuk result codepen tidak dapat memunculkan gambar, karena saya memakai akun free

See the Pen Bvawyj by David Steven (@davidst19) on CodePen.

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]