() translation by (you can also view the original English article)
Terkadang, kami mengunjungi beberapa posting favorit pembaca kami dari sepanjang sejarah Tuts+. Tutorial ini pertama kali diterbitkan pada bulan Agustus 2010.
Industri ini bergerak cepat -- sangat cepat! Jika Anda tidak berhati-hati, Anda akan ditinggalkan dalam debunya. Jadi, jika Anda merasa sedikit kewalahan dengan perubahan/pembaruan yang akan datang di HTML5, gunakan ini sebagai dasar dari hal-hal yang harus Anda ketahui.
1. Doctype Baru
Masih menggunakan doctype XHTML yang sial, yang tidak mungkin dihafalkan?
1 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
2 |
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
Jika ya, mengapa? Beralihlah ke DOCTYPE HTML5 yang baru. Anda akan hidup lebih lama -- seperti yang dikatakan Douglas Quaid.
1 |
<!DOCTYPE html>
|
Sebenarnya, tahukah Anda bahwa jujur itu sebenarnya bukan hal yang benar-benar diperlukan untuk HTML5? Bagaimanapun juga, ini digunakan untuk browser saat ini, dan yang lebih lama yang memerlukan doctype tertentu. Browser yang tidak mengerti doctype ini hanya akan me-render markup yang terkandung dalam mode standar. Jadi, tanpa perlu khawatir, jangan ragu untuk berhati-hati terhadap anginnya, dan rangkul doctype HTML yang baru.
2. Elemen Figure
Pertimbangkan mark-up berikut untuk sebuah gambar:
1 |
<img src="path/to/image" alt="About image" /> |
2 |
<p>Image of Mars. </p> |
Sayangnya tidak ada cara mudah atau semantik untuk mengaitkan keterangan, terbungkus sebuah tag paragraf, dengan elemen gambar itu sendiri. HTML5 memperbaiki hal ini, dengan diperkenalkannya elemen <figure>. Ketika dikombinasikan dengan elemen <figcaption>, sekarang kita bisa secara semantik mengasosiasikan teks dengan rekan gambar mereka.
1 |
<figure>
|
2 |
<img src="path/to/image" alt="About image" /> |
3 |
<figcaption>
|
4 |
<p>This is an image of something interesting. </p> |
5 |
</figcaption>
|
6 |
</figure>
|
3. <small> Didefinisikan Ulang
Belum lama ini, saya menggunakan elemen <small> untuk membuat sub judul yang terkait erat dengan logo. Ini adalah elemen presentasi yang berguna; namun, sekarang, itu akan menjadi penggunaan yang tidak sesuai. Elemen small telah didefinisikan ulang, lebih tepat, untuk merujuk pada pencetakan yang kecil. Bayangkan sebuah pernyataan hak cipta di footer situs Anda; sesuai dengan definisi HTML5 yang baru dari elemen ini; <small> akan menjadi pembungkus yang sesuai untuk informasi ini.
Elemen
smallsekarang mengacu pada "pencetakan yang kecil".
4. Tidak ada lagi Type untuk Script dan Link
Anda mungkin masih menambahkan atribut type ke tag link dan script Anda.
1 |
<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" /> |
2 |
<script type="text/javascript" src="path/to/script.js"></script> |
Ini tidak lagi diperlukan. Ini menyiratkan bahwa kedua tag ini mengacu pada stylesheet dan skrip, masing-masing. Dengan demikian, kita bisa menghapus atribut type secara bersamaan.
1 |
<link rel="stylesheet" href="path/to/stylesheet.css" /> |
2 |
<script src="path/to/script.js"></script> |
5. Mengutip atau Tidak Mengutip
....Itu pertanyaannya. Ingat, HTML5 bukanlah XHTML. Anda tidak perlu membungkus atribut Anda dalam tanda petik jika Anda tidak menginginkannya. Anda tidak harus menutup elemen Anda. Dengan mengatakan bahwa, tidak ada salahnya melakukannya, jika itu membuat Anda merasa lebih nyaman. Saya merasa bahwa ini benar untuk diri saya sendiri.
1 |
<p class=myClass id=someId> Start the reactor. |
Buatlah keputusan Anda sendiri pada yang satu ini. Jika Anda lebih memilih dokumen yang lebih terstruktur, dengan segala cara, tetaplah dengan tanda petik.
6. Jadikan Konten Anda Dapat Diedit
Browser yang baru memiliki atribut baru yang bagus yang dapat diterapkan pada elemen-elemen, yang disebut contenteditable. Sesuai namanya, ini memungkinkan pengguna untuk mengedit teks yang ada di dalam elemen, termasuk anak-anaknya. Ada berbagai kegunaan untuk sesuatu seperti ini, termasuk aplikasi yang sederhana seperti to-do list, yang juga memanfaatkan penyimpanan lokal.
1 |
<!DOCTYPE html>
|
2 |
|
3 |
<html lang="en"> |
4 |
<head>
|
5 |
<meta charset="utf-8"> |
6 |
<title>untitled</title> |
7 |
</head>
|
8 |
<body>
|
9 |
<h2> To-Do List </h2> |
10 |
<ul contenteditable="true"> |
11 |
<li> Break mechanical cab driver. </li> |
12 |
<li> Drive to abandoned factory
|
13 |
<li> Watch video of self </li> |
14 |
</ul>
|
15 |
</body>
|
16 |
</html>
|
Atau, seperti yang kita pelajari di tip sebelumnya, kita bisa menuliskannya sebagai:
1 |
<ul contenteditable=true> |
7. Input Email
Jika kita menerapkan type "email" untuk input form, kita dapat menginstruksikan browser untuk hanya mengizinkan string yang sesuai dengan struktur alamat email yang valid. Betul; validasi form bawaan akan segera ada disini! Kita tidak bisa 100% mengandalkan ini dulu, untuk alasan yang jelas. Di browser lawas yang tidak memahami jenis "email" ini, mereka hanya akan kembali ke kotak teks biasa.
1 |
<!DOCTYPE html>
|
2 |
|
3 |
<html lang="en"> |
4 |
<head>
|
5 |
<meta charset="utf-8"> |
6 |
<title>untitled</title> |
7 |
</head>
|
8 |
<body>
|
9 |
<form action="" method="get"> |
10 |
<label for="email">Email:</label> |
11 |
<input id="email" name="email" type="email" /> |
12 |
|
13 |
<button type="submit"> Submit Form </button> |
14 |
</form>
|
15 |
</body>
|
16 |
</html>
|
Saat ini, kita tidak bisa bergantung pada validasi browser. Solusi sisi server/klien masih harus diterapkan.
Perlu juga dicatat bahwa semua browser saat ini sedikit miring saat menyangkut elemen-elemen dan atribut apa yang mereka dukung dan yang tidak. Sebagai contoh, Opera tampaknya mendukung validasi email, asalkan atribut name ditentukan. Bagaimanapun juga, ini tidak mendukung atribut placeholder, yang akan kita pelajari di tip berikutnya. Intinya, jangan tergantung pada validasi form ini dulu ... tapi Anda tetap bisa menggunakannya!
8. Placeholder
Sebelumnya, kita harus menggunakan sedikit JavaScript untuk membuat placeholder untuk textbox. Tentu, awalnya Anda dapat menetapkan atribut value yang Anda inginkan, tapi, begitu pengguna menghapus teks dan mengklik lainnya, masukan akan dibiarkan kosong lagi. Atribut placeholder memperbaiki hal ini.
1 |
<input name="email" type="email" placeholder="doug@givethesepeopleair.com" /> |
Sekali lagi, dukungannya sangat diragukan di seluruh browser, namun, ini akan terus meningkat dengan setiap rilis baru. Selain itu, jika browser, seperti Firefox dan Opera, saat ini tidak mendukung atribut placeholder, tidak ada salahnya dilakukan.
9. Penyimpanan Lokal
Berkat penyimpanan lokal (bukan secara resmi HTML5, namun dikelompokkan demi kenyamanan), kita bisa membuat browser canggih "mengingat" apa yang kita ketik, bahkan setelah browser ditutup atau di-refresh.
"localStorage menetapkan field pada domain. Bahkan saat Anda menutup browser, membukanya kembali, dan kembali ke situs, ia mengingat semua field di localStorage."
-QuirksBlog
Meski jelas tidak didukung di semua browser, kita bisa mengharapkan metode ini bekerja, terutama di Internet Explorer 8, Safari 4, dan Firefox 3.5. Perhatikan bahwa, untuk mengimbangi browser lawas yang tidak akan mengenali penyimpanan lokal, Anda harus menguji terlebih dahulu untuk menentukan apakah ada window.localStorage.
10. Header dan Footer yang Semantik
Lewatlah sudah hari-hari dari:
1 |
<div id="header"> |
2 |
... |
3 |
</div>
|
4 |
|
5 |
<div id="footer"> |
6 |
... |
7 |
</div>
|
Div, secara alami, tidak memiliki struktur semantik -- bahkan setelah id diterapkan. Sekarang, dengan HTML5, kita memiliki akses ke elemen <header> dan <footer>. Mark-up di atas sekarang bisa diganti dengan:
1 |
<header>
|
2 |
... |
3 |
</header>
|
4 |
|
5 |
<footer>
|
6 |
... |
7 |
</footer>
|
Ini sepenuhnya sesuai untuk memiliki banyak
headerdanfooterdalam proyek Anda.
Cobalah untuk tidak membingungkan elemen-elemen ini dengan "header" dan "footer" dari situs Anda. Mereka hanya mengacu pada kontainer mereka. Dengan demikian, masuk akal untuk menempatkan, misalnya, informasi meta di bagian bawah posting blog dalam elemen footer. Hal yang sama berlaku untuk header.
11. Fitur Form HTML5 Lainnya
Pelajari lebih lanjut fitur form HTML5 yang bermanfaat di tip video cepat ini.
12. Internet Explorer dan HTML5
Sayangnya, bahwa Internet Explorer membutuhkan sedikit pertikaian untuk memahami elemen-elemen HTML5 yang baru.
Semua elemen, secara default, memiliki
displaydariinline.
Untuk memastikan elemen HTML5 yang baru di-render dengan benar sebagai elemen tingkat blok, perlu saat ini untuk menata mereka seperti itu.
1 |
header, footer, article, section, nav, menu { |
2 |
display: block; |
3 |
}
|
Sayangnya, Internet Explorer tetap akan mengabaikan penataan ini, karena tidak ada petunjuk apa, sebagai contoh, bahkan elemen header. Untungnya, ada perbaikan yang mudah:
1 |
document.createElement("article"); |
2 |
document.createElement("footer"); |
3 |
document.createElement("header"); |
4 |
document.createElement("nav"); |
5 |
document.createElement("menu"); |
Anehnya, kode ini nampaknya memicu Internet Explorer. Untuk sekedar proses ini untuk setiap aplikasi baru, Remy Sharp membuat sebuah skrip, biasa disebut HTML5 shiv. Skrip ini juga memperbaiki beberapa masalah pencetakan juga.
1 |
<!--[if IE]>
|
2 |
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
3 |
<![endif]-->
|
13. hgroup*
* Sejak publikasi pertama artikel ini, elemen hgroup telah menjadi usang seluruhnya dan tidak lagi digunakan.
14. Atribut Required
Form memungkinkan atribut baru required, yang menentukan, secara alami, apakah diperlukan masukan tertentu. Bergantung pada preferensi pengkodean Anda, Anda dapat menyatakan atribut ini dengan salah satu dari dua cara berikut:
1 |
<input type="text" name="someInput" required> |
Atau, dengan pendekatan yang lebih terstruktur.
1 |
<input type="text" name="someInput" required="required"> |
Salah satu metode akan dilakukan. Dengan kode ini, dan di dalam browser yang mendukung atribut ini, sebuah form tidak dapat dikirim jika masukan "someInput" kosong. Inilah contoh singkatnya; kita juga akan menambahkan atribut placeholder juga, karena tidak ada alasan untuk tidak melakukannya.
1 |
<form method="post" action=""> |
2 |
<label for="someInput"> Your Name: </label> |
3 |
<input type="text" id="someInput" name="someInput" placeholder="Douglas Quaid" required> |
4 |
<button type="submit">Go</button> |
5 |
</form>
|
Jika masukan dibiarkan kosong, dan form dikirimkan, textbox akan disorot.
15. Atribut Autofocus
Sekali lagi, HTML5 menghapus kebutuhan akan solusi JavaScript. Jika input tertentu harus "dipilih", atau terfokus, secara default, kita sekarang dapat memanfaatkan atribut autofocus.
1 |
<input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus> |
Yang cukup menarik, sementara saya secara pribadi cenderung lebih memilih pendekatan XHTML yang lebih banyak (menggunakan tanda petik, dll.), penulisan "autofocus=autofocus" terasa ganjil. Dengan demikian, kita akan tetap dengan pendekatan kata kunci tunggal.
16. Dukungan Audio
Kita tidak lagi harus bergantung pada plugin pihak ketiga untuk me-render audio. HTML5 sekarang menawarkan elemen <audio>. Paling tidak, akhirnya, kita tidak perlu khawatir dengan plugin-plugin ini. Untuk saat ini, hanya browser terbaru yang menawarkan dukungan untuk audio HTML5. Pada saat ini, masih merupakan praktik yang baik untuk menawarkan beberapa bentuk kompatibilitas mundur.
1 |
<audio autoplay="autoplay" controls="controls"> |
2 |
<source src="file.ogg" /> |
3 |
<source src="file.mp3" /> |
4 |
<a>Download this file.</a> |
5 |
</audio>
|
Mozilla dan Webkit belum sepenuhnya akur dulu, ketika sampai pada format audio. Firefox akan ingin melihat file .ogg, sementara browser Webkit akan bekerja dengan baik dengan ekstensi .mp3 yang umum. Ini berarti, setidaknya untuk saat ini, Anda harus membuat dua versi audio.
Saat Safari memuat halaman, ia tidak akan mengenali format .ogg tersebut, dan akan melewatinya dan beralih ke versi mp3, sesuai dengannya. Harap dicatat bahwa IE, yang biasanya, tidak mendukung ini, dan Opera 10 dan yang lebih rendah hanya bisa bekerja dengan file .wav.
17. Dukungan Video
Sama seperti elemen <audio>, kita juga tentu saja memiliki video HTML5 juga di browser baru! Sebenarnya, baru-baru ini, YouTube mengumumkan menanamkan video HTML5 baru untuk video mereka, untuk browser yang mendukungnya. Sayangnya, sekali lagi, karena spesifikasi HTML5 tidak menentukan codec spesifik untuk video, maka diserahkan ke browser untuk memutuskan. Sementara Safari, dan Internet Explorer 9 dapat diharapkan mendukung video dalam format H.264 (yang bisa dimainkan pemutar Flash), Firefox dan Opera tetap pada format Theora dan Vorbis open source. Dengan demikian, saat menampilkan video HTML5, Anda harus menawarkan kedua format tersebut.
1 |
<video controls preload> |
2 |
<source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" /> |
3 |
<source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" /> |
4 |
<p> Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video instead.</a> </p> |
5 |
</video>
|
Chrome dapat menampilkan video dengan benar yang dienkode dalam format "ogg" dan "mp4".
Ada beberapa hal yang perlu diperhatikan disini.
- Kita tidak secara teknis diminta untuk mengatur atribut
type; namun, jika tidak, browser harus mencari tahu jenisnya sendiri. Menghematlah beberapa bandwidth, dan nyatakan itu sendiri. - Tidak semua browser memahami video HTML5. Di bawah elemen
source, kita dapat menawarkan tautan unduhan, atau menyematkan versi Flash video sebagai gantinya. Terserah Anda. - Atribut
controldanpreloadakan dibahas dalam dua tip berikut.
18. Video Preload
Atribut preload melakukan persis apa yang Anda duga. Meskipun, dengan mengatakan bahwa, Anda harus terlebih dahulu memutuskan apakah Anda ingin browser melakukan pra-muat video atau tidak. Apakah ini perlu? Mungkin, jika pengunjung mengakses halaman, yang dibuat khusus untuk menampilkan video, Anda pasti harus melakukan pra-muat videonya, dan mengurangi sedikit waktu tunggu dari pengunjung. Video dapat pra-muat dengan menetapkan preload="preload", atau hanya dengan menambahkan preload. Saya lebih suka solusi yang terakhir; itu sedikit kurang berlebihan.
1 |
<video preload> |
19. Kontrol Tampilan
Jika Anda bekerja sama dengan masing-masing tip dan teknik ini, Anda mungkin telah memperhatikannya, dengan kode di atas, video di atas tampaknya hanya gambar, tanpa kontrol apapun. Untuk membuat kontrol pemutar ini, kita harus menentukan atribut control di dalam elemen video.
1 |
<video preload controls> |
Harap dicatat bahwa setiap browser me-render pemutarnya berbeda satu sama lain.
20. Regular Expression
Seberapa sering Anda menemukan diri Anda menulis beberapa regular expression cepat untuk memverifikasi textbox tertentu. Berkat atribut pattern baru, kita bisa memasukkan regular expression langsung ke markup kita.
1 |
<form action="" method="post"> |
2 |
<label for="username">Create a Username: </label> |
3 |
<input type="text" |
4 |
name="username" |
5 |
id="username" |
6 |
placeholder="4 <> 10" |
7 |
pattern="[A-Za-z]{4,10}" |
8 |
autofocus
|
9 |
required> |
10 |
<button type="submit">Go </button> |
11 |
</form>
|
Jika Anda cukup terbiasa dengan regular expressions, Anda akan sadar bahwa pola ini: [A-Za-z]{4,10} hanya menerima huruf besar dan kecil. String ini juga harus memiliki minimal empat karakter, dan maksimal sepuluh.
Perhatikan bahwa kita mulai menggabungkan semua atribut baru yang mengagumkan ini!
Jika regular expression asing bagi Anda, lihat di sini.
21. Mendeteksi Dukungan untuk Atribut
Apa gunanya atribut ini jika kita tidak memiliki cara untuk menentukan apakah browser mengenalinya? Baiklah, bagus; meskipun begitu ada beberapa cara untuk mengatasinya. Kita akan membahas yang dua. Opsi pertama adalah memanfaatkan pustaka Modernizr yang sangat bagus. Selain itu, kita dapat membuat dan membedah elemen-elemen ini untuk menentukan apa yang mampu dimiliki browser. Misalnya, pada contoh sebelumnya, jika kita ingin menentukan apakah browser dapat menerapkan atribut pattern, kita bisa menambahkan sedikit JavaScript ke halaman kita:
1 |
alert( 'pattern' in document.createElement('input') ) // boolean;
|
Sebenarnya, ini adalah metode populer untuk menentukan kompatibilitas browser. Pustaka jQuery menggunakan trik ini. Di atas, kami membuat elemen input baru, dan menentukan apakah atribut pattern dikenali di dalamnya. Jika iya, browser mendukung fungsi ini. Jika tidak, tentu saja tidak.
1 |
<script> |
2 |
if (!'pattern' in document.createElement('input') ) {
|
3 |
// do client/server side validation |
4 |
} |
5 |
</script> |
Perlu diingat bahwa ini bergantung pada JavaScript!
22. Elemen Mark
Pikirkan elemen <mark> sebagai stabilo. String yang dibungkus dalam tag ini harus relevan dengan tindakan pengguna saat ini. Misalnya, jika saya mencari "Open your Mind" di beberapa blog, saya kemudian dapat memanfaatkan JavaScript untuk membungkus setiap kemunculan string ini di dalam tag <mark>.
1 |
<h3> Search Results </h3> |
2 |
<p> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark>. </p> |
23. Kapan Harus Mengunakan <div>
Beberapa dari kita awalnya ditanyai kapan kita harus menggunakan div polos. Sekarang kita memiliki akses ke header, article, section, dan footer, apakah pernah ada waktu untuk menggunakan...div? Tentu saja.
Divharus dimanfaatkan bila tidak ada unsur yang lebih baik untuk pekerjaan itu.
Misalnya, jika Anda merasa perlu membungkus blok kode dalam elemen pembungkus khusus untuk penempatan konten, berarti <div> masuk akal. Namun, jika Anda malah membungkus sebuah posting blog baru, atau mungkin juga daftar tautan di footer Anda, pertimbangkan untuk menggunakan elemen <article> dan <nav>. Mereka lebih semantik.
24. Apa yang Segera Mulai Digunakan
Dengan semua pembicaraan tentang HTML5 ini tidak lengkap sampai tahun 2022, banyak orang mengabaikannya sepenuhnya - itulah kesalahan besar. Sebenarnya, ada beberapa fitur HTML5 yang bisa kita gunakan di semua proyek kita sekarang juga! Kode yang lebih sederhana, yang bersih selalu merupakan hal yang baik. Di video tip cepat hari ini, saya akan menunjukkan beberapa pilihan.
25. Apa yang bukan HTML5
Orang-orang dapat dimaafkan karena menganggap transisi tanpa JavaScript yang mengagumkan dikelompokkan ke dalam HTML5 yang mencakup semuanya. Hei -- bahkan Apple telah secara tidak sengaja mempromosikan ide ini. Bagi non-pengembang, siapa yang peduli; ini adalah cara mudah untuk mengacu pada standar web modern. Namun, bagi kita, meski mungkin hanya semantik, penting untuk memahami dengan tepat apa yang bukan HTML5.
- SVG: Bukan HTML5. Ini setidaknya berumur lima tahun.
- CSS3: Bukan HTML5. Ini...CSS.
- Geolocation: Bukan HTML5.
- Penyimpanan Klien: Bukan HTML5. Iya pada satu waktu, tapi telah dihapus dari spec, karena fakta bahwa banyak orang khawatir bahwa hal itu, secara keseluruhan, menjadi terlalu rumit. Kini ia memiliki spesifikasinya tersendiri.
- Web Sockets: Bukan HTML5. Sekali lagi, diekspor ke spesifikasinya sendiri.
Terlepas dari berapa banyak perbedaan yang Anda butuhkan, semua teknologi ini dapat dikelompokkan ke dalam tumpukan web modern. Padahal, banyak dari spesifikasi bercabang ini masih dikelola oleh orang-orang yang sama.
26. Atribut Data
Kita sekarang secara resmi memiliki dukungan untuk atribut kustom dalam semua elemen HTML. Sementara, sebelumnya, kita masih bisa lolos dengan hal-hal seperti:
1 |
<h1 id=someId customAttribute=value> Thank you, Tony. </h1> |
...validator akan membuat keributan! Tapi sekarang, selama kita mengawali atribut kustom kita dengan "data," kita bisa secara resmi menggunakan metode ini. Jika Anda pernah menemukan diri Anda melampirkan data penting ke sesuatu seperti atribut class, mungkin untuk penggunaan JavaScript, ini akan menjadi bantuan besar!
Cuplikan HTML
1 |
<div id="myDiv" data-custom-attr="My Value"> Bla Bla </div> |
Mengambil Nilai dari Atribut Kustom
1 |
var theDiv = document.getElementById('myDiv');
|
2 |
var attr = theDiv.getAttribute('data-custom-attr');
|
3 |
alert(attr); // My Val |
Ini juga bisa digunakan di CSS Anda, seperti contoh perubahan teks CSS yang konyol dan lincah ini.
1 |
<!DOCTYPE html>
|
2 |
|
3 |
<html lang="en"> |
4 |
<head>
|
5 |
<meta charset="utf-8"> |
6 |
<title>Sort of Lame CSS Text Changing</title> |
7 |
<style>
|
8 |
|
9 |
h1 { position: relative; } |
10 |
h1:hover { color: transparent; } |
11 |
|
12 |
h1:hover:after { |
13 |
content: attr(data-hover-response); |
14 |
color: black; |
15 |
position: absolute; |
16 |
left: 0; |
17 |
|
18 |
}
|
19 |
</style>
|
20 |
</head>
|
21 |
<body>
|
22 |
|
23 |
<h1 data-hover-response="I Said Don't Touch Me!"> Don't Touch Me </h1> |
24 |
|
25 |
</body>
|
26 |
</html>
|
Anda bisa melihat demo efek di atas pada JSBIN.
27. Elemen Output
Seperti yang mungkin sudah Anda duga, elemen output digunakan untuk menampilkan semacam perhitungan. Misalnya, jika Anda ingin menampilkan koordinat posisi mouse, atau jumlah serangkaian angka, data ini harus dimasukkan ke dalam elemen output.
Sebagai contoh sederhana, mari masukkan jumlah dua angka ke output kosong dengan JavaScript, saat tombol submit ditekan.
1 |
<form action="" method="get"> |
2 |
<p>
|
3 |
10 + 5 = <output name="sum"></output> |
4 |
</p>
|
5 |
<button type="submit"> Calculate </button> |
6 |
</form>
|
7 |
|
8 |
<script>
|
9 |
(function() { |
10 |
var f = document.forms[0]; |
11 |
|
12 |
if ( typeof f['sum'] !== 'undefined' ) { |
13 |
f.addEventListener('submit', function(e) { |
14 |
f['sum'].value = 15; |
15 |
e.preventDefault(); |
16 |
}, false); |
17 |
}
|
18 |
else { alert('Your browser is not ready yet.'); } |
19 |
})();
|
20 |
</script>
|
Perlu diketahui bahwa dukungan untuk elemen output masih agak lemah. Pada saat penulisan ini, saya hanya bisa membuat Opera yang bermain dengan bagus. Hal ini tercermin dalam kode di atas. Jika browser tidak mengenali elemennya, browser hanya akan memberi peringatan pemberitahuan yang memberitahukan Anda sebanyak itu. Jika tidak, ia menemukan hasilnya dengan nama "sum", dan menetapkan nilainya menjadi 15, dengan demikian, setelah form dikirimkan.
Elemen ini juga dapat menerima atribut for, yang mencerminkan nama elemen yang berkaitan dengan output, mirip dengan cara label bekerja.
28. Membuat Slider dengan Input Range
HTML5 memperkenalkan input jenis range baru.
1 |
<input type="range"> |
Yang paling menonjol, bisa menerima atribut antara lain min, max, step, dan value. Meski hanya Opera yang nampak sepenuhnya mendukung jenis input ini sekarang, akan sangat fantastis saat kita benar-benar bisa menggunakan ini!
Untuk demonstrasi cepat, mari kita membangun sebuah alat ukur yang memungkinkan pengguna menentukan seberapa hebat "Total Recall". Kita tidak akan membangun solusi pemungutan suara di dunia nyata, namun kita akan mengulas bagaimana hal itu dapat dilakukan dengan mudah.
Langkah 1: Mark-up
Pertama, kita membuat mark-up kita.
1 |
<form method="post"> |
2 |
<h1> Total Recall Awesomness Gauge </h1> |
3 |
<input type="range" name="range" min="0" max="10" step="1" value=""> |
4 |
<output name="result"> </output> |
5 |
</form>
|
Perhatikan bahwa, selain menetapkan nilai min dan max, kita selalu dapat menentukan step apa untuk setiap transisi. Jika step ini diset ke 1, maka akan ada 10 nilai yang harus dipilih. Kita juga memanfaatkan elemen output yang baru yang telah kita pelajari di tip sebelumnya.
Langkah 2: CSS
Selanjutnya, kita akan menatanya sedikit saja. Kita juga akan memanfaatkan :before dan :after untuk menginformasikan kepada pengguna berapa nilai min dan max yang ditentukan. Terima kasih banyak kepada Remy dan Bruce karena telah mengajarkan trik ini kepada saya, melalui "Memperkenalkan HTML5."
1 |
body { |
2 |
font-family: 'Myriad-Pro', 'myriad', helvetica, arial, sans-serif; |
3 |
text-align: center; |
4 |
}
|
5 |
input { font-size: 14px; font-weight: bold; } |
6 |
|
7 |
input[type=range]:before { content: attr(min); padding-right: 5px; } |
8 |
input[type=range]:after { content: attr(max); padding-left: 5px;} |
9 |
|
10 |
output { |
11 |
display: block; |
12 |
font-size: 5.5em; |
13 |
font-weight: bold; |
14 |
}
|
Di atas, kita membuat konten sebelum dan sesudah input range, dan membuat nilainya masing-masing sama dengan nilai min dan max.
Langkah 3: JavaScript
Terakhir, kita:
- Menentukan apakah browser saat ini tahu apa input range. Jika tidak, kita mengingatkan pengguna bahwa demo tidak akan bekerja.
- Perbarui elemen
outputsecara dinamis, saat pengguna memindahkan slider. - Mendengarkan saat pengguna memindah mouse dari slider, mengambil nilainya, dan menyimpannya ke penyimpanan lokal.
- Kemudian, pada saat pengguna me-refresh halaman, range dan output secara otomatis akan diatur ke pilihan terakhir mereka.
1 |
(function() {
|
2 |
var f = document.forms[0], |
3 |
range = f['range'], |
4 |
result = f['result'], |
5 |
cachedRangeValue = localStorage.rangeValue ? localStorage.rangeValue : 5; |
6 |
|
7 |
// Determine if browser is one of the cool kids that |
8 |
// recognizes the range input. |
9 |
var o = document.createElement('input');
|
10 |
o.type = 'range'; |
11 |
if ( o.type === 'text' ) alert('Sorry. Your browser is not cool enough yet. Try the latest Opera.');
|
12 |
|
13 |
// Set initial values of the input and ouput elements to |
14 |
// either what's stored locally, or the number 5. |
15 |
range.value = cachedRangeValue; |
16 |
result.value = cachedRangeValue; |
17 |
|
18 |
// When the user makes a selection, update local storage. |
19 |
range.addEventListener("mouseup", function() {
|
20 |
alert("The selected value was " + range.value + ". I am using local storage to remember the value. Refresh and check on a modern browser.");
|
21 |
localStorage ? (localStorage.rangeValue = range.value) : alert("Save data to database or something instead.");
|
22 |
}, false); |
23 |
|
24 |
// Display chosen value when sliding. |
25 |
range.addEventListener("change", function() {
|
26 |
result.value = range.value; |
27 |
}, false); |
28 |
|
29 |
})(); |
Siap untuk dunia nyata? Mungkin belum; tapi masih menyenangkan untuk bermain dengannya dan untuk persiapan!
Download kode sumbernya, dan cobalah sendiri. Tapi gunakanlah Opera.
Terima kasih sudah membaca! Kami sudah banyak mengulasnya, namun hanya meggores permukaan dari apa yang mungkin dengan HTML5. Saya harap ini berfungsi sebagai dasar yang bermanfaat!
