INPUT FORM DI HTML
Halo kawan-kawann, sebelum aku mulai lebih panjangg lagii, aku mau nanya sama kalian, kalian tau ga sih apa itu form?
Kalo belum tauu, aku kasi sedikit gambaran dehh, form itu formulir yang mana kita
sebagai user harus input sesuatu, lebih mudahnya aku kasi contohh yahh. Misal kita
mau login ke akun instagram kita, kita pasti disuruh masukin username instagram
atau email dan masukin password nya kann?? Nahh itu salah satu bentuk form. Jadi intinya tuh ada proses input-nya.
Terus kalo form nya dibuat pake HTML bisaa? Tentu bisa. Gimana caranyaa? Gmpng.
Sebelum ke
caranya, aku mau kasih tau kalo kita bisa belajar dari https://www.w3schools.com/html/default.asp guyss. Bisa dicari HTML Forms trus dipilih HTML Input Types.
Langsung aja yuk...
yang sayang---
Yang aku ketahui sekarang, ada beberapa tipe input HTML yang bisa kita pakai, di antaranya
1. <input type="button">
2. <input type="checkbox">
3. <input type="color">
4. <input type="date">
5. <input type="datetime-local">
6. <input type="email">
7. <input type="file">
8. <input type="hidden">
9. <input type="image">
10. <input type="month">
11. <input type="number">
12. <input type="password">
13. <input type="radio">
14. <input type="range">
15. <input type="reset">
16. <input type="search">
17. <input type="submit">
18. <input type="tel">
19. <input type="text">
20. <input type="time">
21. <input type="url">
22. <input type="week"
Banyakkk kan? tapi santai aja, ga mungkin aku bakal bahas sebanyak itu di sini, karena bakal capek sendiri sih :(((
Nahh di sini aku cuma bakal bahas beberapa, di antaramya input color, date time, time, file, hidden, number, password dan range.
AKU MUALI YA DI SINI KITA HARUS SEMANGAT YAH. SEMANGAT - SEMANGAT OKE OKE, SEMANGAT SEMANGAT OKE.
1. Input type Color
Color? apa itu kolor? dari artinyaa bisa kita tebak kalau input color artinya user dapat menginput warna. Untuk value warna dilambangkan dengan kode warna atau hex code (bisa kita klik di sini buat rekomendasi warna https://www.color-hex.com/). Terus cara bikin input warna gimanaa?? Gampangg, sini aku kasi tauu. Pertama siapin rasa penasarannya, langsung ke code nya deh
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>COLOR</title>
</head>
<body>
<h2>Latihan Warna di HTML</h2>
<table>
<form>
<tr>
<td>
<label
for="favcolor">Pilih Warna Kesukaanmu</label>
</td>
<td>
<input
type="color" name="warnasuka" id="favcolor" value="#ae0e52">
</td>
</tr>
<tr>
<td>
<input
type="submit" value="Pilih">
</td>
</tr>
</form>
</table>
</body>
</html>
MANA HASILNYAA??
2. Input type Date Time
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>DATE TIME</title>
</head>
<body>
<h2>Latihan Date Time di HTML</h2>
<table>
<form>
<tr>
<td>
<label
for="jamMasuk">Jam Berangkat</label>
</td>
<td>
<input
type="datetime-local" name="AbsenMasuk" id="jamMasuk"
value="2023-11-24T07:40">
</td>
</tr>
<tr>
<td>
<label
for="jamPulang">Jam Pulang</label>
</td>
<td>
<input
type="datetime-local" name="AbsenPulang" id="jamPulang"
value="2023-11-24T16:00">
</td>
</tr>
<tr>
<td>
<input
type="submit" value="Pilih">
</td>
</tr>
</form>
</table>
</body>
</html>
Hasilnya seperti ini
3. Input Type Time
Kalo date time ada tanggal sampai tahunnya, buat time cuma jam nya. Value input nya hh:mm, contoh 07:00.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>TIME</title>
</head>
<body>
<h2>Latihan Time di HTML</h2>
<table>
<form>
<tr>
<td>
<label
for="jamMasuk">Waktu Masuk</label>
</td>
<td>
<input
type="time" name="masuk" id="jamMasuk" value="07:40">
</td>
</tr>
<tr>
<td>
<label
for="jamPulang">Waktu Pulang</label>
</td>
<td>
<input
type="time" name="pulang" id="jamPulang" value="16:00">
</td>
</tr>
<tr>
<td>
<input
type="submit" value="Pilih">
</td>
</tr>
</form>
</table>
</body>
</html>
4. Input type File
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>FILE</title>
</head>
<body>
<h2>Latihan File di HTML</h2>
<table>
<form action="terima.html" method="post"
enctype="multipart/form-data">
<tr>
<td>
<label
for="filedatadiri">Masukkan file data diri Anda</label>
</td>
<td>
<input
type="file" name="file" id="filedatadiri">
</td>
</tr>
<tr>
<td>
<input
type="submit" value="Pilih">
</td>
</tr>
</form>
</table>
</body>
</html>
bisa pilih file yang diminta, trus bisa dipilih atau submit deh.
Hah? Gimana mksutnya? hidden kan artinya tersembunyi. Iyaa betull, tersembunyi tapi bukan berarti apa yang kita input jadi tersembunyi :(((
Input Hidden tuh misal user input A tapi user gatau kalau jadinya nanti ada tambahan BCDE. Nah BCDE inilai yang dimaksut input hidden, karena inputnya tanpa user tahu. Langsung aja deh ke code nya yahh
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>HIDDEN</title>
</head>
<body>
<h2>Latihan Hidden di HTML</h2>
<table>
<form>
<input type="hidden"
name="hidden" value="baik nan rajin">
<tr>
<td>
<label
for="nama">Nama</label>
</td>
<td>
<input
type="text" name="nama" id="nama">
</td>
</tr>
<tr>
<td>
<input
type="submit" value="Lanjutkan">
</td>
</tr>
</form>
</table>
</body>
</html>
6. Input type Number
Gampaaang, jadi user atau manusia bisa input angka, dari angka minus sampai tak terhinggaa. Tapi kita sendiri bisa bikin batas minimum dan maksimum nya, cobaa dehh langsung ke code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>NUMBER</title>
</head>
<body>
<h2>Latihan Number di HTML</h2>
<table>
<form>
<tr>
<td>
<label
for="usia">Usia-mu sekarang</label>
</td>
<td>
<input
type="number" name="numb" id="usia" value="20"
min="0" max="100">
</td>
</tr>
<tr>
<td>
<input
type="submit" value="Pilih">
</td>
</tr>
</form>
</table>
</body>
</html>
HASILNYA? BIASA AJA SIH
7. Input Password
Kalau input password itu nanti apa yang kita input jadinya ga keliatan, kaya titik titik gitu. Nahh buat password sendiri harus pakai method=post, <form method="post"> kaya di samping tuhh.
Code nya
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>PASSWORD</title>
</head>
<body>
<h2>Latihan Password di HTML</h2>
<table>
<form method="post">
<tr>
<td>
<label
for="username">Username</label>
</td>
<td>
<input
type="text" name="namauser" id="username">
</td>
</tr>
<tr>
<td>
<label
for="passw">Password</label>
</td>
<td>
<input
type="password" name="password" id="passw">
</td>
</tr>
<tr>
<td></td>
<td style="text-align:
right;">
<input
type="submit" value="Masuk">
</td>
</tr>
</form>
</table>
</body>
</html>
KALO DI-SHOW PREVIEW GINI NIH
Gunanya method post biar ga keliatan tuh password kalau kita pencet submit.
8. Input type Range
udahh terakhir, ayooo semangat oke.
Range ini ada batas minimum dan maksimum nya. Hampir mirip kaya number, tapi ini bentuknya ada garis. Coba deh langsung
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>RANGE</title>
</head>
<body>
<h2>Latihan Range di HTML</h2>
<table>
<form>
<p>Keterangan: Rate di
bawah ini dari 0 hingga 100</p>
<tr>
<td>
<label
for="rate">Berapa tingkat kebahagiaanmu hari ini?</label>
</td>
<td>
<input
type="range" name="tingkatbahagia" id="rate" value="50"
min="0" max="100">
</td>
</tr>
<tr>
<td>
<input
type="submit" value="Pilih">
</td>
</tr>
</form>
</table>
</body>
</html>
LANGSUNG KE SHOW PREVIEW NYA YAHH
Itu yang bulat-bulat bisa kita geser sesuka kita, dengan catatan maksimal cuma sampe 100. Karena kita setting di code maksimum nya 100 dan minimum nya 0.
Wokee udah selesaii guyss. Tetap semangat semangat oke, sampai jumpa lagi!!!
Oh iyaa guys, kalian bisa tonto videoo yang udah aku buat di yt aku lohh!!
Buat input lainnya kalian bisa tonton di sini
Untuk materi kali ini aku bagikan di sini
Post a Comment