Fungsi input tipe submit pada form

Apa fungsi input tipe submit pada form?. Input Type Submit digunakan untuk memulai proses pengolahan data. Pengolahan ini dapat berupa masukan, perubahan, atau penghapusan. Semua aksi tersebut disetting pada type Submit ini.

Submit ini adalah sebuah Tombol atau Button.

Anda dapat mendesain tombol submit ini dengan sintaks CSS.

Di bawah ini saya berikan contoh kode sumbernya, namun karena saya padukan dengan bahasa pemrograman PHP. Jadi, ada baiknya anda mengenal lebih dulu apa itu pemrograman PHP.

Silahkan copas kode di bawah ini pada text editor anda.

<!DOCTYPE HTML>
<html>
<head>
 <title>Tag Input Type Text</title>
</head>
<body>
 <form action="" method="GET">
  Nama : <input type="text" name="nama" />
  <input type="submit" name="kirim" />
  <?php
  if(isset($_GET['kirim'])){
   $nama = $_GET['nama'];
   echo "<hr>";
   echo "Nama anda adalah : ".$nama;
  }
 ?>
 </form>
</body>
</html>

Kemudian simpan dengan namaFile.php. Lalu jalankan sesuai lokasi file disimpan. Bila pada saya : http://localhost/tes/tes2.php.

maka hasilnya adalah seperti gambar di bawah ini :

fungsi input tipe submit pada form

Tulisan Masgan di atas itu saya yang inputkan, silahkan anda inputkan sembarang teks untuk menguji kinerja tombol submit ini. Setelah anda inputkan sembarang teks, lalu anda tekan tombol Submit dan lihat apa yang terjadi.

Seharusnya hasilnya adalah seperti gambar di bawah ini :

apa itu input tipe submit

Mendisable Tombol Submit

Anda pun dapat mendisable Button ini untuk tujuan lain, dengan menggunakan atribut disabled.

<!DOCTYPE HTML>
<html>
<head>
 <title>Submit Disable</title>
</head>
<body>
 Submit Normal : <input type="submit" />
 <br /><br /><br />
 Submit Terdisable : <input type="submit" disabled="disabled"  width="30"/>
</body>
</html>

Dan di bawah ini adalah hasilnya :

fungsi atribut disabled

Fungsi Atribut Value

Anda dapat merubah nama pada tombol dengan nama lainnya sesuai keinginan anda sendiri. Caranya adalah dengan menggunakan atribut value.

<!DOCTYPE HTML>
<html>
<head>
 <title>Submit Atribut Value</title>
</head>
<body>
 <input type="submit" value="Tambah" />
 <input type="submit" value="Rubah" />
 <input type="submit" value="Hapus" />
</body>
</html>

Dan di bawah ini adalah outputnya :

fungsi atribut value pada form

Leave a comment

Your email address will not be published. Required fields are marked *