of 56

Apa itu HTML5

Published on June 2016 | Categories: Documents | Downloads: 14 | Comments: 0
372 views

Comments

Content

Apa itu HTML5?
HTML5 akan menjadi standar baru untuk HTML, XHTML, dan DOM HTML. Versi sebelumnya dari HTML datang pada tahun 1999. Web telah banyak berubah sejak saat itu. HTML5 masih dalam proses. Namun, sebagian browser modern mempunyai dukungan HTML5.

Bagaimana Memulai Apakah HTML5?
HTML5 merupakan kerjasama antara World Wide Web Consortium (W3C) dan Web Hypertext Application Technology Working Group (WHATWG). WHATWG bekerja dengan bentuk web dan aplikasi, dan W3C bekerja dengan XHTML 2.0. Pada tahun 2006, mereka memutuskan untuk bekerja sama dan membuat versi baru dari HTML. Beberapa aturan tambahan untuk HTML5: 1. Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript 2. Mengurangi kebutuhan untuk plugin eksternal (seperti Flash) 3. Lebih baik penanganan kesalahan 4. Lebih markup untuk menggantikan scripting 5. HTML5 harus perangkat independen 6. Proses pembangunan harus terlihat untuk umum Fitur Baru Beberapa fitur baru yang paling menarik di HTML5: 1. Unsur kanvas untuk menggambar 2. Unsur-unsur video dan audio untuk media pemutaran 3. Dukungan yang lebih baik untuk penyimpanan offline lokal 4. Baru isi elemen tertentu, seperti artikel, footer, header, nav, bagian 5. New bentuk kontrol, seperti kalender, tanggal, waktu, email, url, cari Dukungan Browser HTML5 standar belum resmi, dan tidak ada browser memiliki dukungan penuh HTML5. Tapi semua browser utama (Safari, Chrome, Firefox, Opera, Internet Explorer) terus menambahkan fitur HTML5 baru ke versi yang terbaru. Elemen baru di HTML5 Internet telah berubah banyak sejak HTML 4.01 menjadi standar pada tahun 1999. Hari ini, beberapa elemen dalam HTML 4.01 yang usang, tidak pernah digunakan, atau tidak menggunakan cara mereka dimaksudkan. Elemen ini dihapus atau ditulis ulang di HTML5. Untuk lebih menangani menggunakan internet saat ini, HTML5 juga mencakup unsur-unsur baru untuk struktur yang lebih baik, gambar, isi media, dan penanganan bentuk yang lebih baik. Elemen Baru Markup Elemen baru untuk struktur yang lebih baik: Tag Keterangan <article> Untuk konten eksternal, seperti teks dari artikel-berita, blog, forum, atau konten lain dari sumber eksternal <aside> Untuk konten selain dari konten itu ditempatkan masuk Isi samping harus berkaitan dengan isi sekitarnya <command> Sebuah tombol, atau radiobutton, atau checkbox <details> Untuk menjelaskan rincian tentang dokumen, atau bagian dari dokumen <summary> Sebuah judul, atau ringkasan, di dalam elemen rincian <figure> Untuk pengelompokan bagian konten yang berdiri sendiri, bisa video <figcaption> Judul dari bagian gambar

<footer> <header> <hgroup> <mark> <meter> <nav> <progress> <ruby> <rt> <rp> <section> <time> <wbr>

Untuk footer dari dokumen atau bagian, dapat mencakup nama penulis, tanggal dokumen, informasi kontak, atau informasi hak cipta Untuk pengenalan dokumen atau bagian, dapat mencakup navigasi Untuk bagian judul, menggunakan <h1> untuk <h6>, dimana yang terbesar adalah utama menuju bagian tersebut, dan yang lain sub-judul Untuk teks yang harus disorot Untuk pengukuran, yang digunakan hanya jika nilai maksimum dan minimum diketahui Untuk bagian navigasi Keadaan karya dalam penyelesaian Untuk anotasi ruby (catatan Cina atau karakter) Untuk penjelasan tentang anotasi ruby Apa untuk menunjukkan browser yang tidak mendukung elemen ruby Untuk bagian dalam dokumen. Seperti bab, header, footer, atau bagian lain dari dokumen Untuk mendefinisikan waktu atau tanggal, atau keduanya Word break. Untuk menentukan kesempatan line-break.

Elemen Baru Media HTML5 memberikan standar baru untuk konten media: Tag Keterangan <audio> Untuk konten multimedia, suara, musik atau audio lainnya stream <video> Untuk konten video, seperti klip film atau video lainnya stream <source> Untuk sumber daya media untuk elemen media, yang didefinisikan di dalam unsur-unsur video atau audio <embed> Untuk konten tertanam, seperti plug-in Elemen Kanvas Unsur kanvas menggunakan JavaScript untuk membuat gambar di halaman web. Tag Keterangan <canvas> Untuk membuat grafik dengan script Elemen Formulir Baru HTML5 menawarkan unsur-unsur bentuk yang lebih, dengan fungsionalitas yang lebih: Tag Keterangan <datalist> Sebuah daftar opsi untuk nilai input <keygen> Buat kunci untuk mengotentikasi pengguna <output> Untuk berbagai jenis output, seperti output yang ditulis oleh script Input Baru Tipe Atribut Nilai Juga, atribut jenis elemen input yang memiliki nilai-nilai baru, untuk kontrol input yang lebih baik sebelum mengirimnya ke server: Tipe Keterangan tel Nilai input adalah jenis nomor telepon search kolom input adalah bidang pencarian url Nilai masukan URL email Nilai input satu atau lebih alamat email datetime Nilai masukan tanggal dan / atau waktu date Nilai masukan tanggal month Nilai masukan bulan week Nilai masukan seminggu time nilai input adalah tipe waktu datetime-local Nilai masukan tanggal lokal / waktu number Nilai masukan nomor range nilai input adalah angka dalam kisaran tertentu HTML 5 VIDEO

