Pada materi form part 3 ini kita akan membahas tentang attribute type pada tag <input> dan attribute apa saja yang dapat kita gunakan pada tag <input>. Lansung saja kita masuk ke materinya.
Jenis Attribute type pada Tag <input>
Tag <input> memiliki keunikan sendiri dan banyak jenis yang dapat kita gunakan dalam mengatur sebuah inputan yang akan di isi oleh user. Dengan ada jenis-jenis ini kita sebagai pembuat form akan menjadi mudah dalam mengatur form yang akan di isi oleh user. Berikut type apa saja yang dapat kita gunakan pada tag <input>.
<input type="value">
| Type Value | Fungsi | Output |
|---|---|---|
text (Default) |
input yang di isikan oleh user adalah karakter | |
checkbox |
dapat memilih beberapa opsi | |
color |
dapat memilih kode warna | warna |
date |
dapat memilih input tanggal | |
datetime-local |
memilih waktu lokal | |
email |
input yang dimasukkan harus email | |
file |
dapat menambahkan sebuah file | |
hidden |
input tidak di tampilkan karena menggunakan type hidden | |
image |
menambahkan gambar menggunakan tag input dengan cara seperti berikut : <input type="image" src="/img/logo.svg" width="50">
|
|
month |
Input dengan menentukan bulan | |
number |
Input hanya di perbolehkan untuk angka | |
password |
Input digunakan untuk password. text yang di masukkan tidak terlihat | |
radio |
hanya dapat memilih salah satu dari opsi, jangan lupa untuk menambahkan attribute name dan nilai dari attributenya harus sama jika pilihannya hanya satu |
|
range |
Input digunakan untuk menentukan rentang sebuah angka, jangan lupa menambahkan attribute min dan max untuk menentukan rentangnya |
|
reset |
Mengatur ulang sebuah form, coba lah robah isi di dalam form tersebut lalu tekan tombol reset | |
search |
Membuat input pencarian, ini hanyalah contoh | |
submit |
Mengubah input menjadi sebuah tombol submit | |
tel |
Input kusus untuk telepon | |
time |
Mengubah input menjadi time | |
url |
Input sebuah url | |
week |
Input sebuah minggu |
Jenis Attribute pada tag <input>
Pada bagian ini kita akan membahas beberapa attribute pada tag input, berikut jenis attribute yang dapat kita gunakan :
1. Attribute value
Attribute ini akan memberikan sebuah nilai awal dari tag <input>
<input type="text" value="Triadmoko Denny Fatrosa">
Maka hasil yang akan di tampilkan seperti ini:
2. Attribute readonly
Attribute ini hanya dapat melihat hasil dari input, kita tidak bisa mengeditnya kembali, kecuali attribute readonly di hilangkan. Akan tetapi kita dapat menyalin text yang ada di dalam field tersebut.
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John" readonly><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
Hasil 🌐 :
3. Attribute disabled
Attribute ini menentukan field yang harus di nonaktifkan, field tersebut tidak dapat di klik dan juga tidak dapat di edit. Attribute disabled tidak akan di kirim saat tombol submit di tekan.
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John" disabled><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
Berikut hasilnya 🌐:
4. Attribute maxlenght
Attribute maxlenght berguna untuk menentukan karakter yang dimasukkan ke dalam field.
note: Ketika kita telah mengatur total karakter yang di izinkan dan telah mencapai karakter maksimum, maka field input tidak akan menerima karakter yang di inputkan lagi.
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" maxlength="20"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" maxlength="4">
</form>
Hasilnya 🌐:
5. Attribute multiple
Attribute ini berfungsi untuk mengizinkan user untuk memasukkan nilai lebih dari satu. Attribut multiple hanya bisa berfungsi pada jenis input email dan file
<form>
<label for="files">Select files:</label>
<input type="file" id="files" name="files" multiple>
</form>
6. Attribute placeholder dan required
Attribut placeholder menentukan petujuk untuk field yang akan di isi dan juga menjelaskan nilai yang diharapkan dari field tersebut. Attribute placeholder berfungsi dengan jenis input berikut: text, search, url, telp, email, dan password.
Attribute required digunakan untuk menentukan sebuah field yang harus wajib di isi. Jika input memiliki nilai kosong, maka user tidak dapat men-submit form tersebut. Attribute yang required berfungsi dengan jenis input berikut: text, search, url, tel, email, password, date pickers, number, checkbox, radio, dan file.
<form>
<label for="namo">Username:</label>
<input type="text" id="namo" name="namo" placeholder="username" required>
<input type="submit" value="submit">
</form>
7. Attribute autofocus dan autocomplete
Attribute autofocus menentukan sebuah field yang secara otomatis akan mendapatkan fokus saat halaman di reload.
Attribute autocomplete menentukan inputtan dari user apakah formulir atau field harus memiliki attribute autocomplete="off or on". Attribute ini memungkinkan browser memprediksi nilainya. Saat pengguna mulai mengetik di bidang, browser akan menampilkan opsi untuk mengisi bidang, berdasarkan nilai yang diketik sebelumnya.
Attribute ini berfungsi pada input type : text, search, url, tel, email, password, datepickers, range, and color.
<form autocomplete="on">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="off"><br><br>
<input type="submit" value="Submit">
</form>
Coba kamu lakukan sendiri 👍