Input Attribute dalam Membuat Form (Bag 2)

Oleh Unknown

Tuesday, May 12, 2015

Pada pembahasan jenis input attribute bagian pertama sinahu coding sudah mengulas jenis attribut Value, Readonly, Disabled, Size, dan Maxlength. Sekarang kita sambung kembali jenis input attribute selanjutnya, mumpung masih segar dalam ingatan.

Sebenarnya masih cukup banyak jenis input attribute dalam membuat form. Tapi di sini sinahu coding membatasi hanya pada attribute yang paling familiar dan sering digunakan. Yaitu ada Autofocus, Height-Width, Multiple, dan Placeholder. Apa fungsi dari masing-masing?

Jenis Input Attribute dalam Membuat Form  (Bag 2)

Autofocus

Tanpa perlu kita arahkan kursor, bidang input yang dicantumkan attribute autofocus akan langsung otomatis terlihat sebagai mode edit. Seperti kalau kita buka tab baru di browser, langsung mode edit untuk mengetikkan kata.

<form action="action.php">
  Nama Depan:<br><input type="text" name="fname" autofocus><br>
  Nama Belakang:<br><input type="text" name="lname"><br>
  <input type="submit">
</form>

hasilnya :

Nama Depan:

Nama Belakang:

Height-Width

Attribute height-width, tinggi-lebar. Fungsinya untuk mengatur tombol submit dengan menggunakan gambar. Gambar yang dijadikan tombol submit, diatur tinggi dan lebarnya dengan attribute ini.

<form action="action.php">
  Nama Depan   : <br>
<input type="text" name="firstname"><br>
  Nama Belakang: <br>
<input type="text" name="lastname"><br>
  <input type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinYWqH9AsNG2cdFjLFBRC1W8k-qZZ0PUazKJTjRDQo6eyowKHWyVitLofhL-eCGBRxCGuSs_L74Xd4qqCyA0ghEcO-Knc189NWlKeZPGoeM5S-bzzVkhih_oFibKO0bo6NFGNlT7CnPD0/h99/submit.png" alt="Submit" width="55" height="45">
</form>

hasilnya :

Nama Depan :

Nama Belakang:

Multiple

Sering upload file? pasti sudah tidak asing lagi dengan fungsi attribute yang satu ini, Multiple. Jika diklik maka akan masuk ke folder lokal komputer kita. Seperti di bawah ini.

<form action="action.php">
  Pilih Gambar: <input type="file" name="img" multiple>
  <input type="submit">
</form>

hasilnya :

Pilih Gambar:

Placeholder

Muncul semacam hint pada bidang input. Kata yang kita tempatkan sebagai placeholder akan tampil pada bidang input. Berfungsi semacam sebagai instruksi untuk user yang akan menginput data.

Seperti contoh berikut ini. Pada bidang input yang pertama saya cantumkan placeholder dengan kata "Nama Depan", dan pada bidang input yang kedua saya cantumkan placeholder kata "Nama Belakang".

<form action="action.php">
  <input type="text" name="firstname" placeholder="Nama Depan"><br>
  <input type="text" name="lastname" placeholder="Nama Belakang"><br>
  <input type="submit" value="Submit">
</form>

hasilnya :

Tuntas sudah akhirnya. Nantikan episode belajar HTML berikutnya di sinahu coding.

---