Banyak situs web modern menunjukkan video. HTML5 menyediakan standar untuk menunjukkan kepada mereka. Di bawah ini script untuk pengecekan video di html
<title>HTML5 Video</title> <script type="text/javascript"> function checkVideo() { if(!!document.createElement('video').canPlayType) { var vidTest=document.createElement("video"); oggTest=vidTest.canPlayType('video/ogg; codecs="theora, vorbis"'); if (!oggTest) { h264Test=vidTest.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"'); if (!h264Test) { document.getElementById("checkVideoResult").innerHTML="Maaf tidak support video"; } else { if (h264Test=="probably") { document.getElementById("checkVideoResult").innerHTML="Siip! Video OK!"; } else { document.getElementById("checkVideoResult").innerHTML="Wah. Cuma sebagian aja."; } } } else { if (oggTest=="probably") { document.getElementById("checkVideoResult").innerHTML=" Siip! Video OK!"; } else { document.getElementById("checkVideoResult").innerHTML=". Cuma sebagian aja."; } } } else { document.getElementById("checkVideoResult").innerHTML=" Maaf tidak support video" } } </script> <hr /> <p class="intro">Beberapa websites modern menampilkan video. HTML5 menyediakan sebuah standar untuk menampilkan video.</p> <table class="example" border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td> <h2 class="example">Check if your browser supports HTML5 video</h2> <table class="example_code notranslate" border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td> <div id="checkVideoResult"><button onclick="checkVideo()">Check</button></div> </td></tr></table> </td></tr></table> <br /> <hr />

Video pada halaman WEB Sampai saat ini, tidak pernah ada sebuah standar untuk menampilkan video pada halaman web. Hari ini, video yang paling akan ditampilkan melalui plugin (seperti flash). Namun, tidak semua browser memiliki plugin yang sama.

Format Video HTML5 menetapkan cara standar untuk memasukkan video, dengan elemen video. mereka. Saat ini, ada 3 format video yang didukung untuk elemen video:
Format Ogg MPEG 4 WebM IE Tidak 9.0 + Tidak Firefox Opera 3.5 + 10.5 + Tidak Tidak 4.0 + 10.6 + Safari 5.0 + 5.0 + 6.0 + Chrome No 3.0 + No

Ogg MPEG4 WebM Cara Bekerja

= Ogg file dengan codec video Theora dan Vorbis audio codec = MPEG 4 file dengan codec H.264 video dan AAC audio codec = WebM file dengan VP8 codec video dan audio codec Vorbis

Untuk menampilkan video dalam HTML5, ini adalah semua yang Anda butuhkan:
<video src="movie.ogg" controls="controls"> </video>

Atribut kontrol untuk menambahkan play, pause, dan kontrol volume. Hal ini juga selalu ide yang baik untuk menyertakan atribut lebar dan tinggi. Sisipkan konten antara <video> dan </ video> tag untuk browser yang tidak mendukung elemen video: Contoh ;
<video src="movie.ogg" width="320" height="240" controls="controls"> Your browser does not support the video tag. </video>

Contoh di atas menggunakan file ogg, dan akan bekerja di Firefox, Opera dan Chrome. Untuk membuat karya video di Internet Explorer, Safari dan Chrome versi masa depan, kita harus menambahkan MPEG4 dan file WebM. Elemen elemen video memungkinkan beberapa sumber. Sumber elemen dapat link ke file video yang berbeda. Browser akan menggunakan format diakui pertama: Contoh ;
<video width="320" height="240" controls="controls"> <source src="movie.ogg" type="video/ogg" /> <source src="movie.mp4" type="video/mp4" /> <source src="movie.webm" type="video/webm" /> Your browser does not support the video tag. </video>

All <video> Attributes Attribute audio autoplay controls height loop poster preload src width Value muted autoplay controls pixels loop url preload url pixels Description Mendefinisikan keadaan default audio. Saat ini, hanya "diredam" diperbolehkan Jika ada, maka video akan mulai bermain secepat itu siap Jika ada, kontrol akan ditampilkan, seperti tombol putar Mengatur ketinggian video player Jika ada, video akan mulai dari awal lagi, setiap kali selesai Menentukan URL gambar yang mewakili video Jika ada, video akan dimuat pada beban halaman, dan siap untuk dijalankan. Diabaikan jika "autoplay" hadir URL video untuk bermain Mengatur lebar dari video player

HTML5 Audio
HTML5 menyediakan standar untuk memutar audio.

Audio di Web
Sampai saat ini, tidak pernah ada standar untuk memainkan audio di sebuah halaman web. Saat ini, sebagian besar audio diputar melalui sebuah plugin (seperti flash). Namun, tidak semua browser memiliki plugin yang sama. HTML5 menetapkan cara standar untuk memasukkan audio, dengan unsur audio. Unsur audio bisa memutar file suara, atau stream audio.

Format audio
Saat ini, terdapat 3 format yang didukung untuk unsur audio:
Format Ogg Vorbis MP3 Wav IE 9 Tidak ada Ya Tidak ada Firefox 3.5 Ya Tidak ada Ya Opera 10,5 Ya Tidak ada Ya Chrome 3.0 Ya Ya Tidak ada Safari 3.0 Tidak ada Ya Ya

Cara Bekerja
Untuk memutar file audio di HTML5, ini adalah semua yang Anda butuhkan:
<audio src="song.ogg" controls="controls"> </audio>

Atribut kontrol untuk menambahkan play, pause, dan kontrol volume. Sisipkan konten antara <audio> dan </ audio> tag untuk browser yang tidak mendukung elemen audio:

Contoh
<audio src="song.ogg" controls="controls"> Your browser does not support the audio element. </audio>

Coba sendiri » Contoh di atas menggunakan file ogg, dan akan bekerja di Firefox, Opera dan Chrome. Untuk membuat karya audio di Internet Explorer dan Safari, menambahkan file audio jenis MP3. Elemen elemen audio memungkinkan beberapa sumber. Sumber elemen dapat link ke file audio yang berbeda. Browser akan menggunakan format diakui pertama:

Contoh
<audio controls="controls"> <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mpeg" /> Your browser does not support the audio element. </audio>

Coba sendiri »

<audio> Semua Atribut
Atribut autoplay kontrol putaran preload src Nilai autoplay kontrol putaran preload url Deskripsi Menentukan bahwa audio tersebut akan mulai bermain secepat itu siap. Menetapkan bahwa kontrol akan ditampilkan, seperti tombol play. Menentukan bahwa audio akan mulai bermain lagi (looping) ketika mencapai akhir Menentukan bahwa audio akan dimuat pada beban halaman, dan siap untuk dijalankan. Diabaikan jika autoplay hadir. Menentukan URL dari audio untuk bermain

HTML5 kanvas
Unsur kanvas digunakan untuk menggambar grafik di halaman web.

Apa itu kanvas?
Unsur kanvas HTML5 menggunakan JavaScript untuk menggambar grafik di halaman web. kanvas adalah area persegi, dan Anda mengontrol setiap pixel itu. Unsur kanvas memiliki beberapa metode untuk menggambar jalur, kotak, lingkaran, karakter, dan menambahkan gambar.

Membuat Elemen kanvas
Tambahkan elemen kanvas ke halaman HTML5. Tentukan id, lebar, dan tinggi dari elemen:
<canvas id="myCanvas" width="200" height="100"></canvas>

Draw Dengan JavaScript
Unsur kanvas tidak memiliki kemampuan menggambar sendiri. Semua gambar harus dilakukan di dalam JavaScript:
<script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75); </script>

Coba sendiri » JavaScript menggunakan id untuk menemukan elemen kanvas:
var c=document.getElementById("myCanvas");

Kemudian, membuat objek konteks:
var cxt=c.getContext("2d");

The getContext ("2d") Objek adalah built-in HTML5 objek, dengan banyak metode untuk menggambar jalur, kotak, lingkaran, karakter, gambar dan banyak lagi. Dua baris berikutnya menarik persegi panjang merah:
cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75);

Metode fillStyle membuatnya merah, dan metode fillRect menentukan bentuk, posisi, dan ukuran.

Memahami Koordinat
Metode fillRect di atas memiliki parameter (0,0,150,75). Ini berarti: Gambarlah sebuah persegi 150x75 di kanvas, dimulai dari pojok kiri atas (0,0). Kanvas 'X dan Y koordinat digunakan untuk posisi gambar di kanvas. Mouse ke kotak di bawah ini untuk melihat koordinat: X

Y

Contoh kanvas Lebih
Di bawah ini adalah contoh-contoh gambar pada elemen kanvas: Contoh - Line Menarik garis dengan menentukan di mana untuk memulai, dan di mana untuk berhenti:

Coba sendiri » Contoh - Circle Menggambar sebuah lingkaran dengan menentukan ukuran, warna, dan posisi:

Coba sendiri » Contoh - Gradient Menggambar gradien latar belakang dengan warna yang Anda tentukan:

Coba sendiri » Contoh - Gambar Pasang gambar di kanvas:

Coba sendiri »

HTML5 Web Penyimpanan
«Sebelumnya Bab Berikutnya »

Menyimpan Data Klien
HTML5 menawarkan dua objek baru untuk menyimpan data pada klien:
 

localStorage - menyimpan data tanpa batas waktu sessionStorage - menyimpan data untuk satu sesi

Sebelumnya, ini dilakukan dengan cookie. Cookies tidak cocok untuk data dalam jumlah besar, karena mereka diteruskan oleh SETIAP permintaan ke server, sehingga sangat lambat dan in-efektif. Dalam HTML5, data TIDAK disampaikan oleh setiap permintaan server, tetapi digunakan HANYA ketika ditanya untuk. Adalah mungkin untuk menyimpan data dalam jumlah besar tanpa mempengaruhi kinerja website. Data disimpan di daerah yang berbeda untuk website yang berbeda, dan situs web hanya dapat mengakses data yang disimpan dengan sendirinya. HTML5 menggunakan JavaScript untuk menyimpan dan mengakses data.

Objek localStorage
Menyimpan objek localStorage data tanpa batas waktu. Data akan tersedia pada hari berikutnya, minggu, atau tahun. Cara membuat dan mengakses sebuah localStorage:

Contoh
<script type="text/javascript"> localStorage.lastname="Smith"; document.write(localStorage.lastname); </script> Coba sendiri » Contoh berikut menghitung berapa kali pengguna telah mengunjungi halaman:

Contoh
<script type="text/javascript"> if (localStorage.pagecount) { localStorage.pagecount=Number(localStorage.pagecount) +1; } else { localStorage.pagecount=1; } document.write("Visits "+ localStorage.pagecount + " time(s)."); </script> Coba sendiri »

Objek sessionStorage
Menyimpan objek sessionStorage data untuk satu sesi. Data dihapus ketika pengguna menutup jendela browser. Cara membuat dan mengakses sebuah sessionStorage:

Contoh
<script type="text/javascript"> sessionStorage.lastname="Smith"; document.write(sessionStorage.lastname); </script> Coba sendiri » Contoh berikut menghitung berapa kali pengguna telah mengunjungi halaman, dalam sesi saat ini:

Contoh
<script type="text/javascript"> if (sessionStorage.pagecount) { sessionStorage.pagecount=Number(sessionStorage.pagecount) +1; } else { sessionStorage.pagecount=1; } document.write("Visits "+sessionStorage.pagecount+" time(s) this session."); </script> Coba sendiri » «Sebelumnya

HTML5 Input Jenis
«Sebelumnya Bab Berikutnya »

HTML5 Input Jenis Baru
HTML5 memiliki tipe beberapa masukan baru untuk formulir. Fitur-fitur baru yang memungkinkan untuk kontrol input yang lebih baik dan validasi. Bab ini mencakup jenis input baru:


email

     

url nomor jarak Tanggal pemetik (tanggal, bulan, minggu, waktu, datetime, datetime-lokal) pencarian warna

Dukungan Browser
Jenis input email url nomor jarak Tanggal pemetik pencarian warna IE Tidak ada Tidak ada Tidak ada Tidak ada Tidak ada Tidak ada Tidak ada Firefox 4.0 4.0 Tidak ada Tidak ada Tidak ada 4.0 Tidak ada Opera 9.0 9.0 9.0 9.0 9.0 11.0 11.0 Khrom 10.0 10.0 7.0 4.0 10.0 10.0 Tidak ada Safari Tidak ada Tidak ada Tidak ada 4.0 Tidak ada Tidak ada Tidak ada

Catatan: Opera memiliki dukungan terbaik untuk jenis masukan baru. Namun, Anda sudah bisa mulai menggunakan mereka di semua browser utama. Jika mereka tidak didukung, mereka akan berperilaku sebagai bidang teks biasa.

Input Type - email
Jenis email digunakan untuk field input yang harus berisi alamat e-mail. Nilai bidang email secara otomatis divalidasi ketika formulir dikirimkan.

Contoh
E-mail: <input type="email" name="user_email" /> Coba sendiri » Tip: Safari pada iPhone mengakui jenis input email, dan mengubah layar keyboard pada pertandingan itu (menambahkan @ dan pilihan com.).

Input Type - url
Jenis url digunakan untuk field input yang seharusnya berisi alamat URL. Nilai bidang url secara otomatis divalidasi ketika formulir dikirimkan.

Contoh
Homepage: <input type="url" name="user_url" /> Coba sendiri » Tip: Safari pada iPhone mengakui jenis input url, dan mengubah layar keyboard pada pertandingan itu (menambahkan opsi com.).

Input Type - jumlah
Jenis nomor digunakan untuk field input yang seharusnya berisi nilai numerik. Anda juga dapat mengatur pembatasan apa nomor yang diterima:

Contoh
Points: <input type="number" name="points" min="1" max="10" /> Coba sendiri » Gunakan atribut berikut ini untuk menentukan pembatasan untuk jenis nomor: Atribut max min langkah nilai Nilai nomor nomor nomor nomor Deskripsi Menentukan nilai maksimum yang diizinkan Menentukan nilai minimum diperbolehkan Menentukan interval nomor hukum (jika step = "3", angka hukum bisa -3,0,3,6, dll) Menentukan nilai default

Coba contoh dengan semua pembatasan atribut: Coba sendiri Tip: Safari pada iPhone mengakui jenis masukan nomor, dan mengubah layar keyboard pada pertandingan itu (menunjukkan angka).

Input Type - kisaran
Jenis rentang digunakan untuk field input yang harus mengandung nilai dari kisaran angka. Jenis rentang ditampilkan sebagai slider bar. Anda juga dapat mengatur pembatasan apa nomor yang diterima:

Contoh
<input type="range" name="points" min="1" max="10" /> Coba sendiri »

Gunakan atribut berikut ini untuk menentukan pembatasan untuk jenis kisaran: Atribut max min langkah nilai Nilai nomor nomor nomor nomor Deskripsi Menentukan nilai maksimum yang diizinkan Menentukan nilai minimum diperbolehkan Menentukan interval nomor hukum (jika step = "3", angka hukum bisa -3,0,3,6, dll) Menentukan nilai default

Input Type - Pengumpul Tanggal
HTML5 memiliki tipe beberapa masukan baru untuk memilih tanggal dan waktu:
     

tanggal - Memilih tanggal, bulan dan tahun bulan - Memilih bulan dan tahun minggu - Memilih minggu dan tahun waktu - waktu Memilih (jam dan menit) datetime - Memilih waktu, tanggal, bulan dan tahun (waktu UTC) datetime-lokal - Memilih waktu, tanggal, bulan dan tahun (waktu setempat)

Contoh berikut ini memungkinkan Anda untuk memilih tanggal dari kalender:

Contoh
Date: <input type="date" name="user_date" /> Coba sendiri » Tipe Input "bulan": Coba sendiri Tipe Input "minggu": Coba sendiri Tipe Input "waktu": Coba sendiri Input ketik "datetime": Coba sendiri Input tipe "datetime-lokal": Coba sendiri

Input Type - search
Jenis pencarian digunakan untuk bidang pencarian, seperti pencarian situs, atau pencarian Google. Kolom pencarian berperilaku seperti field teks biasa.

Input Type - warna
Jenis warna yang digunakan untuk field input yang harus mengandung warna.

Jenis input akan memungkinkan Anda untuk memilih warna dari color picker:

Contoh
Color: <input type="color" name="user_color" /> Coba sendiri » «Sebelumnya

HTML5 Input Types
« Previous Next Chapter »

HTML5 New Input Types
HTML5 has several new input types for forms. These new features allow for better input control and validation. This chapter covers the new input types:
      

email url number range Date pickers (date, month, week, time, datetime, datetime-local) search color

Browser Support
Input type email url number range Date pickers search color IE No No No No No No No Firefox 4.0 4.0 No No No 4.0 No Opera 9.0 9.0 9.0 9.0 9.0 11.0 11.0 Chrome 10.0 10.0 7.0 4.0 10.0 10.0 No Safari No No No 4.0 No No No

Note: Opera has the best support for the new input types. However, you can already start using them in all major browsers. If they are not supported, they will behave as regular text fields.

Input Type - email
The email type is used for input fields that should contain an e-mail address. The value of the email field is automatically validated when the form is submitted.

Example
E-mail: <input type="email" name="user_email" /> Try it yourself » Tip: Safari on the iPhone recognizes the email input type, and changes the on-screen keyboard to match it (adds @ and .com options).

Input Type - url
The url type is used for input fields that should contain a URL address. The value of the url field is automatically validated when the form is submitted.

Example
Homepage: <input type="url" name="user_url" /> Try it yourself » Tip: Safari on the iPhone recognizes the url input type, and changes the on-screen keyboard to match it (adds .com option).

Input Type - number
The number type is used for input fields that should contain a numeric value. You can also set restrictions on what numbers are accepted:

Example
Points: <input type="number" name="points" min="1" max="10" /> Try it yourself » Use the following attributes to specify restrictions for the number type: Attribute max min step value Value number number number number Description Specifies the maximum value allowed Specifies the minimum value allowed Specifies legal number intervals (if step="3", legal numbers could be -3,0,3,6, etc) Specifies the default value

Try an example with all the restriction attributes: Try it yourself Tip: Safari on the iPhone recognizes the number input type, and changes the on-screen keyboard to match it (shows numbers).

Input Type - range
The range type is used for input fields that should contain a value from a range of numbers. The range type is displayed as a slider bar. You can also set restrictions on what numbers are accepted:

Example
<input type="range" name="points" min="1" max="10" /> Try it yourself » Use the following attributes to specify restrictions for the range type: Attribute max min step value Value number number number number Description Specifies the maximum value allowed Specifies the minimum value allowed Specifies legal number intervals (if step="3", legal numbers could be -3,0,3,6, etc) Specifies the default value

Input Type - Date Pickers
HTML5 has several new input types for selecting date and time:
     

date - Selects date, month and year month - Selects month and year week - Selects week and year time - Selects time (hour and minute) datetime - Selects time, date, month and year (UTC time) datetime-local - Selects time, date, month and year (local time)

The following example allows you to select a date from a calendar:

Example
Date: <input type="date" name="user_date" /> Try it yourself » Input type "month": Try it yourself Input type "week": Try it yourself Input type "time": Try it yourself Input type "datetime": Try it yourself

Input type "datetime-local": Try it yourself

Input Type - search
The search type is used for search fields, like a site search, or Google search. The search field behaves like a regular text field.

Input Type - color
The color type is used for input fields that should contain a color. This input type will allow you to select a color from a color picker:

Example
Color: <input type="color" name="user_color" /> Try it yourself » « Previous

HTML5 Form Elements
« Previous Next Chapter »

HTML5 New Form Elements
HTML5 has several new elements and attributes for forms. This chapter covers the new form elements:
  

datalist keygen output

Browser Support
Attribute datalist keygen output IE No No No Firefox 4.0 4.0 No Opera 9.5 10.5 9.5 Chrome No 3.0 10.0 Safari No No No

datalist Element
The datalist element specifies a list of options for an input field. The list is created with option elements inside the datalist. To bind a datalist to an input field, let the list attribute of the input field refer to the id of the datalist:

Example
Webpage: <input type="url" list="url_list" name="link" /> <datalist id="url_list"> <option label="W3Schools" value="http://www.w3schools.com" /> <option label="Google" value="http://www.google.com" /> <option label="Microsoft" value="http://www.microsoft.com" /> </datalist> Try it yourself » Tip: The option elements should always have a value attribute.

keygen Element
The purpose of the keygen element is to provide a secure way to authenticate users. The keygen element is a key-pair generator. When a form is submitted, two keys are generated, one private and one public. The private key is stored on the client, and the public key is sent to the server. The public key could be used to generate a client certificate to authenticate the user in the future. Currently, the browser support for this element is not good enough to be a useful security standard.

Example
<form action="demo_form.asp" method="get"> Username: <input type="text" name="usr_name" /> Encryption: <keygen name="security" /> <input type="submit" /> </form> Try it yourself »

output Element
The output element is used for different types of output, like calculations or script output:

Example

<output id="result" onforminput="resCalc()"></output> Try it yourself » « Previous

HTML5 Form Elements
« Previous Next Chapter »

HTML5 New Form Elements
HTML5 has several new elements and attributes for forms. This chapter covers the new form elements:
  

datalist keygen output

Browser Support
Attribute datalist keygen output IE No No No Firefox 4.0 4.0 No Opera 9.5 10.5 9.5 Chrome No 3.0 10.0 Safari No No No

datalist Element
The datalist element specifies a list of options for an input field. The list is created with option elements inside the datalist. To bind a datalist to an input field, let the list attribute of the input field refer to the id of the datalist:

Example
Webpage: <input type="url" list="url_list" name="link" /> <datalist id="url_list"> <option label="W3Schools" value="http://www.w3schools.com" /> <option label="Google" value="http://www.google.com" /> <option label="Microsoft" value="http://www.microsoft.com" /> </datalist> Try it yourself » Tip: The option elements should always have a value attribute.

keygen Element
The purpose of the keygen element is to provide a secure way to authenticate users. The keygen element is a key-pair generator. When a form is submitted, two keys are generated, one private and one public. The private key is stored on the client, and the public key is sent to the server. The public key could be used to generate a client certificate to authenticate the user in the future. Currently, the browser support for this element is not good enough to be a useful security standard.

Example
<form action="demo_form.asp" method="get"> Username: <input type="text" name="usr_name" /> Encryption: <keygen name="security" /> <input type="submit" /> </form> Try it yourself »

output Element
The output element is used for different types of output, like calculations or script output:

Example
<output id="result" onforminput="resCalc()"></output> Try it yourself » « Previous

HTML5 Form Attributes
« Previous Next Chapter »

HTML5 New Form Attributes
This chapter covers some of the new attributes for <form> and <input>. New form attributes:
 

autocomplete novalidate

New input attributes:
          

autocomplete autofocus form form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget) height and width list min, max and step multiple pattern (regexp) placeholder required

