1. Input Color
Input type color adalah type untuk menerima input warna
Warna di HTML akan ditulis dalam bentuk hex code
Contohnya kita bisa lihat daftar hex code warna disini : https://www.color-hex.com/
Sintak latihancolor.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>latihan color di html</title>
</head>
<body>
<h1>
Latihan Form email di html
</h1>
<table>
<form>
<tr>
<td>
<label for="warna">Warnaku: </label>
</td>
<td>:</td>
<td>
<input type="color" name="warna" id="warna" value="#ff000000">
</td>
</tr>
<tr>
<td>
<input type="submit" value="submit">
</td>
</tr>
</form>
</table>
</body>
</html>
2. Input Date Time
Jika untuk input tanggal bisa menggunakan type date, jika kita butuh sampai ke menit, kita bisa menggunakan Input Date Time, yaitu menggunakan type datetime-local
Format value untuk Date Time adalah yyyy-mm-ddThh:mm
Dimana tanggal dan waktu dipisah oleh karakter T
hh adalah jam dalam format 2 digit
mm adalah menit dalam format 2 digit
Untuk membatasi minimal dan maksimal waktu yang dipilih, kita bisa gunakan atribut min dan max
sintak latihan:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>latihan Datetime di html</title>
</head>
<body>
<h1>
Latihan Form input date time di html
</h1>
<table>
<form>
<tr>
<td>
<label for="jamkeluar">Jam Keluar: </label>
</td>
<td>:</td>
<td>
<input type="datetime-local" name="jamkeluar" id="jamkeluar" value="2023-11-22T11:11">
</td>
</tr>
<tr>
<td>
<input type="submit" value="submit">
</td>
</tr>
</form>
</table>
</body>
</html>
3. Input Time
Jika kita hanya membutuhkan informasi jam dan menit, kita bisa menggunakan input type time
Input type time menggunakan format hh:mm
hh adalah jam dalam 2 digit
mm adalah menit dalam 2 digit
Untuk membatasi minimal dan maksimal waktu yang dipilih, kita bisa gunakan atribut min dan max
sintak latihan:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>latihan time di html</title>
</head>
<body>
<h1>
Latihan Form input time di html
</h1>
<table>
<form>
<tr>
<td>
<label for="jammasuk">Jam Masuk: </label>
</td>
<td>:</td>
<td>
<input type="time" name="jammasuk" id="jammasuk" value="08:00">
</td>
</tr>
<tr>
<td>
<label for="jamkeluar">Jam Keluar: </label>
</td>
<td>:</td>
<td>
<input type="time" name="jamkeluar" id="jamkeluar" value="17:00">
</td>
</tr>
<tr>
<td>
<input type="submit" value="submit">
</td>
</tr>
</form>
</table>
</body>
</html>
4. Input File
Input dengan type file, digunakan untuk meng-upload / mengunggah berkas file dari komputer kita
Saat kita membuat input dengan type file, maka agar form mengirim berkas file-nya, kita harus gunakan method post, dan juga enctype multipart/form-data
sintak latihan:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>latihan Input File di html</title>
</head>
<body>
<h1>
Latihan Form Input File di html
</h1>
<table>
<form action="terima.html" method="post" enctype="multipart/form-data">
<tr>
<td>
<label for="inputfile">Masukan Foto Anda: </label>
</td>
<td>:</td>
<td>
<input type="file" name="foto" id="inputfile">
</td>
</tr>
<tr>
<td>
<input type="submit" value="submit">
</td>
</tr>
</form>
</table>
</body>
</html>
5. Input Hidden
Di HTML, terdapat fitur input type hidden
Input type hidden artinya input datanya tidak terlihat oleh pengguna Web
Biasanya input data hidden memang tidak dimaksudkan untuk diinputkan oleh pengguna, biasanya pada kasus-kasus tertentu input data hidden digunakan untuk informasi yang dibuat secara otomatis oleh web kita, dan tidak butuh diubah atau dilihat oleh pengguna
Misal saat saya mengubah nama pengguna, kita juga mungkin harus tahu user_id dari pengguna, namun kita tidak mau user_id bisa diubah oleh pengguna, kita bisa menggunakan input type hidden untuk user_id nya
Sintak Latihan:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>latihan input hidden di html</title>
</head>
<body>
<h1>
Latihan Form Input hidden di html
</h1>
<table>
<form>
<input type="hidden" name="username" value="sutrisno">
<table>
<tr>
<td>
<label for="nama">Nama :</label>
</td>
<td>:</td>
<td>
<input type="text" name="nama" id="nama">
</td>
</tr>
</table>
<tr>
<td>
<input type="submit" value="submit">
</td>
</tr>
</form>
</table>
</body>
</html>
6. Input Number
Input type number adalah input untuk informasi number atau angka
Jika kita menginputkan bukan number atau angka, secara otomatis HTML menganggap nilainya tidak valid
Untuk input type number, kita bisa gunakan atribut tambahkan yaitu min dan max
min digunakan untuk mengatur nilai minimal
max digunakan untuk mengatur nilai maksimal
Sintak Latihan Input Number:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Latihan Input Number di HTML</title>
</head>
<body>
<form>
<h1>Latihan Input Number di HTML</h1>
<label for="nilai_uas">Nilai UAS:</label>
<input type="number" name="nilai_uas" id="nilai_uas" min="0" max="100" value="0">
<input type="submit" value="simpan">
</form>
</body>
</html>
7. Input Password
Input type password adalah input untuk informasi teks sama seperti input type text, namun pada input type password, karakter akan di masking (tidak ditampilkan)
Input type password sangat cocok untuk input teks yang rahasia, sehingga tidak bisa diintip oleh orang lain
sintak latihan:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Latihan Input Password di HTML</title>
</head>
<body>
<h1>Latihan Input Password di HTML</h1>
<form method="post">
<label for="password">Password:</label>
<input type="password" name="password" id="password">
<input type="submit" value="simpan">
</form>
</body>
</html>
8. Input Range:
Input type range adalah input untuk number / angka namun ditentukan jangkauan minimal dan minimal nya
Ini mirip seperti input number, yang membedakan adalah, bentuk komponen inputnya tidak seperti input text, melainkan dalam bentuk slider, yang bisa di slide ke kiri untuk menurunkan nilai dan ke kanan untuk menaikkan nilai
Secara default, nilai range naik bertahap sebanyak +1 atau berkurang sebanyak -1, namun jika kita ingin mengubah nilai naik dan turun nya, kita bisa tambahkan atribute step
Sintak Latihan:
<!DOCTYPE html>
<html>
<body>
<h2>Range Field</h2>
<p>Depending on browser support: The input type "range" can be displayed as a slider control.</p>
<form action="" method="get">
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
<input type="submit" value="Submit">
</form>
</body>
</html>
Tidak ada komentar:
Posting Komentar