9. Tutorial HTML MEMBUAT FORM DI HTML BAG III

Hai, Kali ini om adji akan membahas cara membuat form lagi, karena ada beberapa yang kelupaan pada tutorial sebelumnya maklum faktor kelamaan ga ketemu si dia#cieh elah.
Ok, langsung aja yuk nanti keburu magrib hehe.

Penggunaan atribut enctype="multipart/form-data" ditulis pada Tag form seperti ini :
<form action="aksi.php" method="POST" enctype="multipart/form-data">. Atribut ini berfungsi untuk mengirim file yang di upload ke server(seperti foto, video, document, pdf), tapi sebenarnya meskipun kita tidak menulis atribut ini, web browser akan secara default menuliskan enctype="application/x-www-urlencoded" pada form yang kita buat.

Perbedaan dari keduanya adalah pada proses encoding. Jika menggunakan yang default, karakter-karakter khusus akan dikonversi menjadi karakter ASCII dan spasi menjadi tanda '+'. sedangkan jika menggunakan enctype=multipart/form-data, maka form akan dikirim apa adanya tanpa proses konversi.

Tag atribut text area, biasanya digunakan untuk membuat form alamat yang penulisannya butuh ruang agak besar. Contoh:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Belajar membuat form di HTML</title>
</head>
<body>
<h1>BELAJAR MEMBUAT FORM</h1>
<form action="aksi.php" method="POST" target="_blank" enctype="multipart/form-data">
<p>Nama : <input type="text" name="nama"></p>
<p>Alamat : <textarea name="alamat" maxlength="150" ></textarea></p>
<p><input type="submit" value="Kirim Data> <input type="reset" value="Batal">
</form></body>
</html>
Hasilnya:

Input element type color, digunakan untuk memilih warna. Contoh:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Belajar membuat form di HTML</title>
</head>
<body>
<h1>BELAJAR MEMBUAT FORM</h1>
<form action="aksi.php" method="POST" target="_blank" enctype="multipart/form-data">
<p>Warna Kesukaan :<input type="color" name="warna" required></p>
<p><input type="submit" value="Kirim Data> <input type="reset" value="Batal">
</form></body>
</html>
Hasilnya seperti ini

Input element type url, kotak input ini dilengkapi proses validasi khusus hanya untuk menulis url, dan penulisan url disini harus lengkap beserta protokol url, seperti http://www.bewoksatukosong.com
Input element type search, tampilan dari kotak input ini tidak terlihat berbeda, tergantung dari web browser yang digunakan.

Input element type number, kotak input ini menggunakan validasi khusus untuk diisi angka saja.
Atribut min-max, digunakan unntuk memberi batasan nilai terkecil dan terbesar pada kotak inputan.
Atribut step, digunakan untuk menambah atau mengurangi nilai pada kotak inputan dengan menggunakan spin button di sisi kanan textbox. Contoh:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Belajar membuat form di HTML</title>
</head>
<body>
<h1>BELAJAR MEMBUAT FORM</h1>
<form action="aksi.php" method="POST" target="_blank" enctype="multipart/form-data">
<p>Tinggi Badan :<input type="number" min="0" step="0.1"></p>
<p><input type="submit" value="Kirim Data"> <input type="reset" value="Batal">
</form>
</body>
</html>
hasilnya:

Atribut autofocus, digunakan untuk meletakkan kursor teks langsung pada objek form yang pertama harus diisi tanpa harus mengkliknya terlebih dahulu. Contoh:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Belajar membuat form di HTML</title>
</head>
<body>
<h1>BELAJAR MEMBUAT FORM</h1>
<form action="aksi.php" method="POST" target="_blank" enctype="multipart/form-data">
<p>Nama : <input type="text" name="nama" placeholder="Isi nama anda" autofocus></p>
<p>Alamat : <textarea name="alamat" maxlength="150" required></textarea></p>
<p>Jenis Kelamin :
<label><input type="radio" name="jenkel" value="Laki-Laki">Laki-Laki</label>
<label><input type="radio" name="jenkel" value="Perempuan">Perempuan</label>
</p>
<p>Tinggi Badan :<input type="number" min="0" step="0.1"></p>
<p>Telepon: <input type="tel" name="tlp"></p>-->
<p>Warna Kesukaan :<input type="color" name="warna"></p><!--
<p>Foto :<input type="file"></p>
<p><input type="submit" value="Kirim Data"> <input type="reset" value="Batal">
</form>
</body>
</html>
Hasilnya

Atribut placeholder, digunakan untuk memberi text sementara di dalam textbox, bisa sebagai contoh mengisi objek form. Contoh:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Belajar membuat form di HTML</title>
</head>
<body>
<h1>BELAJAR MEMBUAT FORM</h1>
<form action="aksi.php" method="POST" target="_blank" enctype="multipart/form-data">
<p>Username : <input type="text" name="nama_user" placeholder="Nama pengguna" ></p>
<p>Email : <input type="email" name="email" placeholder="abcd@gmail.com" ></p>
<p>Password :<input type="password" name="password"></p>
<p><input type="submit" value="Kirim Data"> <input type="reset" value="Batal">
</form>
</body>
</html>
Hasilnya :

Atribut required, digunakan unutk memaksa user mengisi semua objek form yang tersedia sebelum dikirim ke server.

Atribut pattern, digunakan untuk memvalidasi kotak inputan sesuai format yang kita mau misalkan seperti kode mata kuliah yang ditulis dengan dua huruf di depan dan tiga angka dibelakang(contoh: MD322)
Berikut contoh keseluruhannya:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Belajar membuat form di HTML</title>
</head>
<body>
<h1>BELAJAR MEMBUAT FORM</h1>
<form action="aksi.php" method="POST" target="_blank" enctype="multipart/form-data">
<fieldset>
<legend>Form Data Pengguna</legend>
<p>Nama : <input type="text" name="nama" placeholder="Isi nama anda" autofocus required></p>
<p>Alamat : <textarea name="alamat" maxlength="150" required></textarea></p>
<p>Jenis Kelamin :
<label><input type="radio" name="jenkel" value="Laki-Laki">Laki-Laki</label>
<label><input type="radio" name="jenkel" value="Perempuan">Perempuan</label>
</p>
<p>Tinggi Badan :<input type="number" min="0" step="0.1" required></p>
<p>Telepon: <input type="tel" name="tlp"></p>
<p>Warna Kesukaan :<input type="color" name="warna" required></p>
<p>Foto :<input type="file"></p>
</fieldset>
<fieldset>
<legend>Akun Pengguna</legend>
<p>Username : <input type="text" name="nama_user" placeholder="Nama pengguna" maxlength="100" required></p>
<p>Email : <input type="email" name="email" placeholder="abcd@gmail.com" required></p>
<p>Kode Mata Kuliah :<input type="text" placeholder="AA111" pattern="[A-Z]{2}[0-9]{3}"> </p >
<p>Password : <input type="password" name="pass" maxlength="12"></p>
</fieldset>
<p><input type="submit" value="Kirim Data"> <input type="reset" value="Batal"></p>
</form>
</body>
</html>

Dan seperti ini hasilnya