Browser Support
Attribute autocomplete autofocus form form overrides height and width list min, max and step multiple novalidate pattern placeholder required IE 8.0 No No No 8.0 No No No No No No No Firefox 3.5 4.0 4.0 4.0 3.5 4.0 No 3.5 4.0 4.0 4.0 4.0 Opera 9.5 10.0 9.5 10.5 9.5 9.5 9.5 11.0 11.0 9.5 11.0 9.5 Chrome 3.0 3.0 10.0 10.0 3.0 No 3.0 3.0 10.0 3.0 3.0 3.0 Safari 4.0 4.0 No No 4.0 No No 4.0 No No 3.0 No

autocomplete Attribute
The autocomplete attribute specifies that the form or input field should have an autocomplete function. Note: The autocomplete attribute works with <form>, and the following <input> types: text, search, url, telephone, email, password, datepickers, range, and color. When the user starts to type in an autocomplete field, the browser should display options to fill in the field:

Example
<form action="demo_form.asp" method="get" autocomplete="on"> First name: <input type="text" name="fname" /><br /> Last name: <input type="text" name="lname" /><br /> E-mail: <input type="email" name="email" autocomplete="off" /><br /> <input type="submit" /> </form> Try it yourself »

Note: In some browsers you may need to activate the autocomplete function for this to work.

autofocus Attribute
The autofocus attribute specifies that a field should automatically get focus when a page is loaded. Note: The autofocus attribute works with all <input> types.

Example
User name: <input type="text" name="user_name" autofocus="autofocus" /> Try it yourself »

form Attribute
The form attribute specifies one or more forms the input field belongs to. Note: The form attribute works with all <input> types. The form attribute must refer to the id of the form it belongs to:

Example
<form action="demo_form.asp" method="get" id="user_form"> First name:<input type="text" name="fname" /> <input type="submit" /> </form> Last name: <input type="text" name="lname" form="user_form" /> Try it yourself » Note: To refer to more than one form, use a space-separated list.

Form Override Attributes
The form override attributes allow you to override some of the attributes set for the form element. The form override attributes are:
    

formaction - Overrides the form action attribute formenctype - Overrides the form enctype attribute formmethod - Overrides the form method attribute formnovalidate - Overrides the form novalidate attribute formtarget - Overrides the form target attribute

Note: The form override attributes works with the following <input> types: submit and image.

Example
<form action="demo_form.asp" method="get" id="user_form"> E-mail: <input type="email" name="userid" /><br /> <input type="submit" value="Submit" /> <br /> <input type="submit" formaction="demo_admin.asp" value="Submit as admin" /> <br /> <input type="submit" formnovalidate="true" value="Submit without validation" /> <br /> </form> Try it yourself » Note: These attributes are helpful for creating different submit buttons.

height and width Attributes
The height and width attributes specifies the height and width of the image used for the input type image. Note: The height and width attributes only works with <input> type: image.

Example
<input type="image" src="img_submit.gif" width="24" height="24" /> Try it yourself »

list Attribute
The list attribute specifies a datalist for an input field. A datalist is a list of options for an input field. Note: The list attribute works with the following <input> types: text, search, url, telephone, email, date pickers, number, range, and color.

Example
Webpage: <input type="url" list="url_list" name="link" /> <datalist id="url_list"> <option label="W3Schools" value="http://www.w3schools.com" /> <option label="Google" value="http://www.google.com" /> <option label="Microsoft" value="http://www.microsoft.com" /> </datalist> Try it yourself »

min, max and step Attributes
The min, max and step attributes are used to specify restrictions for input types containing numbers or dates. The max attribute specifies the maximum value allowed for the input field. The min attribute specifies the minimum value allowed for the input field. The step attribute specifies the legal number intervals for the input field (if step="3", legal numbers could be 3,0,3,6, etc). Note: The min, max, and step attributes works with the following <input> types: date pickers, number, and range. The example below shows a numeric field that accepts values between 0 and 10, with a step of 3 (legal numbers are 0, 3, 6 and 9):

Example
Points: <input type="number" name="points" min="0" max="10" step="3" /> Try it yourself »

multiple Attribute
The multiple attribute specifies that multiple values can be selected for an input field. Note: The multiple attribute works with the following <input> types: email, and file.

Example
Select images: <input type="file" name="img" multiple="multiple" /> Try it yourself »

novalidate Attribute
The novalidate attribute specifies that the form or input field should not be validated when submitted. If this attribute is present the form will not validate form input. Note: The novalidate attribute works with: <form> and the following <input> types: text, search, url, telephone, email, password, date pickers, range, and color.

