Laman

Kamis, 11 Juni 2015

CARA MEMBUAT VALIDASI DENGAN HTML5

Pada tutorial kali, saya akan membahas Cara Membuat Validasi dengan HTML5. Validasi merupakan sebuah peringatan atau pemberitahuan kepada user, untuk memberitahu bagian yang perlu diisi pada form yang telah di beri validasi. Dengan dibuatnya validasi pada form, maka proses input anda tidak akan berjalan selanjutnya jika salah satu form anda kosong atau belum terisi. Ada beberapa bahasa program yang dapat juga untuk membuat validasi yang pernah saya pelajari yaitu PHP, Javascript, JQUERY, HTML5 dll. Walaupun masing-masing bahasa program memiliki kelebihan dan kekurangannya dalam pembuatan validasi. Dalam HTML5, kita hanya menggunakan values yang baru yang terdapat di HTML5 yaitu required. Required ini sering digunakan untuk membuat validasi dengan cara yang mudah, dan sangat simple tentunya. Baiklah tanpa basi-basi, mari kita langsung pada contoh Cara Membuat Validasi dengan HTML5. Silahkan buat file baru yaitu validation.html lalu terapkan skrip dibawah ini :

<!DOCTYPE html>
<html>
<head>
	<title>Belajar Membuat Validasi</title>
</head>
<body>

<form>
	<label>Nama</label>
	<input type="text" name="nama" required />
	<label>
		<input type="submit" value="Tes" />
	</label>
</form>

</body>
</html>

Setelah anda menerapkan skrip diatas, maka anda dapat menjalankan aplikasi yang kita buat tadi. Maka hasilnya seperti gambar dibawah ini.

Cara Membuat Validasi dengan HTML5
Gambar Validation





Sangat simple bukan...?? Mungkin anda dapat mudah memahaminya, tapi saya sarankan anda menggunakan Browser yang sudah support dengan HTML5, dan jika tidak maka tidak jalan seperti gambar diatas tadi. Oke, sampai disini tutorial Cara Membuat Validasi dengan HTML5 yang saya berikan, semoga dapat bermanfaat bagi anda. Sekian dan terima kasih.

sumber :http://bahasa-programs.blogspot.com/2015/03/cara-membuat-validasi-dengan-html5.html

CARA MEMBUAT AUTOCOMPLETE DENGAN HTML5

Pada tutorial kali ini, adalah contoh penggunaan tag HTML5 yaitu <datalist> yang berfungsi sebagai daftar opsi untuk nilai input. Pada contoh ini, saya akan memberikan sebuah skrip berupacara membuat form autocomplete dengan field text input menggunakan tag datalist. Dalam pembuatan autocomplete ini, tidak memerlukan sebuah database seperti pada umumnya digunakan oleh AJAX AutoComplete. Contoh penerapan autocomplete ini, bisa anda lihat di Facebook pada bagian cari (search), maka akan muncul beberapa list dibawah form input yang berdasarkan pada keyword anda. Oke, tanpa basa basi lagi, untuk mengetahuinya silahkan membuat buat nama file yaitu autoComplete.html. Lalu, terapkan skrip dibawah ini :

<DOCTYPE! html>
<html>
<head>
 <title>Belajar AutoComplete dengan HTML5</title>
</head>
<body>
 Pilih Kota :
 <input type="text" name="cari" id="cari" list="datalist" />

 <datalist id="datalist">
  <option value="Medan"></option>
  <option value="Jakarta"></option>
  <option value="Bandung"></option>
  <option value="Surabaya"></option>
  <option value="Yogyakarta"></option>
  <option value="Padang"></option>
  <option value="Palembang"></option>
 </datalist>
</body>
</html>

Penjelasan skrip : 
·      <input type="text" name="cari" id="cari" list="datalist" /> digunakan untuk membuat sebuah            input form yang memiliki id datalist untuk menampung sebuah argument atau nilai.
·      <datalist id="datalist"> sebagai membuat list dari form inputan diatas.
·      <option value="Medan"></option> digunakan untuk sebagai opsi yang memiliki sebuah value.

Jika anda telah menerapkan skrip diatas tadi, maka akan hasilnya seperti gambar dibawah ini :

 
Cara Membuat AutoComplete dengan HTML5
Mungkin sampai disini tutorial Cara membuat Autocomplete dengan HTML5 yang saya berikan, semoga dapat bermanfaat. Silahkan berkomentar jika anda belum memahaminya. Terima kasih :D
sumber : http://bahasa-programs.blogspot.com/2015/02/Cara-Membuat-AutoComplete-dengan-HTML5.html

CARA MENAMBAHKAN AUDIO KE DALAM WEBSITE DENGAN HTML5

Menambahkan audio/musik ke dalam website itu sangatlah mudah dilakukan, dengan skrip HTML5 anda dapat melakukan hal itu. Pada tutorial ini, saya akan menggunakan tag HTML5 yaitu audio yang digunakan untuk konten multimedia, suara, atau audio stream. File audio ini disebut file kontainer yang berarti ada file audio didalamnya.
Oke, tanpa basa-basi lagi mari kita lakukan Cara Menambahkan audio ke dalam website dengan HTML5. Sebelum melakukannya, pastikan anda mempunyai file musiknya dan simpan ke dalamhtdocs , lalu buat file audio.html lalu terapkan skrip dibawah ini :
<!DOCTYPE html>
<html>
<head>
 <title>Memainkan audio</title>
</head>
<body>

<center><audio controls src="Ari Lasso - Hampa.mp3">
 Memainkan klik audio
</audio>
</center>

</body>
</html>
Maka Hasilnya seperti gambar dibawah ini :
Cara Menambahkan audio ke dalam website dengan HTML5
Images 1
  
Penjelasan Skrip :
  • <audio></audio> digunakan untuk konten multimedia seperti penjelasan diatas.
  • controls digunakan untuk menampilkan pengaturan tampilan musiknya seperti play, stop, suara dan lain-lain.
Sampai disini tutorial yang saya berikan semoga Cara Menambahkan audio ke dalam website dengan HTML5 dapat bermanfaat bagi anda. Luangkanlah waktu anda untuk menshare artikel ini.
sumber :http://bahasa-programs.blogspot.com/2015/03/cara-menambahkan-audio-ke-dalam-website-dengan-html5.html