search

Apa itu tindakan bentuk dalam html?

1 years ago
Komentar: 0
Dibaca: 176

Form merupakan elemen penting yang tidak jarang ada pada sebuah website. Sama seperti form dalam kehidupan sehari-hari, form digunakan untuk mendapatkan data dari pengguna

Show

Formulir sering kita jumpai pada website yang memiliki fitur register atau pendaftaran akun. Saya yakin para pembaca di sini sudah pernah menjumpai elemen ini, seperti saat mendaftarkan akun di media sosial

Baiklah, tanpa basa-basi lagi, mari kita langsung ke intinya

Membuat Form di HTML

Untuk membuat form di HTML kita memerlukan tag

yang mana pada tag ini kita akan membutuhkan dua atribut khusus dan wajib digunakan antara lain:

  • action - berfungsi untuk menentukan aksi atau tindakan yang akan dilakukan pada saat data dikirim. Atribut ini akan mengirimkan data formulir ke alamat URL yang kita tentukan sendiri nanti. Jadi nilai atribut action adalah alamat URL dari file yang akan memproses data form
  • metode - digunakan untuk menentukan metode apa yang akan digunakan untuk mengirim data formulir. Ada dua nilai yang perlu Anda ingat saat menggunakan atribut ini, yaitu POST dan GET

<!DOCTYPE html>
<html>
<head>
	<title>Belajar Form di HTML</title>
</head>
<body>
	<form action="proses.php" method="POST">
		
	</form>
</body>
</html>

Kode diatas tidak akan menampilkan apapun ketika kita menjalankannya di browser

Nah, untuk bisa menampilkan form yang sebenarnya, kita perlu mengetahui terlebih dahulu tentang field pada HTML

Mengetahui Bidang dalam HTML

Field merupakan ruas atau bidang tempat kita akan mengisi data. Salah satu tag yang sering digunakan untuk membuat field di HTML adalah tag .


<!DOCTYPE html>
<html>
<head>
	<title>Belajar Form di HTML</title>
</head>
<body>
	<form action="proses.php" method="POST">
		<input type="text" name="nama">
	</form>
</body>
</html>
_

Kode di atas akan menghasilkan field yang digunakan untuk mengisi nama

Apa itu tindakan bentuk dalam html?

Tetapi bagaimana pengguna mengetahui bahwa bidang tersebut dicadangkan untuk menulis nama?

Untuk mengatasi masalah tersebut maka kita perlu menambahkan suatu label di atas tag dengan menggunakan tag 


	<form action="proses.php" method="POST">
	<label>Nama: </label>
		<input type="text" name="nama">
	</form>

KELUAR

Apa itu tindakan bentuk dalam html?

Pada contoh di atas kita bisa melihat ada dua atribut yaitu type dan name. Kedua atribut ini memang sering disandingkan dengan tag ketika kita membuat form.

Lalu apa gunanya keduanya?

Untuk mengetahuinya silahkan lanjutkan membaca 🙂

Ketik atribut

Atribut type memiliki banyak nilai, namun karena ini adalah pembahasan tentang form maka saya akan menginformasikan nilai-nilai yang sering digunakan untuk membuat form antara lain

  • teks - menghasilkan bidang untuk mengisi data dalam bentuk teks
  • email – buat kolom untuk mengisi data email tertentu
  • kata sandi - membuat bidang untuk mengisi data khusus kata sandi, bidang ini nantinya hanya menampilkan bintang atau lingkaran yang berfungsi untuk menutupi nilai aslinya. Nama juga password
  • radio - menghasilkan tombol radio, dengan menggunakan input jenis ini pengguna nantinya akan disuruh memilih salah satu dari dua atau lebih opsi yang tersedia
  • checkbox – menghasilkan kotak centang yang memungkinkan pengguna untuk memilih lebih dari satu opsi dari banyak daftar opsi yang disediakan
  • nomor - menghasilkan bidang untuk mengisi data numerik
  • tanggal – buat bidang untuk mengisi data khusus tanggal
  • file - buat bidang untuk mengunggah file
  • kirim – menghasilkan tombol kirim