Example
<form action="demo_form.asp" novalidate="novalidate"> E-mail: <input type="email" name="user_email" /> <input type="submit" />

</form> Try it yourself »

pattern Attribute
The pattern attribute specifies a pattern used to validate an input field. The pattern is a regular expression. You can read about this in our JavaScript tutorial. Note: The pattern attribute works with the following <input> types: text, search, url, telephone, email, and password The example below shows a text field that can only contain three letters (no numbers or special characters):

Example
Country code: <input type="text" name="country_code" pattern="[A-z]{3}" title="Three letter country code" /> Try it yourself »

placeholder Attribute
The placeholder attribute provides a hint that describes the expected value of an input field. Note: The placeholder attribute works with the following <input> types: text, search, url, telephone, email, and password The hint is displayed in the input field when it is empty, and disappears when the field gets focus:

Example
<input type="search" name="user_search" placeholder="Search W3Schools" /> Try it yourself »

required Attribute
The required attribute specifies that an input field must be filled out before submitting. Note: The required attribute works with the following <input> types: text, search, url, telephone, email, password, date pickers, number, checkbox, radio, and file.

Example
Name: <input type="text" name="usr_name" required="required" />

Try it yourself » « Previous

HTML5 Form Attributes
« Previous Next Chapter »

HTML5 New Form Attributes
This chapter covers some of the new attributes for <form> and <input>. New form attributes:
 

autocomplete novalidate

New input attributes:
          

autocomplete autofocus form form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget) height and width list min, max and step multiple pattern (regexp) placeholder required

Browser Support
Attribute autocomplete autofocus form form overrides height and width list min, max and step multiple novalidate pattern placeholder required IE 8.0 No No No 8.0 No No No No No No No Firefox 3.5 4.0 4.0 4.0 3.5 4.0 No 3.5 4.0 4.0 4.0 4.0 Opera 9.5 10.0 9.5 10.5 9.5 9.5 9.5 11.0 11.0 9.5 11.0 9.5 Chrome 3.0 3.0 10.0 10.0 3.0 No 3.0 3.0 10.0 3.0 3.0 3.0 Safari 4.0 4.0 No No 4.0 No No 4.0 No No 3.0 No

autocomplete Attribute
The autocomplete attribute specifies that the form or input field should have an autocomplete function. Note: The autocomplete attribute works with <form>, and the following <input> types: text, search, url, telephone, email, password, datepickers, range, and color. When the user starts to type in an autocomplete field, the browser should display options to fill in the field:

Example
<form action="demo_form.asp" method="get" autocomplete="on"> First name: <input type="text" name="fname" /><br /> Last name: <input type="text" name="lname" /><br /> E-mail: <input type="email" name="email" autocomplete="off" /><br /> <input type="submit" /> </form> Try it yourself » Note: In some browsers you may need to activate the autocomplete function for this to work.

autofocus Attribute
The autofocus attribute specifies that a field should automatically get focus when a page is loaded. Note: The autofocus attribute works with all <input> types.

Example
User name: <input type="text" name="user_name" autofocus="autofocus" /> Try it yourself »

form Attribute
The form attribute specifies one or more forms the input field belongs to. Note: The form attribute works with all <input> types. The form attribute must refer to the id of the form it belongs to:

Example
<form action="demo_form.asp" method="get" id="user_form"> First name:<input type="text" name="fname" /> <input type="submit" /> </form> Last name: <input type="text" name="lname" form="user_form" />

Try it yourself » Note: To refer to more than one form, use a space-separated list.

Form Override Attributes
The form override attributes allow you to override some of the attributes set for the form element. The form override attributes are:
    

formaction - Overrides the form action attribute formenctype - Overrides the form enctype attribute formmethod - Overrides the form method attribute formnovalidate - Overrides the form novalidate attribute formtarget - Overrides the form target attribute

Note: The form override attributes works with the following <input> types: submit and image.

Example
<form action="demo_form.asp" method="get" id="user_form"> E-mail: <input type="email" name="userid" /><br /> <input type="submit" value="Submit" /> <br /> <input type="submit" formaction="demo_admin.asp" value="Submit as admin" /> <br /> <input type="submit" formnovalidate="true" value="Submit without validation" /> <br /> </form> Try it yourself » Note: These attributes are helpful for creating different submit buttons.

height and width Attributes
The height and width attributes specifies the height and width of the image used for the input type image. Note: The height and width attributes only works with <input> type: image.

Example
<input type="image" src="img_submit.gif" width="24" height="24" /> Try it yourself »

list Attribute
The list attribute specifies a datalist for an input field. A datalist is a list of options for an input field. Note: The list attribute works with the following <input> types: text, search, url, telephone, email, date pickers, number, range, and color.

Example
Webpage: <input type="url" list="url_list" name="link" /> <datalist id="url_list"> <option label="W3Schools" value="http://www.w3schools.com" /> <option label="Google" value="http://www.google.com" /> <option label="Microsoft" value="http://www.microsoft.com" /> </datalist> Try it yourself »

min, max and step Attributes
The min, max and step attributes are used to specify restrictions for input types containing numbers or dates. The max attribute specifies the maximum value allowed for the input field. The min attribute specifies the minimum value allowed for the input field. The step attribute specifies the legal number intervals for the input field (if step="3", legal numbers could be 3,0,3,6, etc). Note: The min, max, and step attributes works with the following <input> types: date pickers, number, and range. The example below shows a numeric field that accepts values between 0 and 10, with a step of 3 (legal numbers are 0, 3, 6 and 9):

Example
Points: <input type="number" name="points" min="0" max="10" step="3" /> Try it yourself »

multiple Attribute
The multiple attribute specifies that multiple values can be selected for an input field. Note: The multiple attribute works with the following <input> types: email, and file.

Example

Select images: <input type="file" name="img" multiple="multiple" /> Try it yourself »

novalidate Attribute
The novalidate attribute specifies that the form or input field should not be validated when submitted. If this attribute is present the form will not validate form input. Note: The novalidate attribute works with: <form> and the following <input> types: text, search, url, telephone, email, password, date pickers, range, and color.

Example
<form action="demo_form.asp" novalidate="novalidate"> E-mail: <input type="email" name="user_email" /> <input type="submit" /> </form> Try it yourself »

pattern Attribute
The pattern attribute specifies a pattern used to validate an input field. The pattern is a regular expression. You can read about this in our JavaScript tutorial. Note: The pattern attribute works with the following <input> types: text, search, url, telephone, email, and password The example below shows a text field that can only contain three letters (no numbers or special characters):

Example
Country code: <input type="text" name="country_code" pattern="[A-z]{3}" title="Three letter country code" /> Try it yourself »

placeholder Attribute
The placeholder attribute provides a hint that describes the expected value of an input field. Note: The placeholder attribute works with the following <input> types: text, search, url, telephone, email, and password The hint is displayed in the input field when it is empty, and disappears when the field gets focus:

Example
<input type="search" name="user_search" placeholder="Search W3Schools" /> Try it yourself »

required Attribute
The required attribute specifies that an input field must be filled out before submitting. Note: The required attribute works with the following <input> types: text, search, url, telephone, email, password, date pickers, number, checkbox, radio, and file.

Example
Name: <input type="text" name="usr_name" required="required" /> Try it yourself » « Previous

HTML5 Tag Reference
« Previous Next Reference »

HTML5
HTML5 improves interoperability and reduces development costs by making precise rules on how to handle all HTML elements, and how to recover from errors. Some of the new features in HTML5 are functions for embedding audio, video, graphics, client-side data storage, and interactive documents. HTML5 also contains new elements like <nav>, <header>, <footer>, and <figure>. The HTML5 working group includes AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera, and many hundreds of other vendors. Note: HTML5 is not a W3C recommendation yet! To read about the HTML5 activities at W3C, please read our W3C tutorial.

Ordered Alphabetically
New : New tags in HTML5. Tag Description

<!--...--> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article>New <aside>New <audio>New <b> <base> <basefont> <bdo> <big> <blockquote> <body> <br> <button> <canvas>New <caption> <center> <cite> <code> <col> <colgroup> <command>New <datalist>New <dd> <del> <details>New <dfn> <dir> <div> <dl> <dt> <em> <embed>New <fieldset> <figcaption>New <figure>New <font> <footer>New <form> <frame> <frameset> <h1> to <h6> <head> <header>New <hgroup>New

Defines a comment Defines the document type Defines a hyperlink Defines an abbreviation Not supported in HTML5. Defines an address element Not supported in HTML5. Defines an area inside an image map Defines an article Defines content aside from the page content Defines sound content Defines bold text Defines a base URL for all the links in a page Not supported in HTML5. Defines the direction of text display Not supported in HTML5. Defines a long quotation Defines the body element Inserts a single line break Defines a push button Defines graphics Defines a table caption Not supported in HTML5. Defines a citation Defines computer code text Defines attributes for table columns Defines groups of table columns Defines a command button Defines a dropdown list Defines a definition description Defines deleted text Defines details of an element Defines a definition term Not supported in HTML5. Defines a section in a document Defines a definition list Defines a definition term Defines emphasized text Defines external interactive content or plugin Defines a fieldset Defines the caption of a figure element Defines a group of media content, and their caption Not supported in HTML5. Defines a footer for a section or page Defines a form Not supported in HTML5. Not supported in HTML5. Defines header 1 to header 6 Defines information about the document Defines a header for a section or page Defines information about a section in a document

<hr> <html> <i> <iframe> <img> <input> <ins> <keygen>New <kbd> <label> <legend> <li> <link> <map> <mark>New <menu> <meta> <meter>New <nav>New <noframes> <noscript> <object> <ol> <optgroup> <option> <output>New <p> <param> <pre> <progress>New <q> <rp>New <rt>New <ruby>New <s> <samp> <script> <section>New <select> <small> <source>New <span> <strike> <strong> <style> <sub> <summary>New <sup> <table> <tbody>

Defines a horizontal rule Defines an html document Defines italic text Defines an inline sub window (frame) Defines an image Defines an input field Defines inserted text Defines a generated key in a form Defines keyboard text Defines a label for a form control Defines a title in a fieldset Defines a list item Defines a resource reference Defines an image map Defines marked text Defines a menu list Defines meta information Defines measurement within a predefined range Defines navigation links Not supported in HTML5. Defines a noscript section Defines an embedded object Defines an ordered list Defines an option group Defines an option in a drop-down list Defines some types of output Defines a paragraph Defines a parameter for an object Defines preformatted text Defines progress of a task of any kind Defines a short quotation Used in ruby annotations to define what to show browsers that to not support the ruby element. Defines explanation to ruby annotations. Defines ruby annotations Defines text that is no longer correct Defines sample computer code Defines a script Defines a section Defines a selectable list Defines small text Defines media resources Defines a section in a document Not supported in HTML5. Defines strong text Defines a style definition Defines subscripted text Defines the header of a "detail" element Defines superscripted text Defines a table Defines a table body

<td> <textarea> <tfoot> <th> <thead> <time>New <title> <tr> <tt> <u> <ul> <var> <video>New <wbr>New <xmp> « Previous

