Blogger Script

1. Button

    a. Scipt 1

        Kode :  

<button>Hallo Dunia</button>

     

        Hasil :

     b. Script 2

          Kode :

<form action="">
<input type="button" value="Hello world!">
</form>

          Hasil :

2.Text Fields / Area Input

    Kode :

<form action="">
Nama depan: <input type="text" name="Nama depan"><br>
Nama belakang: <input type="text" name="Nama belakang">
</form>

<p><b>Catatan:</b> Form tidak tampak. Juga default karakter max. 20 karakter.</p>

    Hasil :

Nama depan:
Nama belakang:

Catatan: Form tidak tampak. Juga default karakter max. 20 karakter.

3. Password Area

    Kode :

<form action="">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="password">
</form>

<p><b>Note:</b> Karakter yang ditampilkan tertutup dan tampil *  atau bentuk lain.</p>

     Hasil :

Username:
Password:

Note: Karakter yang ditampilkan tertutup dan tampil *,. atau bentuk lain.

4. Checkbox / kotak centang

    Kode :

<form action="">

<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>

<input type="checkbox" name="vehicle" value="Car">I have a car 

</form>

    Hasil :

I have a bike

I have a car

5. Radio Button/ Centang Bulat

Kode :

<form action="">

<input type="radio" name="sex" value="male">Male<br>

<input type="radio" name="sex" value="female">Female

</form>

<p><b>Note:</b> Ketika Tombol Radio di cek maka akan ter-Cek, artinya semua yang berhubungan dengan yang di cek jadi terikat.</p>

Hasil :

Male

Female

Note: Ketika Tombol Radio di cek maka akan ter-Cek, artinya semua yang berhubungan dengan yang di cek jadi terikat.

6. Simple Drop Down Menu

Kode :

<form action="">

<select name="cars">

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

<option value="fiat">Fiat</option>

<option value="audi">Audi</option>

</select>

</form>

Hasil :

Volvo Saab Fiat Audi

7. Border/ Pembatas sekitar Data

Kode :

<form action="">

<fieldset>

<legend>Data Pribadi:</legend>

Nama: <input type="text" size="30"><br>

E-mail: <input type="text" size="30"><br>

Tangga lahir: <input type="text" size="10">

</fieldset>

</form>

Hasil :

Personal information:

Name:
E-mail:
Date of birth:

8. Send email form

Kode :

<h3>Kirim e-mail ke seseorang@contoh.com:</h3> 

<form action="MAILTO:seseorang@contoh.com" method="post" enctype="text/plain">

Name:<br>

<input type="text" name="nama" value="Nama anda"><br>

E-mail:<br>

<input type="text" name="email" value="Alamat email"><br>

Comment:<br>

<input type="text" name="Comment" value="Komentar anda" size="50"><br><br>

<input type="submit" value="Kirim">

<input type="reset" value="Batalkan">

</form>

Hasil :

Kirim e-mail ke seseorang@contoh.com:

Name:

E-mail:

Comment:




9. Audio Control

Kode :

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

Hasil :

10. Video Control

Kode :

<button onclick="getAudioTracks()" type="button">Cari Audio Track yang tersedia</button>
<br>
<video id="video1" controls="controls">
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

<script>
myVid=document.getElementById("video1");
function getAudioTracks()
  {
  alert(myVid.audioTracks.length);
  }
</script>

<p>Video courtesy of <a href="http://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p>

Hasil :