Ketika menemukan sebuah form dalam halaman website. Setelah melengkapi pengisian form maka form akan dieksekusi. Perintah tersebut biasanya akan ditampilkan dalam bentuk tombol/button submit. Pada catatan kali ini akan dipaparkan bagaimana cara membuat tombol button atau tombol submit pada website.
Format umum dalam pembuatan button ini adalah:
<!DOCTYPE html>
<!DOCTYPE html>
Format umum dalam pembuatan button ini adalah:
<button> Teks </button>Teks tersebut bisa diisi dengan teks sesuka anda, misalkan "submit", "ajukan" "next" dan lainnya. Namun format seperti itu belum membuat button bekerja. Tombol bekerja jika ditambahkan beberapa fungsi. Salah satunya ditambahkan fungsi javascript agar isi form bisa diproses datanya.
Fungsi terhubung dengan Javascript
Sebenrnya ini tidak hanya terbatas pada javascript saja. Bisa digunakan untuk PHP juga, namun pada contoh ini akan di ambil untuk javascript aja. Format penggunaanya adalah seperti berikut:
<button onclick="id/fungsi"> Teks </button>
Sebagai contoh bisa digunakan kode di bawah ini. Tak usah memikirkan javascript, fokus pada penulisan button saja dulu.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Sifat Menurut Golongan Darah</title>
<script>
function hasilku() {
var al = document.getElementById("li").value;
var m=al-0;
switch (m)
{
case 1:
document.getElementById("result10").innerHTML = " Kamu Penyabar" ;
break;
case 2:
document.getElementById("result10").innerHTML = " Kamu Orang Setia" ;
break;
case 3:
document.getElementById("result10").innerHTML = " Kamu orang yang Sangat Cerdas" ;
break;
case 4:
document.getElementById("result10").innerHTML = " Kamu Orang yang Kuat Loh" ;
break;
default:
document.getElementById("result10").innerHTML = " Ketikkan Sesuai aturan yang dijelaskan" ;
break; } /*
}
</script>
</head><body><h1>Contoh Penggunaan Button HTML dalam Javascript</h1>
<h2>Sifatmu Menurut Golongan Darah </h2>
<p>Ketik </p>1 buat golongan darah A,
2 untuk B,
3 untuk AB, 4 untuk O = <input id="li" size="5" type="text" /><br/>
<button onclick="hasilku()">Cek Hasil</button> <button type="reset">Reset</button>
<span id="result10"></span>
</div></body></html>
Dari kode di atas contoh penggunaan button yang disertai atau diarahkan pada javascript yang dirujuk pada fungsi hasilku.
Fungsi untuk Tombol Reset
Fungsi kedua yang bisa digunakan adalah Reset atau mengosongkan kembali semua isi form. Biasanya tombol ini dipasangkan dengan tombol submit pada sebuah halaman HTML. Format penulisan form reset ini adalah:
<button type="reset"> Teks </button>
Tombol ini bisa berdiri sendiri tanpa harus ada terkait dengan fungsi lain. Sebagai contoh bisa dijalankan sendiri kode dibawah ini. Anda bisa isikan sesuatu pada form dan jika tombol rest di pilih maka akan membuat semua isi form terhapus.
<!DOCTYPE html>
<html>
<head>
<title>ibahasa pemograman</title>
</head>
<h2> Identitas Pelamar Kerja </h2>
<body>
<form action="daftar.php" method="post">
<fieldset>
<legend>Identitas Diri</legend>
Nama : <input id="na" size="12" type="text" />
<br /> <br />
Alamat : <input id="nd" size="12" type="text" />
<br /> <br />
Telepon: <input id="da" size="12" type="text" />
<br /> <br />
<button type="reset"> RESET </button>
</fieldset>
<fieldset>
</form>
</body>
</html>
Menonaktifkan Fungsi Tombol
Untuk menggunakan fitur akan ditambahkan atribut disabled. Format penulisannya seperti di bawah ini.
<button disabled="disabled"> Teks </button>
Biasanya ini digunakan untuk sebuah form dimana ada beberapa data harus diisi terlebih dahulu.Jika data belum diisi maka data tidak akan diproses. Pada aplikasinya, ini akan dihubungkan dengan pemograman lain.
Share Yuk
Related Posts
Loading...
No comments:
Post a Comment