Defines a table cell Defines a text area Defines a table footer Defines a table header Defines a table header Defines a date/time Defines the document title Defines a table row Not supported in HTML5. Not supported in HTML5. Defines an unordered list Defines a variable Defines a video Defines a possible line-break Not supported in HTML5. Next Reference »

HTML5 Tag Referensi
«Sebelumnya Referensi Berikutnya »

HTML5
HTML5 meningkatkan interoperabilitas dan mengurangi biaya pengembangan dengan membuat aturan yang tepat tentang bagaimana untuk menangani semua elemen HTML, dan bagaimana memulihkan dari kesalahan. Beberapa fitur baru dalam HTML5 adalah fungsi untuk audio embedding, video, grafik, klien-sisi penyimpanan data, dan dokumen interaktif. HTML5 juga mengandung unsur-unsur baru seperti <nav>,, <header> <footer>, dan <figure>. Kelompok HTML5 kerja termasuk AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera, dan ratusan vendor lainnya. Catatan: HTML5 bukan rekomendasi W3C yet! Untuk membaca tentang kegiatan HTML5 di W3C, silahkan baca tutorial W3C .

Memerintahkan abjad
Baru : Baru tag di HTML5. Tag <!--...--> <! DOCTYPE> <a> <abbr> <acronym> <address> Deskripsi Mendefinisikan komentar Mendefinisikan jenis dokumen Mendefinisikan hyperlink Mendefinisikan singkatan Tidak didukung di HTML5. Mendefinisikan elemen alamat

<applet> <area> <article> Baru <aside> Baru <audio> Baru <b> <base> <basefont> <bdo> <big> <blockquote> <body> <br> <button> <canvas> Baru <caption> <center> <cite> <code> <col> <colgroup> <command> Baru <datalist> Baru <dd> <del> <details> Baru <dfn> <dir> <div> <dl> <dt> <em> <embed> Baru <fieldset> <figcaption> Baru <figure> Baru <FONT> <footer> Baru <form> <frame> <frameset> <h1> untuk <h6> <head> <header> Baru <hgroup> Baru <hr> <html> <i> <iframe> <img> <input>

Tidak didukung di HTML5. Mendefinisikan area dalam peta gambar Mendefinisikan artikel Mendefinisikan konten selain dari konten halaman Mendefinisikan isi suara Mendefinisikan teks tebal Mendefinisikan URL dasar untuk semua link dalam halaman Tidak didukung di HTML5. Mendefinisikan arah tampilan teks Tidak didukung di HTML5. Mendefinisikan sebuah kutipan panjang Mendefinisikan elemen body Menyisipkan break satu baris Mendefinisikan tombol push Mendefinisikan grafis Mendefinisikan sebuah judul tabel Tidak didukung di HTML5. Mendefinisikan kutipan Mendefinisikan kode teks komputer Mendefinisikan atribut untuk kolom tabel Mendefinisikan kelompok kolom tabel Mendefinisikan tombol perintah Mendefinisikan sebuah daftar dropdown Mendefinisikan sebuah deskripsi definisi Mendefinisikan teks yang dihapus Mendefinisikan elemen rincian Mendefinisikan sebuah istilah definisi Tidak didukung di HTML5. Mendefinisikan sebuah bagian dalam dokumen Mendefinisikan sebuah daftar definisi Mendefinisikan sebuah istilah definisi Mendefinisikan teks menekankan Mendefinisikan konten interaktif eksternal atau plugin Mendefinisikan sebuah fieldset Mendefinisikan judul dari unsur tokoh Mendefinisikan sekelompok konten media, dan keterangan mereka Tidak didukung di HTML5. Mendefinisikan sebuah footer untuk bagian atau halaman Mendefinisikan bentuk Tidak didukung di HTML5. Tidak didukung di HTML5. Mendefinisikan header 1 ke header 6 Mendefinisikan informasi tentang dokumen Mendefinisikan sebuah header untuk bagian atau halaman Mendefinisikan informasi tentang sebuah bagian dalam dokumen Mendefinisikan aturan horisontal Mendefinisikan dokumen html Mendefinisikan teks miring Mendefinisikan suatu inline sub window (frame) Mendefinisikan gambar Mendefinisikan sebuah field input

<ins> <keygen> Baru <kbd> <label> <legend> <li> <link> <map> <mark> Baru <menu> <META> <meter> Baru <nav> Baru <noframes> <noscript> <object> <ol> <optgroup> <option> <output> Baru <p> <param> <pre> <progress> Baru <q> <rp> Baru <rt> Baru <ruby> Baru <s> <samp> <script> <section> Baru <select> <small> <source> Baru <span> <strike> <strong> <style> <sub> <summary> Baru <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <time> Baru

Mendefinisikan teks yang disisipkan Mendefinisikan sebuah kunci yang dihasilkan dalam bentuk suatu Mendefinisikan teks keyboard Mendefinisikan label untuk kontrol form Mendefinisikan sebuah judul di sebuah fieldset Mendefinisikan item daftar Mendefinisikan referensi sumber daya Mendefinisikan peta gambar Mendefinisikan teks ditandai Mendefinisikan daftar menu Mendefinisikan informasi meta Mendefinisikan pengukuran dalam rentang yang telah ditentukan Mendefinisikan navigasi link Tidak didukung di HTML5. Mendefinisikan sebuah bagian noscript Mendefinisikan sebuah objek tertanam Mendefinisikan ordered list Mendefinisikan grup pilihan Mendefinisikan pilihan dalam daftar drop-down Mendefinisikan beberapa jenis output Mendefinisikan paragraf Mendefinisikan parameter untuk objek Mendefinisikan teks terformat Mendefinisikan kemajuan tugas apapun Mendefinisikan kutipan pendek Digunakan dalam anotasi ruby untuk menentukan apa yang harus menunjukkan browser yang tidak mendukung elemen ruby. Mendefinisikan penjelasan untuk ruby penjelasan. Mendefinisikan ruby penjelasan Mendefinisikan teks yang tidak lagi benar Mendefinisikan sampel kode komputer Mendefinisikan script Mendefinisikan bagian Mendefinisikan daftar dipilih Mendefinisikan teks kecil Mendefinisikan sumber daya media Mendefinisikan sebuah bagian dalam dokumen Tidak didukung di HTML5. Mendefinisikan teks yang kuat Mendefinisikan suatu definisi gaya Mendefinisikan teks subscript Mendefinisikan header dari unsur "detail" Mendefinisikan teks superscripted Mendefinisikan tabel Mendefinisikan sebuah badan tabel Mendefinisikan sebuah sel tabel Mendefinisikan sebuah area teks Mendefinisikan sebuah footer tabel Mendefinisikan sebuah header tabel Mendefinisikan sebuah header tabel Mendefinisikan sebuah tanggal / waktu

<title> <tr> <tt> <u> <ul> <var> <video> Baru <wbr> Baru <xmp> «Sebelumnya

Mendefinisikan judul dokumen Mendefinisikan sebuah baris tabel Tidak didukung di HTML5. Tidak didukung di HTML5. Mendefinisikan unordered list Mendefinisikan variabel Mendefinisikan video Mendefinisikan sebuah line break-kemungkinan Tidak didukung di HTML5.

HTML5 Global Attributes
« Previous Next Reference » The attributes listed below are supported by all HTML 5 tags, with a few exceptions.

HTML5 Global Attributes
New : New global attributes in HTML5. Attribute accesskey class contenteditableNew contextmenuNew dir draggableNew Value character classname true false menu_id ltr rtl true false auto copy move link hidden Description Specifies a keyboard shortcut to access an element Specifies a classname for an element (used for stylesheets) Specifies if the user is allowed to edit the content or not Specifies the context menu for an element Specifies the text direction for the content in an element Specifies whether or not a user is allowed to drag an element Specifies what happens when dragged items/data is dropped in the element

dropzoneNew hiddenNew id lang spellcheckNew style tabindex title « Previous

Specifies that the element is not relevant. Hidden elements are not displayed id Specifies a unique id for an element language_code Specifies a language code for the content in an element true Specifies if the element must have its spelling and grammar checked false style_definition Specifies an inline style for an element number Specifies the tab order of an element text Specifies extra information about an element

HTML5 Global Atribut
«Sebelumnya Referensi Berikutnya » Atribut tercantum di bawah ini didukung oleh semua 5 tag HTML, dengan beberapa pengecualian.

HTML5 Global Atribut
Baru : global atribut Baru di HTML5. Atribut accesskey kelas contenteditable Baru ContextMenu Baru dir draggable Baru Nilai karakter classname benar palsu menu_id ltr rtl benar palsu mobil salinan bergerak link tersembunyi Deskripsi Menentukan cara pintas keyboard untuk mengakses suatu elemen Classname untuk menetapkan suatu elemen (digunakan untuk stylesheet) Menentukan jika pengguna diijinkan untuk mengedit isi atau tidak Menentukan menu konteks untuk suatu elemen Menentukan arah teks untuk konten dalam suatu elemen Menentukan apakah pengguna diperkenankan untuk menyeret elemen Menentukan apa yang terjadi saat ditarik item / data akan diputus dalam elemen

dropzone Baru tersembunyi Baru id lang periksaejaan Baru gaya tabindex judul «Sebelumnya

Menetapkan bahwa unsur tersebut tidak relevan. Tersembunyi elemen tidak ditampilkan id Menentukan sebuah id unik untuk elemen language_code Menentukan kode bahasa untuk isi dalam suatu elemen benar Menentukan jika elemen harus memiliki ejaan dan tata bahasa diperiksa palsu style_definition Menentukan gaya inline untuk elemen nomor Menentukan urutan tab elemen teks Menentukan tambahan informasi tentang elemen Referensi Berikutnya »

HTML5 Event Attributes
« Previous Next Reference »

Global Event Attributes
HTML 4 added the ability to let events trigger actions in a browser, like starting a JavaScript when a user clicks on an element. To learn more about programming events, please visit our JavaScript tutorial and our DHTML tutorial.

Below are the global event attributes that can be inserted into HTML5 elements to define event actions. New : New event attributes in HTML5.

Window Event Attributes
Events triggered for the window object. Applies to the <body> tag: Attribute onafterprintNew onbeforeprintNew onbeforeonloadNew onblur onerrorNew onfocus onhaschangeNew onload onmessageNew onofflineNew ononlineNew onpagehideNew onpageshowNew onpopstateNew onredoNew onresizeNew onstorageNew onundoNew onunloadNew Value Description script Script to be run after the document is printed script Script to be run before the document is printed script Script to be run before the document loads script Script to be run when the window loses focus script Script to be run when an error occur script Script to be run when the window gets focus script Script to be run when the document has change script Script to be run when the document loads script Script to be run when the message is triggered script Script to be run when the document goes offline script Script to be run when the document comes online script Script to be run when the window is hidden script Script to be run when the window becomes visible script Script to be run when the window's history changes script Script to be run when the document performs a redo script Script to be run when the window is resized script Script to be run when a document loads script Script to be run when a document performs an undo script Script to be run when the user leaves the document

