Atribut Formaction pada Button di HTML5

HTML5 adalah versi terbaru dimana terdapat banyak sekalian pembaruan dari segi tag dan fungsinya. Dalam HTML5 kita dapat menemukan elemen baru yang sebelumnya tidak ada. Salah satunya adalah tag button. Tag button ini kurang lebih sama seperti input dengan type submit. Bentuk dari tag button ini adalah sebuah tombol. Dalam satu form biasanya hanya ada satu input dengan type submit. Karena form hanya memiliki satu action. Sesuai dengan pembahasan kita kali ini adalah mempelajari atribut formaction pada button di HTML5.

Jadi dengan button ini kita akan mempunyai action tersendiri dengan menambahkan atribut formaction pada button tersebut. Sehingga hasilnya apa bila tombol tersebut kita tekan, maka akan diarahkan pada formaction yang berbeda dengan action pada form. Untuk lebih detailnya kalian bisa ikuti contoh code berikut ini.

form.html

<!DOCTYPE html>
<html>
<head>
	<title>formaction button html5</title>
</head>
<body>
	 <form action="test1.html" method="get">
	  Nama : <input type="text" name="nama"><br>
	  Alamat : <input type="text" name="alamat"><br>
	  <button type="submit">Test 1</button>
	  <button type="submit" formaction="test2.html">Test 2</button>
	</form> 
</body>
</html>

test1.html

<h1>Halaman test 1</h1>

test2.html

<h1>Halaman test 2</h1>

Jika sudah kalian simpan ketiga file tersebut dengan format html. Dan jangan lupa untuk menyimpan dalam satu folder yang sama agar websitenya dapat berjalan dengan lancar. Untuk melihat hasilnya kalian cukup buka file form.html pada browser kalian. Jika berhasil maka tampilanya akan seperti ini.

atribut-formaction-pada-button-di-html5-rangga1-210817

Gambar diatas adalah tampilan awal dimana pada form tersebut terdapat 2 tombol submit. Biasanya dalam satu form diperbolehkan satu submit. Sekarang kalian coba tekan tombol test1 dan hasilnya akan seperti ini.

atribut-formaction-pada-button-di-html5-rangga2-210817

halaman akan dibawa pada file test1.html. Sekarang kalian kembali ke tampilan semula dan tekan tombol test2. Dan hasilnya akan seperti ini.

atribut-formaction-pada-button-di-html5-rangga3-210817

halaman akan dibawa pada file test2.html. Karena pada tombol test2 terdapat attribut formaction dimana tombol tersebut mempunyai action tersendiri, terpisah dari action form. Seperti itu kira-kira implementasi dari attribut formaction.

Sekian pembahasan mengenai bagaimana cara kerja atribut formaction pada button di HTML5. Semoga bermanfaat dan dapat menginspirasi kalian. Sampai jumpa pada artikel lain yang tidak kalah seru dan menarik.

DUMET School Author

DUMET School adalah tempat kursus website, kursus desain grafis, kursus digital marketing, kursus video editing dan kursus mobile apps terbaik di Jakarta dan Depok.

Leave a Reply

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