Cara Penggunaan Tag Input Type Text dan Type Password Serta Fungsinya

Tag Input Type Text dan Type Password

Tag Input Type Text dan Type Password sering digunakan dalam form pendaftaran, contoh mendaftar ke fb pasti akan diminta memasukan password atau sandi.
Dan ketika memasukkan password textnya tidak kelihatan otomatis menjadi bintang atau bulatan. Kenapa bisa? Bagaimana cara membuatnya?
Sebenarnya gampang saja tinggal masukan Tag Input Type Password dan kita sudah bisa membuat text otomatis jadi bintang.
Dalam tutorial ini kita akan belajar memahami fungsi dan cara menggunakan Tag Input Type Text dan Type Password beserta atribut-atribut dari tag input type text dan password.
Nantin kita akan membuat agar password yang kita masukan bisa otomatis jadi bintang.

Fungsi Tag Input Type Text dan Type Password

Fungsi dari tag ini adalah untuk membuat tempat mengisi data dalam form html.
Misal mengisi nama dan password user yang mendaftar.
Tag type text bisa digunakan untuk membuat isian nama dan juga password.
Tag type password hanya digunakan untuk membuat isian password saja. Text yang di input dalam kotak ini otomatis menjadi karakter bintang atau bulatan.

Penulisan tag input type text dan password

Untuk menulis tag ini sangat mudah tinggal masukan seperti dibawah ini

<input type="text" />
<input type="password"/>

Atribut name

Atribut name sangat penting pada tag input inikarena sangat berguna jika anda mau menyimpan data yang sudah di input. Atribut name ini harus sama dengan name di table database jika akan menyimpan ke database.

Atribut value

Atribut value ini berfungsi untuk membuat nilai awal.
Misalnya untuk isian nama, dalam kotak isian bisa kita buatkan valuenya tulisan “isikan nama anda” dan value ini akan tetap ada meskipun halaman di refresh.
Value ini sangat berguna untuk penjelasan form input.

Contoh value dan name tag input

<input type="text" name="nama" value="masukkan nama"/>
<input type="password" name="password" value="masukkan password"/>

Dengan value ini user akan lebih paham data apa yang harus dimasukkan.

Info Penting
kekurangan atribut value adalah ketika user mau mengisi data, tulisan dalam atribut value harus di hapus dulu baru mengetik.
Seperti contoh diatas saya membuat tulisan “masukan nama” tulisan ini harus dihapus dulu baru kita ktik nama… Capek kan?
Kita bisa memakai atribut placeholder untuk mengatasi ini.

Atribut Placeholder

Atribut placeholder pada tag input merupakan atribut yang penting karena aribut ini bisa memudakan user dalam mengisi data.
Fungsi atribut placeholder adalah sama dengan atribut value, bedanya tulisan dari placeholder ini tidak perlu di hapus.
Jadi dengan atribut placeholder ini kita bisa membuat keterangan dalam kotak, keterangan ini tak perlu di hapus.
kita bisa langsung mengetik nama kita tanpa menghapus text lagi. Berbeda dengan atribut value.

Contoh atribut placeholder

<input type="text" name="nama" placeholder="masukkan nama"/>
<input type="password" name="password" placeholder="masukkan password"/>

Dari contoh ini ada bisa melihat ada tulisan “masukan nama” tulisan ini langsung hilang tanpa perlu dihapus… Lebih simpel kan?

beberapa website mengatakan agar kalimat dari value bisa langsung hilang tanpa perlu dihapus harus menggunakan javascript, tapi bagi saya ngak harus kok,,, buktinya dengan atribut placeholder aja bisa… Tanpa script lagi…

Atribut size

Atribut size digunakan untuk mengatur panjang tampilan kotak isian.
Atribut size sangat berguna agar kotak isian bisa di samakan panjangnya atau diatur sesuai keinginan.
Penulisan atribut size juga sangan mudah ktik <input type="text" name="nama" size="4"/>