Form Events
Events triggered by actions inside a HTML form. Applies to all HTML5 elements, but is most common in form elements: Attribute onblur onchange oncontextmenuNew onfocus onformchangeNew onforminputNew oninputNew oninvalidNew onreset Value Description script Script to be run when an element loses focus script Script to be run when an element changes script Script to be run when a context menu is triggered script Script to be run when an element gets focus script Script to be run when a form changes script Script to be run when a form gets user input script Script to be run when an element gets user input script Script to be run when an element is invalid Script to be run when a form is reset script Not supported in HTML5

onselect onsubmit

script Script to be run when an element is selected script Script to be run when a form is submitted

Keyboard Events
Events triggered by a keyboard. Applies to all HTML5 elements. Attribute onkeydown onkeypress onkeyup Value Description script Script to be run when a key is pressed script Script to be run when a key is pressed and released script Script to be run when a key is released

Mouse Events
Events triggered by a mouse, or similar user actions: Applies to all HTML5 elements. Attribute onclick ondblclick ondragNew ondragendNew ondragenterNew ondragleaveNew ondragoverNew ondragstartNew ondropNew onmousedown onmousemove onmouseout onmouseover onmouseup onmousewheelNew onscrollNew Value Description script Script to be run on a mouse click script Script to be run on a mouse double-click script Script to be run when an element is dragged script Script to be run at the end of a drag operation script Script to be run when an element has been dragged to a valid drop target script Script to be run when an element leaves a valid drop target script Script to be run when an element is being dragged over a valid drop target script Script to be run at the start of a drag operation script Script to be run when dragged element is being dropped script Script to be run when a mouse button is pressed script Script to be run when the mouse pointer moves script Script to be run when the mouse pointer moves out of an element script Script to be run when the mouse pointer moves over an element script Script to be run when a mouse button is released script Script to be run when the mouse wheel is being rotated script Script to be run when an element's scrollbar is being scrolled

Media Events
Events triggered by medias like videos, images and audio. Applies to all HTML5 elements, but is most common in media elements, such as audio, embed, img, object, and video: Attribute Value Description

onabort oncanplayNew

script Script to be run on an abort event script Script to be run when media can start play, but might has to stop for buffering Script to be run when media can be played to the end, without stopping for oncanplaythroughNew script buffering ondurationchangeNew script Script to be run when the length of the media is changed Script to be run when a media resource element suddenly becomes empty onemptiedNew script (network errors, errors on load etc.) onendedNew script Script to be run when media has reach the end onerrorNew script Script to be run when an error occurs during the loading of an element onloadeddataNew script Script to be run when media data is loaded Script to be run when the duration and other media data of a media element is onloadedmetadataNew script loaded onloadstartNew script Script to be run when the browser starts to load the media data onpauseNew script Script to be run when media data is paused onplayNew script Script to be run when media data is going to start playing onplayingNew script Script to be run when media data has start playing onprogressNew script Script to be run when the browser is fetching the media data onratechangeNew script Script to be run when the media data's playing rate has changed onreadystatechangeNew script Script to be run when the ready-state changes Script to be run when a media element's seeking attribute is no longer true, and onseekedNew script the seeking has ended Script to be run when a media element's seeking attribute is true, and the onseekingNew script seeking has begun onstalledNew script Script to be run when there is an error in fetching media data (stalled) Script to be run when the browser has been fetching media data, but stopped onsuspendNew script before the entire media file was fetched ontimeupdateNew script Script to be run when media changes its playing position Script to be run when media changes the volume, also when volume is set to onvolumechangeNew script "mute" onwaitingNew script Script to be run when media has stopped playing, but is expected to resume

« Previous

Next Reference »

HTML5 Tag Reference
« Previous Next Reference »

HTML5
HTML5 improves interoperability and reduces development costs by making precise rules on how to handle all HTML elements, and how to recover from errors. Some of the new features in HTML5 are functions for embedding audio, video, graphics, client-side data storage, and interactive documents. HTML5 also contains new elements like <nav>, <header>, <footer>, and <figure>. The HTML5 working group includes AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera, and many hundreds of other vendors.

Note: HTML5 is not a W3C recommendation yet! To read about the HTML5 activities at W3C, please read our W3C tutorial.

Ordered Alphabetically
New : New tags in HTML5. Tag <!--...--> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article>New <aside>New <audio>New <b> <base> <basefont> <bdo> <big> <blockquote> <body> <br> <button> <canvas>New <caption> <center> <cite> <code> <col> <colgroup> <command>New <datalist>New <dd> <del> <details>New <dfn> <dir> <div> <dl> <dt> <em> <embed>New <fieldset> Description Defines a comment Defines the document type Defines a hyperlink Defines an abbreviation Not supported in HTML5. Defines an address element Not supported in HTML5. Defines an area inside an image map Defines an article Defines content aside from the page content Defines sound content Defines bold text Defines a base URL for all the links in a page Not supported in HTML5. Defines the direction of text display Not supported in HTML5. Defines a long quotation Defines the body element Inserts a single line break Defines a push button Defines graphics Defines a table caption Not supported in HTML5. Defines a citation Defines computer code text Defines attributes for table columns Defines groups of table columns Defines a command button Defines a dropdown list Defines a definition description Defines deleted text Defines details of an element Defines a definition term Not supported in HTML5. Defines a section in a document Defines a definition list Defines a definition term Defines emphasized text Defines external interactive content or plugin Defines a fieldset

<figcaption>New <figure>New <font> <footer>New <form> <frame> <frameset> <h1> to <h6> <head> <header>New <hgroup>New <hr> <html> <i> <iframe> <img> <input> <ins> <keygen>New <kbd> <label> <legend> <li> <link> <map> <mark>New <menu> <meta> <meter>New <nav>New <noframes> <noscript> <object> <ol> <optgroup> <option> <output>New <p> <param> <pre> <progress>New <q> <rp>New <rt>New <ruby>New <s> <samp> <script> <section>New <select>

Defines the caption of a figure element Defines a group of media content, and their caption Not supported in HTML5. Defines a footer for a section or page Defines a form Not supported in HTML5. Not supported in HTML5. Defines header 1 to header 6 Defines information about the document Defines a header for a section or page Defines information about a section in a document Defines a horizontal rule Defines an html document Defines italic text Defines an inline sub window (frame) Defines an image Defines an input field Defines inserted text Defines a generated key in a form Defines keyboard text Defines a label for a form control Defines a title in a fieldset Defines a list item Defines a resource reference Defines an image map Defines marked text Defines a menu list Defines meta information Defines measurement within a predefined range Defines navigation links Not supported in HTML5. Defines a noscript section Defines an embedded object Defines an ordered list Defines an option group Defines an option in a drop-down list Defines some types of output Defines a paragraph Defines a parameter for an object Defines preformatted text Defines progress of a task of any kind Defines a short quotation Used in ruby annotations to define what to show browsers that to not support the ruby element. Defines explanation to ruby annotations. Defines ruby annotations Defines text that is no longer correct Defines sample computer code Defines a script Defines a section Defines a selectable list

<small> <source>New <span> <strike> <strong> <style> <sub> <summary>New <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <time>New <title> <tr> <tt> <u> <ul> <var> <video>New <wbr>New <xmp> « Previous

Defines small text Defines media resources Defines a section in a document Not supported in HTML5. Defines strong text Defines a style definition Defines subscripted text Defines the header of a "detail" element Defines superscripted text Defines a table Defines a table body Defines a table cell Defines a text area Defines a table footer Defines a table header Defines a table header Defines a date/time Defines the document title Defines a table row Not supported in HTML5. Not supported in HTML5. Defines an unordered list Defines a variable Defines a video Defines a possible line-break Not supported in HTML5.

HTML5 Tag Reference
« Previous Next Reference »

HTML5
HTML5 improves interoperability and reduces development costs by making precise rules on how to handle all HTML elements, and how to recover from errors. Some of the new features in HTML5 are functions for embedding audio, video, graphics, client-side data storage, and interactive documents. HTML5 also contains new elements like <nav>, <header>, <footer>, and <figure>. The HTML5 working group includes AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera, and many hundreds of other vendors. Note: HTML5 is not a W3C recommendation yet! To read about the HTML5 activities at W3C, please read our W3C tutorial.

Ordered Alphabetically
New : New tags in HTML5. Tag <!--...--> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article>New <aside>New <audio>New <b> <base> <basefont> <bdo> <big> <blockquote> <body> <br> <button> <canvas>New <caption> <center> <cite> <code> <col> <colgroup> <command>New <datalist>New <dd> <del> <details>New <dfn> <dir> <div> <dl> <dt> <em> <embed>New <fieldset> <figcaption>New <figure>New <font> <footer>New <form> <frame> Description Defines a comment Defines the document type Defines a hyperlink Defines an abbreviation Not supported in HTML5. Defines an address element Not supported in HTML5. Defines an area inside an image map Defines an article Defines content aside from the page content Defines sound content Defines bold text Defines a base URL for all the links in a page Not supported in HTML5. Defines the direction of text display Not supported in HTML5. Defines a long quotation Defines the body element Inserts a single line break Defines a push button Defines graphics Defines a table caption Not supported in HTML5. Defines a citation Defines computer code text Defines attributes for table columns Defines groups of table columns Defines a command button Defines a dropdown list Defines a definition description Defines deleted text Defines details of an element Defines a definition term Not supported in HTML5. Defines a section in a document Defines a definition list Defines a definition term Defines emphasized text Defines external interactive content or plugin Defines a fieldset Defines the caption of a figure element Defines a group of media content, and their caption Not supported in HTML5. Defines a footer for a section or page Defines a form Not supported in HTML5.

<frameset> <h1> to <h6> <head> <header>New <hgroup>New <hr> <html> <i> <iframe> <img> <input> <ins> <keygen>New <kbd> <label> <legend> <li> <link> <map> <mark>New <menu> <meta> <meter>New <nav>New <noframes> <noscript> <object> <ol> <optgroup> <option> <output>New <p> <param> <pre> <progress>New <q> <rp>New <rt>New <ruby>New <s> <samp> <script> <section>New <select> <small> <source>New <span> <strike> <strong> <style>

Not supported in HTML5. Defines header 1 to header 6 Defines information about the document Defines a header for a section or page Defines information about a section in a document Defines a horizontal rule Defines an html document Defines italic text Defines an inline sub window (frame) Defines an image Defines an input field Defines inserted text Defines a generated key in a form Defines keyboard text Defines a label for a form control Defines a title in a fieldset Defines a list item Defines a resource reference Defines an image map Defines marked text Defines a menu list Defines meta information Defines measurement within a predefined range Defines navigation links Not supported in HTML5. Defines a noscript section Defines an embedded object Defines an ordered list Defines an option group Defines an option in a drop-down list Defines some types of output Defines a paragraph Defines a parameter for an object Defines preformatted text Defines progress of a task of any kind Defines a short quotation Used in ruby annotations to define what to show browsers that to not support the ruby element. Defines explanation to ruby annotations. Defines ruby annotations Defines text that is no longer correct Defines sample computer code Defines a script Defines a section Defines a selectable list Defines small text Defines media resources Defines a section in a document Not supported in HTML5. Defines strong text Defines a style definition

