Belajar HTML 9

 BELAJAR LENGKAP HTML



Membuat Form di HTML

Untuk membuat form di HTML kita memerlukan tag <form> 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 ketika data dikirim. Atribut ini akan mengirim data form ke alamat URL yang kita definisikan sendiri nantinya. Jadi nilai dari atribut action merupakan alamat URL dari suatu file yang akan memproses data form tersebut.
  • method – digunakan untuk menentukan metode apa yang akan digunakan untuk mengirim data form. Terdapat dua nilai yang perlu kalian ingat ketika 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>
HTML

Kode di atas tidak akan menampilkan apa-apa ketika kita jalankan pada browser.

Nah agar kita dapat menampilkan sebuah form yang nyata kita perlu tahu dulu mengenai field di HTML.

Mengenal Field di HTML

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

<!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>
HTML

Kode di atas akan menghasilkan field yang digunakan untuk mengisi nama.

Namun bagaimana agar para pengguna tahu bahwa field tersebut diperuntukkan untuk menulis nama?

Untuk mengatasi masalah tersebut maka kita perlu menambahkan suatu label di atas tag <input> dengan menggunakan tag <label>.

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

Keluaran:

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

Lantas apa guna keduanya?

Untuk mengetahuinya silahkan lanjutkan membaca 

Atribut Type

Atribut type memiliki banyak sekali nilai, namun karena ini pembahasan mengenai form maka akan saya informasikan nilai-nilai yang sering digunakan untuk membuat form, antara lain:

  • text – menghasilkan field untuk mengisi data berupa teks
  • email – menghasilkan field untuk mengisi data khusus email
  • password – menghasilkan field untuk mengisi data khusus password atau kata sandi, field ini nantinya hanya menampilkan bintang atau bulatan yang berfungsi untuk menutupi nilai asli. Namanya juga password.
  • radio – menghasilkan radio button, dengan menggunakan input type ini para pengguna nantinya akan disuruh memilih salah satu dari dua atau lebih pilihan yang ada.
  • checkbox – menghasilkan checkbox yang membuat pengguna dapat memilih lebih dari satu pilihan dari banyak daftar pilihan yang disediakan
  • number – menghasilkan field untuk mengisi data khusus angka
  • date – menghasilkan field untuk mengisi data khusus tanggal
  • file – menghasilkan field untuk upload file
  • submit – menghasilkan tombol submit
<!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>
HTML

Keluaran:

Atribut Name

Atribut ini digunakan sebagai pengenal untuk nama elemen terkait. Elemen ini akan sangat berguna ketika kalian 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>
HTML

Karena digunakan sebagai pengenal suatu elemen maka ia tidak akan menampilkan apapun ketika dijalankan di browser.

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

Atribut Value

Atribut ini berfungsi untuk memberikan nilai default untuk 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>
HTML

Keluaran:

Atribut placeholder

Atribut placeholder berfungsi untuk memberikan teks bantuan di dalam field. Teks ini akan muncul ketika field dalam keadaan kosong, jika field mulai diisi maka placeholder otomatis akan disembunyikan, namun akan tampil kembali bila 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>
HTML

Hasil:

Atribut Required

Atribut yang akan menghasilkan syarat supaya elemen terkait wajib diisi atau dilarang untuk dikosongi.

<!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>
HTML

Keluaran:

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

Elemen Lain Untuk Membuat Form di HTML

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

Tag <textarea> HTML

Tag atau elemen <textarea> merupakan sebuah field yang mampu menampung beberapa baris kata atau kalimat. Karena kelebihannya mampu menampung banyak baris kalimat, maka textarea sering digunakan sebagai kolom komentar, keterangan, catatan dan karena ini berhubungan dengan form, maka kegunaan <textarea> adalah sebagai field untuk mengisi data alamat, atau data-data lain yang sangat panjang.

<!DOCTYPE html>
<html>
<head>
	<title>Belajar Form di HTML</title>
</head>
<body>
	<form action="proses.php" method="POST">
		<label> Alamat: </label>
		<textarea name="alamat"></textarea>
	</form>