<!DOCTYPE html>
<html>
<head>
	<title>Belajar Form di HTML</title>
</head>
<body>
	<form action="proses.php" method="POST">
		<label> Tipe text: </label>
		<input type="text" name="nama"><br />

		<label> Tipe email: </label>
		<input type="email" name="email"><br />

		<label> Tipe password: </label>
		<input type="password" name="password"><br />

		<label> Tipe radio: </label>
		<input type="radio" name="gender">Pria
		<input type="radio" name="gender">Wanita<br />

		<label> Tipe checkbox: </label>
		<input type="checkbox" name="hobi">Sepak Bola
		<input type="checkbox" name="hobi">Bulutangkis
		<input type="checkbox" name="hobi">Basket
		<input type="checkbox" name="hobi">Renang <br />

		<label> Tipe number: </label>
		<input type="number" name="usia"><br />

		<label> Tipe date: </label>
		<input type="date" name="tanggal"><br />

		<label> Tipe file: </label>
		<input type="file" name="berkas"><br />

		<label> Tipe submit: </label>
		<input type="submit" name="simpan">
	</form>
</body>
</html>

KELUAR

Apa itu tindakan bentuk dalam html?

Atribut nama

Atribut ini digunakan sebagai pengidentifikasi untuk nama elemen terkait. Elemen ini akan sangat berguna ketika Anda sudah mulai belajar bahasa pemrograman PHP


<!DOCTYPE html>
<html>
<head>
	<title>Belajar Form di HTML</title>
</head>
<body>
	<form action="proses.php" method="POST">
		<label> Nama: </label>
		<input type="text" name="nama">
	</form>
</body>
</html>
_

Karena digunakan sebagai pengenal suatu elemen, maka tidak akan menampilkan apapun saat dijalankan di browser

Selain dua atribut di atas tag juga terkadang disisipkan beberapa atribut berikut:

Atribut nilai

Atribut ini berfungsi untuk memberikan nilai default pada elemen


<!DOCTYPE html>
<html>
<head>
	<title>Belajar Form di HTML</title>
</head>
<body>
	<form action="proses.php" method="POST">
		<label> Nama: </label>
		<input type="text" name="nama" value="Kuro Neko">
	</form>
</body>
</html>

KELUAR

Apa itu tindakan bentuk dalam html?

Atribut placeholder

Atribut placeholder berfungsi untuk menyediakan teks bantuan di lapangan. Teks ini akan muncul pada saat field kosong, jika field mulai terisi maka placeholder otomatis akan disembunyikan, namun akan muncul kembali saat kosong


<!DOCTYPE html>
<html>
<head>
	<title>Belajar Form di HTML</title>
</head>
<body>
	<form action="proses.php" method="POST">
		<label> Nama: </label>
		<input type="text" name="nama" placeholder="Masukkan nama lengkap">
	</form>
</body>
</html>
_

Hasil

Apa itu tindakan bentuk dalam html?

Atribut Diperlukan

Atribut yang akan menghasilkan kondisi sehingga elemen terkait harus diisi atau dilarang dikosongkan


<!DOCTYPE html>
<html>
<head>
	<title>Belajar Form di HTML</title>
</head>
<body>
	<form action="proses.php" method="POST">
		<label> Nama: </label>
		<input type="text" name="nama" required><br />
		<input type="submit" name="simpan">
	</form>
</body>
</html>

KELUAR

Apa itu tindakan bentuk dalam html?

Sebenarnya masih banyak lagi atribut yang dapat disisipkan ke dalam elemen , namun di sini hanya saya jelaskan yang sering digunakan saja.

Elemen Lain Untuk Membuat Form di HTML

Selain menggunakan ada juga beberapa tag atau elemen lain yang sering digunakan dalam membuat form, antara lain:

Tag