Cara menggunakan tag button pada html

Question

sebuah form membutuhkan tombol untuk mengirimkan data yang telah di input, kita akan belajar cara membuat tombol button, submit dan reset pada html.

Table of Contents Show

Input button html
input submit html
input reset html
Apa fungsi tag Button pada HTML?
Apa itu Button dalam website?
Berfungsi apakah tombol button pada form?
Apa pengertian elemen pada HTML?

tutorial ini bagian dari tutorial lanjutan mengenal atribut input pada html.

Input button html

nilai atribut type=”button” adalah tombol yang dapat digunakan untuk memicu tindakan pada halaman web tanpa mengirimkan formulir.

<input type="button" value="tombol">
Code language: HTML, XML (xml)

jika kita memerlukan tombol yang berisi elemen lain bisa menggunakan tag button, tag button bisa berisi konten dan ada tag penutupnya sedangkan input type=”button” tidak ada tag penutup.

<button type="button">tombol</button>
Code language: HTML, XML (xml)

memakai tag input atau tag button hasilnya akan sama saja, mari kita coba sendiri dengan klik tombol Coba Script warna biru

Coba Script

<!DOCTYPE html>
<html>
<head>
    <title> button input pada html </title>
</head>
<body>
    <input type="button" value="tombol">
    <br><br>
    <button type="button">tombol</button>
</body>
</html>
Code language: HTML, XML (xml)

tombol biasanya digunakan dengan event onclick seperti dibawah ini, ketika kita klik tombol akan memanggil fungsi javascript.

Coba Script

<!DOCTYPE html>
<html>
<head>
    <title> onclick button pada html </title>
</head>
<body>
    <input type="button" onclick="alert('hello world!')" value="munculkan alert">
    <br><br>
    <button type="button" onclick="alert('hello world!')">munculkan alert</button>
</body>
</html>
Code language: HTML, XML (xml)

jika kita klik tombol munculkan alert akan muncul sebuah alert hello world!

input submit html

input type=”submit” adalah tombol yang mengirimkan semua nilai formulir ke penanganan form.

penanganan formulir biasanya terdapat halaman server dengan skrip untuk memproses data masukan.

Coba Script

<!DOCTYPE html>
<html>
<head>
    <title> submit button pada html </title>
</head>
<body>
    <form action="/proses_data.php">
        <label for="namaD">Nama Depan:</label><br>
        <input type="text" id="namaD" name="namaD" value="Muhammad"><br>
        <label for="namaB">Nama Belakang:</label><br>
        <input type="text" id="namaB" name="namaB" value="Thohir"><br><br>
        <input type="submit" value="kirim">
    </form>
</body>
</html>
Code language: HTML, XML (xml)

input reset html

input type=”reset” adalah sebuah tombol yang ketika diklik akan mereset semua inputan menjadi bentuk default pertama tampil.

misalnya bidang teks yang sudah diketik akan di setel ulang menjadi kosong atau akan menjadi nilai default jika sudah ditentukan menggunakan atribut value.

langsung saja kita praktekan sendiri dengan tekan tombol Coba Script warna biru.

Coba Script

<!DOCTYPE html>
<html>
<head>
    <title> reset button pada html </title>
</head>
<body>
    <form>
        <label for="namaD">Nama Depan:</label><br>
        <input type="text" id="namaD" name="namaD" value="Thohir"><br>
        <label for="namaB">Nama Belakang:</label><br>
        <input type="text" id="namaB" name="namaB" value=""><br><br>
        <input type="reset" value="reset">
    </form>
</body>
</html>
Code language: HTML, XML (xml)

apabila kita mengganti nilai default “Thohir” menjadi Steven dan klik tombol reset maka bidang teks akan menyetel ulang ke nilai “Thohir”.

jika pada bidang teks Nama Belakang yang awalnya kosong apabila di isi dengan sembarang kata kemudian klik tombol reset bidang teks tersebut akan menjadi kosong seperti semula.

Apa fungsi tag Button pada HTML?

HTML elemen tag <button> merupakan tag pada HTML yang digunakan untuk menciptakan sebuah tombol yang dapat diklik. Tombol (button) merupakan hal yang lazim digunakan saat mengirimkan formulir untuk dikirimkan menuju server.

Apa itu Button dalam website?

Button merupakan salah satu elemen dari HTML yang mungkin paling sering Anda jumpai di dalam sebuah website. Biasanya button digunakan untuk melakukan submit form dan lain sebagainya.

Berfungsi apakah tombol button pada form?

Fungsi Tag Button dalam pembuatan Form HTML Tag button berfungsi untuk membuat tombol baik itu di dalam form, maupun diluar form. Dibandingkan dengan tombol yang dibuat dengan tag input type=”submit”, tag button menawarkan fleksibilitas yang lebih.

Apa pengertian elemen pada HTML?

Elemen dalam HTML adalah sebuah komponen yang menyusun dokumen HTML. Elemen kadang juga disebut sebagai node, karena ia merupakan salah satu jenis node yang menyusun dokumen HTML dalam diagram HTML tree.

kode html