<sub> <summary>New <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <time>New <title> <tr> <tt> <u> <ul> <var> <video>New <wbr>New <xmp> « Previous

Defines subscripted text Defines the header of a "detail" element Defines superscripted text Defines a table Defines a table body Defines a table cell Defines a text area Defines a table footer Defines a table header Defines a table header Defines a date/time Defines the document title Defines a table row Not supported in HTML5. Not supported in HTML5. Defines an unordered list Defines a variable Defines a video Defines a possible line-break Not supported in HTML5.

HTML5 Tag Referensi
«Sebelumnya Referensi Berikutnya »

HTML5
HTML5 meningkatkan interoperabilitas dan mengurangi biaya pengembangan dengan membuat aturan yang tepat tentang bagaimana untuk menangani semua elemen HTML, dan bagaimana memulihkan dari kesalahan. Beberapa fitur baru dalam HTML5 adalah fungsi untuk audio embedding, video, grafik, klien-sisi penyimpanan data, dan dokumen interaktif. HTML5 juga mengandung unsur-unsur baru seperti <nav>,, <header> <footer>, dan <figure>. Kelompok HTML5 kerja termasuk AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera, dan ratusan vendor lainnya. Catatan: HTML5 bukan rekomendasi W3C yet! Untuk membaca tentang kegiatan HTML5 di W3C, silahkan baca tutorial W3C .

Memerintahkan abjad
Baru : Baru tag di HTML5. Tag Deskripsi

<!--...--> <! DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> Baru <aside> Baru <audio> Baru <b> <base> <basefont> <bdo> <big> <blockquote> <body> <br> <button> <canvas> Baru <caption> <center> <cite> <code> <col> <colgroup> <command> Baru <datalist> Baru <dd> <del> <details> Baru <dfn> <dir> <div> <dl> <dt> <em> <embed> Baru <fieldset> <figcaption> Baru <figure> Baru <FONT> <footer> Baru <form> <frame> <frameset> <h1> untuk <h6> <head> <header> Baru <hgroup> Baru

Mendefinisikan komentar Mendefinisikan jenis dokumen Mendefinisikan hyperlink Mendefinisikan singkatan Tidak didukung di HTML5. Mendefinisikan elemen alamat Tidak didukung di HTML5. Mendefinisikan area dalam peta gambar Mendefinisikan artikel Mendefinisikan konten selain dari konten halaman Mendefinisikan isi suara Mendefinisikan teks tebal Mendefinisikan URL dasar untuk semua link dalam halaman Tidak didukung di HTML5. Mendefinisikan arah tampilan teks Tidak didukung di HTML5. Mendefinisikan sebuah kutipan panjang Mendefinisikan elemen body Menyisipkan break satu baris Mendefinisikan tombol push Mendefinisikan grafis Mendefinisikan sebuah judul tabel Tidak didukung di HTML5. Mendefinisikan kutipan Mendefinisikan kode teks komputer Mendefinisikan atribut untuk kolom tabel Mendefinisikan kelompok kolom tabel Mendefinisikan tombol perintah Mendefinisikan sebuah daftar dropdown Mendefinisikan sebuah deskripsi definisi Mendefinisikan teks yang dihapus Mendefinisikan elemen rincian Mendefinisikan sebuah istilah definisi Tidak didukung di HTML5. Mendefinisikan sebuah bagian dalam dokumen Mendefinisikan sebuah daftar definisi Mendefinisikan sebuah istilah definisi Mendefinisikan teks menekankan Mendefinisikan konten interaktif eksternal atau plugin Mendefinisikan sebuah fieldset Mendefinisikan judul dari unsur tokoh Mendefinisikan sekelompok konten media, dan keterangan mereka Tidak didukung di HTML5. Mendefinisikan sebuah footer untuk bagian atau halaman Mendefinisikan bentuk Tidak didukung di HTML5. Tidak didukung di HTML5. Mendefinisikan header 1 ke header 6 Mendefinisikan informasi tentang dokumen Mendefinisikan sebuah header untuk bagian atau halaman Mendefinisikan informasi tentang sebuah bagian dalam dokumen

<hr> <html> <i> <iframe> <img> <input> <ins> <keygen> Baru <kbd> <label> <legend> <li> <link> <map> <mark> Baru <menu> <META> <meter> Baru <nav> Baru <noframes> <noscript> <object> <ol> <optgroup> <option> <output> Baru <p> <param> <pre> <progress> Baru <q> <rp> Baru <rt> Baru <ruby> Baru <s> <samp> <script> <section> Baru <select> <small> <source> Baru <span> <strike> <strong> <style> <sub> <summary> Baru <sup> <table> <tbody>

Mendefinisikan aturan horisontal Mendefinisikan dokumen html Mendefinisikan teks miring Mendefinisikan suatu inline sub window (frame) Mendefinisikan gambar Mendefinisikan sebuah field input Mendefinisikan teks yang disisipkan Mendefinisikan sebuah kunci yang dihasilkan dalam bentuk suatu Mendefinisikan teks keyboard Mendefinisikan label untuk kontrol form Mendefinisikan sebuah judul di sebuah fieldset Mendefinisikan item daftar Mendefinisikan referensi sumber daya Mendefinisikan peta gambar Mendefinisikan teks ditandai Mendefinisikan daftar menu Mendefinisikan informasi meta Mendefinisikan pengukuran dalam rentang yang telah ditentukan Mendefinisikan navigasi link Tidak didukung di HTML5. Mendefinisikan sebuah bagian noscript Mendefinisikan sebuah objek tertanam Mendefinisikan ordered list Mendefinisikan grup pilihan Mendefinisikan pilihan dalam daftar drop-down Mendefinisikan beberapa jenis output Mendefinisikan paragraf Mendefinisikan parameter untuk objek Mendefinisikan teks terformat Mendefinisikan kemajuan tugas apapun Mendefinisikan kutipan pendek Digunakan dalam anotasi ruby untuk menentukan apa yang harus menunjukkan browser yang tidak mendukung elemen ruby. Mendefinisikan penjelasan untuk ruby penjelasan. Mendefinisikan ruby penjelasan Mendefinisikan teks yang tidak lagi benar Mendefinisikan sampel kode komputer Mendefinisikan script Mendefinisikan bagian Mendefinisikan daftar dipilih Mendefinisikan teks kecil Mendefinisikan sumber daya media Mendefinisikan sebuah bagian dalam dokumen Tidak didukung di HTML5. Mendefinisikan teks yang kuat Mendefinisikan suatu definisi gaya Mendefinisikan teks subscript Mendefinisikan header dari unsur "detail" Mendefinisikan teks superscripted Mendefinisikan tabel Mendefinisikan sebuah badan tabel

<td> <textarea> <tfoot> <th> <thead> <time> Baru <title> <tr> <tt> <u> <ul> <var> <video> Baru <wbr> Baru <xmp>

Mendefinisikan sebuah sel tabel Mendefinisikan sebuah area teks Mendefinisikan sebuah footer tabel Mendefinisikan sebuah header tabel Mendefinisikan sebuah header tabel Mendefinisikan sebuah tanggal / waktu Mendefinisikan judul dokumen Mendefinisikan sebuah baris tabel Tidak didukung di HTML5. Tidak didukung di HTML5. Mendefinisikan unordered list Mendefinisikan variabel Mendefinisikan video Mendefinisikan sebuah line break-kemungkinan Tidak didukung di HTML5.

HTML5 Global Attributes
New : New global attributes in HTML5. Attribute accesskey class contenteditableNew contextmenuNew dir draggableNew Value character classname true false menu_id ltr rtl true false auto copy move link hidden Description Specifies a keyboard shortcut to access an element Specifies a classname for an element (used for stylesheets) Specifies if the user is allowed to edit the content or not Specifies the context menu for an element Specifies the text direction for the content in an element Specifies whether or not a user is allowed to drag an element Specifies what happens when dragged items/data is dropped in the element

dropzoneNew hiddenNew id lang spellcheckNew style tabindex title « Previous

Specifies that the element is not relevant. Hidden elements are not displayed id Specifies a unique id for an element language_code Specifies a language code for the content in an element true Specifies if the element must have its spelling and grammar checked false style_definition Specifies an inline style for an element number Specifies the tab order of an element text Specifies extra information about an element

HTML5 Global Attributes
New : New global attributes in HTML5. Attribute accesskey Value character Description Specifies a keyboard shortcut to access an element

class contenteditableNew contextmenuNew dir draggableNew

dropzoneNew hiddenNew id lang spellcheckNew style tabindex title « Previous

classname true false menu_id ltr rtl true false auto copy move link hidden

Specifies a classname for an element (used for stylesheets) Specifies if the user is allowed to edit the content or not Specifies the context menu for an element Specifies the text direction for the content in an element Specifies whether or not a user is allowed to drag an element Specifies what happens when dragged items/data is dropped in the element

Specifies that the element is not relevant. Hidden elements are not displayed id Specifies a unique id for an element language_code Specifies a language code for the content in an element true Specifies if the element must have its spelling and grammar checked false style_definition Specifies an inline style for an element number Specifies the tab order of an element text Specifies extra information about an element

HTML5 Event Attributes
« Previous Next Reference »

Global Event Attributes
HTML 4 added the ability to let events trigger actions in a browser, like starting a JavaScript when a user clicks on an element. To learn more about programming events, please visit our JavaScript tutorial and our DHTML tutorial. Below are the global event attributes that can be inserted into HTML5 elements to define event actions. New : New event attributes in HTML5.

Window Event Attributes
Events triggered for the window object. Applies to the <body> tag: Attribute onafterprintNew onbeforeprintNew onbeforeonloadNew Value Description script Script to be run after the document is printed script Script to be run before the document is printed script Script to be run before the document loads

onblur onerrorNew onfocus onhaschangeNew onload onmessageNew onofflineNew ononlineNew onpagehideNew onpageshowNew onpopstateNew onredoNew onresizeNew onstorageNew onundoNew onunloadNew

script script script script script script script script script script script script script script script script

Script to be run when the window loses focus Script to be run when an error occur Script to be run when the window gets focus Script to be run when the document has change Script to be run when the document loads Script to be run when the message is triggered Script to be run when the document goes offline Script to be run when the document comes online Script to be run when the window is hidden Script to be run when the window becomes visible Script to be run when the window's history changes Script to be run when the document performs a redo Script to be run when the window is resized Script to be run when a document loads Script to be run when a document performs an undo Script to be run when the user leaves the document

Form Events
Events triggered by actions inside a HTML form. Applies to all HTML5 elements, but is most common in form elements: Attribute onblur onchange oncontextmenuNew onfocus onformchangeNew onforminputNew oninputNew oninvalidNew onreset onselect onsubmit Value Description script Script to be run when an element loses focus script Script to be run when an element changes script Script to be run when a context menu is triggered script Script to be run when an element gets focus script Script to be run when a form changes script Script to be run when a form gets user input script Script to be run when an element gets user input script Script to be run when an element is invalid Script to be run when a form is reset script Not supported in HTML5 script Script to be run when an element is selected script Script to be run when a form is submitted