Contoh Atribut Size

<!DOCTYPE html>
<html>
<head>
 <title>Phpdanmysql.com</title>
</head>
<body>
 <form>
 Size = 5 pixel :
 <input type="text" name="nama" size="5"/>
 <br/>
 Size = 15 pixel :
 <input type="text" name="nama" size="15"/>
 <br/>
 Size = 25 pixel :
 <input type="text" name="nama" size="25"/>
 </form>
</body>
</html>

lihat hasilnya, semua panjangnya textbox tersusun berdasarkan nilai size, semakin besar nilai size semakin panjang textboxnya. cukup mudah bukan?

Atribut maxlength

atribut maxlength sangat berguna untuk mengatur berapa maksimal karakter yang bisa dimasukan pada textbox. kita bisa membatasi karakter yang bisa di isi pada textbox, misalnya pada inputan nama kita batasi hanya 30 karakter, artinya kita tidak bisa mengetik lebih dari 30 karakter.

contoh atribut maxlength

<!DOCTYPE html>
<html>
<head>
 <title>Phpdanmysql.com</title>
</head>
<body>
 <form>
 Size = 5 pixel :
 <input type="text" name="nama" size="5" maxlength="5"/>
 <br/>
 Size = 15 pixel :
 <input type="text" name="nama" size="15" maxlength="15"/>
 <br/>
 Size = 25 pixel :
 <input type="text" name="nama" size="25" maxlength="25"/>
 </form>
</body>
</html>

dalam contoh diatas saya membuat nilai maxlength nya sebesar 5 pada textbox satu, artinya hanya bisa memasukan 5 karakter, gak percaya… coba anda ketikan lebih dari 5 karakter apakah bisa?

Atribut disabled dan readonly

atribut ini kayaknya gak perlu dipelajari karena lebih cocok diaplikasikan oleh javascript, karena kedua atribut ini fungsi untuk membuat textbox dinonaktifkan dan diaktifkan.
atribut ini berguna jika misalkan anda mengharuskan mengisi sesuatu dulu baru textbox ini berfungsi.

contoh Atribut disabled dan readonly

<!DOCTYPE html>
<html>
<head>
 <title>Phpdanmysql.com</title>
</head>
<body>
 <form>
 Biasa :
 <input type="text" name="nama"/>
 <br/>
 readonly :
 <input type="text" name="nama" readonly="readonly" />
 <br/>
 disabled :
 <input type="text" name="nama" disabled="disabled" />
 </form>
</body>
</html>

Atribut id dan class

atribut id dan class digunakan untuk javascript dan css, kita akan pelajari ini nanti dalam tutorial javascript.

Contoh penggunaan Tag Input type text dan type password

saya akan membuat contoh penggunaan tag input type text dengan memakai atribut yang sudah dijelaskan diatas

<!DOCTYPE html>
<html>
<head>
 <title>Phpdanmysql.com</title>
</head>
<body>
 <h4>Belajar tag Input type="text" sangat mudah:</h4>
 <form>
 Tag Input dengan atribut Placeholder :
 <input type="text" name="nama" placeholder="masukkan nama"/>
 <br/>
 Tag Input dengan atribut size = 5 :
 <input type="text" name="nama" size="5"/>
 <br/>
 Tag Input dengan atribut maxlength = 5 :
 <input type="text" name="nama" maxlength="5" />
 <br/>
 Tag Input dengan atribut readonly :
 <input type="text" name="nama" readonly="readonly"/>
 <br/>
 Tag Input dengan atribut disabled :
 <input type="text" name="nama" disabled="disabled" />
 <br/>
 </form>
</body>
</html>

dari tutoial diatas apakah ada yang belum mengerti? ataukah sudah mengerti?

Get real time updates directly on you device, subscribe now.

Ingin Berkomentar?

×
Lewat ke baris perkakas