</body>
</html>
HTML

Keluaran:

Tag <select> HTML

Tag <select> merupakan sebuah representasi dari pengaturan yang digunakan untuk memilih deretan opsi atau pilihan baik itu satu ataupun lebih dari itu. Elemen ini nantinya akan menghasilkan semacam dropdown yang berisi nilai-nilai yang kita berikan sebagai pilihan untuk para pengguna.

<!DOCTYPE html>
<html>
<head>
	<title>Belajar Form di HTML</title>
</head>
<body>
	<form action="proses.php" method="POST">
		<label> Kota Asal: </label>
		<select name="kota">
			<option value="bangkalan">Bangkalan</option>
			<option value="bandung">Bandung</option>
			<option value="jakarta">Jakarta</option>
			<option value="malang">Malang</option>
			<option value="surabaya">Surabaya</option>
		</select>
	</form>
</body>
</html>
HTML

Keluaran:


Komentar

Posting Komentar

Postingan populer dari blog ini

contoh operator logika part 2

Gambar
  Rumus untuk menentukan hasil dari operator logika adalah sebagai berikut: Operator  &&  hanya akan menghasilkan true jika kedua operand bernilai true, selain itu hasilnya false. Operator  ||  hanya akan menghasilkan false jika kedua operand bernilai false, selain itu hasilnya true . Operator  !  Akan membalikkan logika, !false menjadi true, !true menjadi false. Kita juga bisa menggabungkan lebih dari satu operasi seperti contoh berikut: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 class BelajarJava {    public static void main(String args[]){                 boolean hasil;              hasil = ( false && true ) || ( true || false );      System.out.println( "Hasil: " + hasil );               hasil = ! false && ( false || true ...
Baca selengkapnya

Variabel PHP

Gambar
VARIABEL PHP Variabel dalam PHP Variable adalah suatu pengenal di dalam program yang merepresentasikan nilai atau data tertentu. Nilai variabel dapat diubah sesuai dengan kebutuhan program. Dalam Bahasa PHP, variable didefinisikan dengan cara membubuhkan tanda  $  (dollar) di depannya. Contoh :         $nama = 'SmartDevTala' Pada contoh di atas, kita dapat membuat variable  $nama  dan mengisi nilai ke dalamnya. Dalam penggunaan variable, PHP sedikit berbeda dengan Bahasa program lain, karena pada bahasa program yang lain pada umumnya perlu mendeklarasikan tipe data pada variabel sebelum menampung nilai di dalamnya, sebagai contoh :        $x = "SmartDevTala";       $x = 8;       $x = 10.3;       $x = true;       $x = ["SmartDevTala",8,10.3,true]; Pada contoh di atas, variable  $x  dapat menampung nilai dari beberapa tipe data, yaitu : string, integer, floati...
Baca selengkapnya

Tipe Data Phyton

Gambar
  Tipe Data Python Tipe data adalah suatu media atau memori pada komputer yang digunakan untuk menampung informasi. Python sendiri mempunyai tipe data yang cukup unik bila kita bandingkan dengan bahasa pemrograman yang lain. Berikut adalah tipe data dari bahasa pemrograman Python : Tipe Data Contoh Penjelasan Boolean True  atau  False Menyatakan benar  True  yang bernilai  1 , atau salah  False  yang bernilai  0 String "Ayo belajar Python" Menyatakan karakter/kalimat bisa berupa huruf angka, dll (diapit tanda  "  atau  ' ) Integer 25  atau  1209 Menyatakan bilangan bulat Float 3.14  atau  0.99 Menyatakan bilangan yang mempunyai koma Hexadecimal 9a  atau  1d3 Menyatakan bilangan dalam format heksa (bilangan berbasis 16) Complex 1 + 5j Menyatakan pasangan angka real dan imajiner List ['xyz', 786, 2.23] Data untaian yang menyimpan berbagai tipe data dan isinya bisa diubah-ubah Tuple ('xyz', 768, 2.23)...
Baca selengkapnya