Keyboard Events
Events triggered by a keyboard. Applies to all HTML5 elements. Attribute onkeydown onkeypress onkeyup Value Description script Script to be run when a key is pressed script Script to be run when a key is pressed and released script Script to be run when a key is released

Mouse Events
Events triggered by a mouse, or similar user actions: Applies to all HTML5 elements. Attribute onclick ondblclick ondragNew ondragendNew ondragenterNew ondragleaveNew ondragoverNew ondragstartNew ondropNew onmousedown onmousemove onmouseout onmouseover onmouseup onmousewheelNew onscrollNew Value Description script Script to be run on a mouse click script Script to be run on a mouse double-click script Script to be run when an element is dragged script Script to be run at the end of a drag operation script Script to be run when an element has been dragged to a valid drop target script Script to be run when an element leaves a valid drop target script Script to be run when an element is being dragged over a valid drop target script Script to be run at the start of a drag operation script Script to be run when dragged element is being dropped script Script to be run when a mouse button is pressed script Script to be run when the mouse pointer moves script Script to be run when the mouse pointer moves out of an element script Script to be run when the mouse pointer moves over an element script Script to be run when a mouse button is released script Script to be run when the mouse wheel is being rotated script Script to be run when an element's scrollbar is being scrolled

Media Events
Events triggered by medias like videos, images and audio. Applies to all HTML5 elements, but is most common in media elements, such as audio, embed, img, object, and video: Attribute onabort oncanplayNew Value Description script Script to be run on an abort event script Script to be run when media can start play, but might has to stop for buffering Script to be run when media can be played to the end, without stopping for oncanplaythroughNew script buffering ondurationchangeNew script Script to be run when the length of the media is changed Script to be run when a media resource element suddenly becomes empty onemptiedNew script (network errors, errors on load etc.) onendedNew script Script to be run when media has reach the end onerrorNew script Script to be run when an error occurs during the loading of an element onloadeddataNew script Script to be run when media data is loaded Script to be run when the duration and other media data of a media element is onloadedmetadataNew script loaded onloadstartNew script Script to be run when the browser starts to load the media data onpauseNew script Script to be run when media data is paused onplayNew script Script to be run when media data is going to start playing

onplayingNew script onprogressNew script onratechangeNew script onreadystatechangeNew script onseekedNew onseekingNew onstalledNew onsuspendNew ontimeupdateNew onvolumechangeNew onwaitingNew script script script script script script script

Script to be run when media data has start playing Script to be run when the browser is fetching the media data Script to be run when the media data's playing rate has changed Script to be run when the ready-state changes Script to be run when a media element's seeking attribute is no longer true, and the seeking has ended Script to be run when a media element's seeking attribute is true, and the seeking has begun Script to be run when there is an error in fetching media data (stalled) Script to be run when the browser has been fetching media data, but stopped before the entire media file was fetched Script to be run when media changes its playing position Script to be run when media changes the volume, also when volume is set to "mute" Script to be run when media has stopped playing, but is expected to resume

« Previous

HTML5 Event Atribut
«Sebelumnya Referensi Berikutnya »

Global Event Atribut
HTML 4 menambahkan kemampuan untuk membiarkan kejadian memicu tindakan dalam browser, seperti memulai JavaScript ketika pengguna mengklik elemen. Untuk mempelajari lebih lanjut tentang kejadian pemrograman, silakan kunjungi kami JavaScript tutorial dan kami DHTML tutorial . Berikut ini adalah atribut acara global yang dapat dimasukkan ke dalam elemen HTML5 untuk menentukan tindakan acara. Baru : Acara baru atribut di HTML5.

Event Window Atribut
Acara memicu untuk objek jendela. Berlaku untuk tag <body>: Atribut onafterprint Baru onbeforeprint Baru onbeforeonload Baru onblur OnError Baru onfocus Nilai Deskripsi naskah Script yang akan dijalankan setelah dokumen dicetak naskah Script yang akan dijalankan sebelum dokumen dicetak naskah Script yang akan dijalankan sebelum beban dokumen naskah Script untuk dijalankan ketika jendela kehilangan fokus naskah Script untuk dijalankan ketika kesalahan terjadi naskah Script untuk dijalankan ketika mendapat fokus jendela

onhaschange Baru onload onmessage Baru onoffline Baru ononline Baru onpagehide Baru onpageshow Baru onpopstate Baru onredo Baru onresize Baru onstorage Baru onundo Baru onunload Baru

naskah Script untuk dijalankan ketika dokumen telah berubah naskah Script untuk dijalankan ketika dokumen beban naskah Script yang akan dijalankan bila pesan dipicu naskah Script untuk dijalankan ketika dokumen masuk offline naskah Script untuk dijalankan ketika dokumen datang online naskah Script untuk dijalankan ketika jendela tersembunyi naskah Script untuk dijalankan ketika jendela menjadi terlihat naskah Script untuk dijalankan ketika jendela sejarah perubahan naskah Script untuk dijalankan ketika dokumen melakukan redo naskah Script untuk dijalankan ketika jendela diubah ukurannya naskah Script untuk dijalankan ketika beban dokumen naskah Script untuk dijalankan ketika dokumen melakukan undo naskah Script untuk dijalankan ketika user meninggalkan dokumen

Formulir Acara
Peristiwa dipicu oleh tindakan dalam bentuk HTML. Berlaku untuk semua elemen HTML5, tetapi yang paling umum pada elemen form: Atribut onblur onchange oncontextmenu Baru onfocus onformchange Baru onforminput Baru oninput Baru oninvalid Baru onreset onselect onsubmit Nilai naskah naskah naskah naskah naskah naskah naskah naskah Deskripsi Script untuk dijalankan ketika elemen kehilangan fokus Script untuk dijalankan ketika sebuah perubahan unsur Script untuk dijalankan ketika menu konteks dipicu Script untuk dijalankan ketika elemen mendapat fokus Script untuk dijalankan ketika sebuah perubahan bentuk Script untuk dijalankan ketika bentuk mendapat input pengguna Script untuk dijalankan ketika elemen mendapat input pengguna Script untuk dijalankan ketika elemen tidak valid Script untuk dijalankan ketika formulir reset naskah Tidak didukung di HTML5 naskah Script untuk dijalankan ketika elemen dipilih naskah Script untuk dijalankan ketika formulir dikirimkan

Keyboard Acara
Peristiwa dipicu oleh keyboard. Berlaku untuk semua elemen HTML5. Atribut onkeydown onkeypress onkeyup Nilai naskah naskah naskah Deskripsi Script untuk dijalankan ketika tombol ditekan Script untuk dijalankan ketika tombol ditekan dan dilepaskan Script untuk dijalankan ketika tombol dilepaskan

Mouse Acara
Peristiwa dipicu oleh mouse, atau tindakan pengguna serupa: Berlaku untuk semua elemen HTML5. Atribut onclick ondblclick ondrag Baru ondragend Baru ondragenter Baru ondragleave Baru ondragover Baru ondragstart Baru ondrop Baru onmousedown onmousemove title onmouseover onmouseup onmousewheel Baru onscroll Baru Nilai naskah naskah naskah naskah naskah naskah naskah naskah naskah naskah naskah naskah naskah naskah naskah naskah Deskripsi Script untuk dijalankan pada klik mouse Script untuk dijalankan pada mouse klik ganda Script untuk dijalankan ketika elemen diseret Script untuk dijalankan pada akhir sebuah operasi drag Script untuk dijalankan ketika elemen yang terbawa ke target penurunan yang valid Script untuk dijalankan ketika elemen meninggalkan target penurunan yang valid Script untuk dijalankan ketika elemen sedang diseret atas target penurunan yang valid Script untuk dijalankan pada awal operasi drag Script yang akan dijalankan ketika unsur diseret sedang jatuh Script untuk dijalankan ketika tombol mouse ditekan Script untuk dijalankan ketika pointer mouse memindahkan Script untuk dijalankan ketika pointer mouse bergerak dari suatu elemen Script untuk dijalankan ketika pointer mouse bergerak di atas suatu elemen Script untuk dijalankan ketika tombol mouse dilepaskan Script untuk dijalankan ketika mouse wheel sedang diputar Script untuk dijalankan ketika scrollbar sebuah elemen sedang menggulir

Media Acara
Peristiwa dipicu oleh media seperti video, gambar dan audio. Berlaku untuk semua elemen HTML5, tetapi yang paling umum pada elemen media, seperti audio, embed, img, objek, dan video: Atribut onabort Nilai Deskripsi naskah Script untuk dijalankan pada peristiwa membatalkan Script untuk dijalankan ketika media bisa mulai bermain, tapi mungkin harus oncanplay Baru naskah berhenti untuk buffering Script untuk dijalankan ketika media dapat dimainkan sampai akhir, tanpa oncanplaythrough Baru naskah berhenti untuk buffering ondurationchange Baru naskah Script untuk dijalankan ketika panjang media berubah Script untuk dijalankan ketika elemen sumber daya media tiba-tiba menjadi onemptied Baru naskah (kesalahan jaringan, kesalahan pada beban dll) kosong onended Baru naskah Script untuk dijalankan ketika media telah mencapai akhir OnError Baru naskah Script untuk dijalankan ketika kesalahan terjadi selama pemuatan elemen onloadeddata Baru naskah Script untuk dijalankan ketika media data dimuat Script untuk dijalankan ketika durasi dan media lainnya data elemen media onloadedmetadata Baru naskah dimuat onloadstart Baru naskah Script untuk dijalankan ketika browser mulai memuat data media onpause Baru naskah Script untuk dijalankan ketika media data dihentikan sementara

onplay Baru naskah onplaying Baru naskah onprogress Baru naskah onratechange Baru naskah onreadystatechange Baru naskah onseeked Baru onseeking Baru onstalled Baru onsuspend Baru ontimeupdate Baru onvolumechange Baru onwaiting Baru naskah naskah naskah naskah naskah naskah naskah

Script untuk dijalankan ketika media data akan mulai bermain Script untuk dijalankan ketika media data telah mulai bermain Script yang akan dijalankan bila browser mengambil data media Script untuk dijalankan apabila laju bermain data media telah berubah Script untuk dijalankan ketika perubahan siap-negara Script untuk dijalankan ketika atribut elemen media mencari tidak lagi benar, dan mencari telah berakhir Script untuk dijalankan ketika atribut elemen media mencari benar, dan telah mulai mencari Script yang akan dijalankan bila ada kesalahan dalam mengambil data media (macet) Script untuk dijalankan ketika browser telah mengambil data media, tapi berhenti sebelum seluruh file media dijemput Script untuk dijalankan ketika media berubah posisi bermain yang Script untuk dijalankan ketika media perubahan volume, juga ketika volume disetel ke "bisu" Script untuk dijalankan ketika media sudah berhenti bermain, namun diperkirakan untuk melanjutkan

«Sebelumnya

Sponsor Documents


Recommended

No recommend documents

Or use your account on DocShare.tips

Hide

Forgot your password?

Or register your new account on DocShare.tips

Hide

Lost your password? Please enter your email address. You will receive a link to create a new password.

Back to log-in

Close