Belajar Membuat Formulir Dengan HTML

Sabtu, 14 Januari 2023

Belajar membuat formulir dengan Tag <form> dalam HTML, yang digunakan untuk membuat sebuah formulir elektronik (e-formulir) yang dapat digunakan untuk mengumpulkan data dari pengguna web. Formulir ini dapat mengandung berbagai macam elemen seperti input, pilihan, tombol, dll.

Sumber foto: www.pexels.com (by Markus Spiske)

Contoh penggunaan tag <form> dalam HTML:

<form action="form.html" method="post" name="form1">
<label for="username">Nama User:</label><br>
<input type="text" id="username" name="username"><br>
<label for="password">Kata Sandi:</label><br>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Submit">
</form>

Di atas adalah contoh formulir login sederhana yang terdiri dari dua input untuk nama user dan kata sandi, serta tombol submit. Attribut action pada tag <form> menentukan lokasi dimana data formulir akan dikirimkan ketika formulir tersebut disubmit dalam contoh ini form.html. Attribut method menentukan metode yang digunakan untuk mengirimkan data, yang bisa bernilai "get" atau "post".

Selain itu, tag <form> juga dapat menggunakan atribut name yang dapat digunakan untuk menamai formulir tersebut. Untuk lebih lengkapnya, berikut adalah beberapa daftar atribut yang dapat digunakan pada tag <form>:

action: Untuk menentukan lokasi dimana data formulir akan dikirimkan ketika formulir tersebut disubmit.
method: Untuk menentukan metode yang digunakan untuk mengirimkan data formulir, yang bisa bernilai "get" atau "post".
name: Untuk menamai formulir tersebut.

Berikut ini adalah contoh sederhana penggunaan tag <form>, Salin semua kode di bawah ini dan save dengan nama formulir.html (untuk menuliskan kode HTML ini dapat menggunakan notepad):

<html> <head> <title>Contoh Halaman Web Dengan HTML</title> </head> <body> <div class="form" style="background-color:grey; width:400px; height:400px;"> <h1>Contoh Form HTML</h1> <p>Ini adalah contoh formulir.</p> <form action="form.html" method="post" name="form1"> <label for="username">Nama User:</label><br> <input type="text" id="username" name="username"><br> <label for="password">Kata Sandi:</label><br> <input type="password" id="password" name="password"><br><br> <input type="submit" value="Submit"> </form> </div> </body> </html>

Penggunaan tag <form> di atas akan menghasilkan formulir seperti berikut, Ketika halaman web ini dijalankan di browser web (untuk menjalankannya klik file formulir.html yang telah dibuat di atas), akan terlihat hasilnya seperti:

Anda Mungkin Menyukai Postingan Terkait:

Belajar Membuat Formulir Dengan HTML

Tidak ada komentar:

Posting Komentar