Fungsi dan Cara Pemakaian tag input type text dan type password

belajar HTML dan CSS untuk pemula

Di dalam tutorial Belajar  Cara Membuat Form di HTML (tag form), kita sudah memakai tag input dengan type=text dan type=password, tetapi saat ini kita akan mempelajari beberapa atribut penting yang biasa dipakai untuk tipe ini.

Beberapa atribut lebih berguna sebagai persentasi atau mempercantik tampilan dari form, sehingga bila kamu sudah menguasai CSS, disarankan memakai CSS untuk kebutuhan itu.

Fungsi Tag Input Type Text dan Type Password dalam pembuatan Form HTML

Secara garis besar, kedua type tag input ini berguna sebagai kolom isian dari user. Dengan perbedaan untuk type=password, text isian tak akan ditampilkan, tetapi diganti dengan karakter khusus.

Kedua tag ini pada umumnya dipakai di dalam form HTML, tetapi kamu juga dapat memakainya di luar tag form, terutama bila kamu akan memprosesnya memakai javascript. Format penulisan paling dasar dari tag input type=”text” dan type=”password” ini merupakan:

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

Bila kamu menjalankan kedua baris itu di dalam web browser, akan tampil 2 buat kotak isian yang dapat diisi dengan text. Perbedaan keduanya cuma pada tampilan karakter dari kotak isian itu. untuk type=password, text pada kotak isian akan ditampilkan dengan karakter password.

Di pada contoh dan penjelasan dalam artikel ini, saya cuma memakai contoh dan penjelasan untuk tag input type=”text”. Untuk tag input type=”password” caranya persis sama, dan kamu bisa mengubah seluruh kode yang ada dari type=”text” jadi type=”password” sebagai sarana latihan.

Atribut name

Selain atribut type yang dipakai sebagai pembeda kedua input, atribut name merupakan atribut terpenting bila kamu bermaksud memprosesnya memakai form, sebab nilai dari atribut inilah yang akan dipakai sebagai nama variabel yang akan diproses oleh web server (pada umumnya memakai PHP).

Berikut ialah contoh penulisan atribut name untuk tag input type=”text”:

<form>

   Nama: <input type="text" name="nama_user" />
Password: <input type="password" name="password_user"/>
</form>

Kamu bisa bebas memberikan nilai untuk atribut name ini, tetapi dianjurkan memakai nama yang singkat dan sesuai dengan peruntukannya supaya tidak bingung saat membuat program PHPnya.

Atribut value

Atribut value dipakai sebagai nilai isian awal untuk input type=”text”. Tetapi atribut ini bersifat opsional dan kamu tidak mesti menambahkannya untuk tiap text inputan.

Berikut ialah cara penulisannya:

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

Memakai atribut value untuk tampilan awal form akan membantu user memahami penjelasan untuk apa isian text itu, tetapi pada umumnya hal ini harus dikombinasikan dengan javascript supaya saat user mulai mengisi text, kotak text akan segera kosong. Bila tidak, maka terpaksa user harus mengapus nilai awal ini secara manual.

Dalam pemprosesan form oleh web server nantinya, nilai dari atribut value inilah yang akan diproses. Sehingga bila user langsung men-klik tombol submit form tanpa mengisi apa-apa, maka nilai nama yang dikirim ialah =”masukkan nama kamu”. Untuk menghindari hal ini kamu dapat membuat program javascript untuk menvalidasi isian form sebelum dikirim ke web server.

Berikut ialah contoh pemakaian atribut value dalam tag input type=”text” HTML

<!DOCTYPE html>
<html>
 
<head>
<title>Belajar Tag Input Type=text HTML</title>
</head>
<body>
<h4>Belajar tag Input type="text" infanthree:</h4>
<form>
Nama User :<input type="text" name="nama_user" value="masukkan nama kamu"/>
<br/>
Password User :<input type="password" name="password_user" 
value="masukkan password kamu"/>
</form>
</body>
</html>

Atribut size

Atribut size untuk tag input type=”text” dipakai untuk membatasi panjang dari kotak isian. Nilai dari atribut ini merupakan berapa pixel panjang kotak isian itu.

Berikut cara penulisan atribut size:

<input type="text" name="nama_user" size="4"/>

Berikut ialah contoh kode HTML pemakaian atribut size:

<!DOCTYPE html>
<html>
 
<head>
<title>Belajar Tag Input Type=text HTML</title>
</head>
<body>
<h4>Belajar tag Input type="text" infanthree:</h4>
<form>
Size = 04 pixel :
<input type="text" name="nama_user" size="4"/>
<br/>
Size = 10 pixel :
<input type="text" name="nama_user" size="10"/>
<br/>
Size = 20 pixel :
<input type="text" name="nama_user" size="20"/>
</form>
</body>
</html>

Atribut maxlength

Atribut maxlegth dipakai untuk membatasi seberapa banyak karakter yang bisa diinput kedalam kotak isian. Nilai dari atribut ini merupakan banyak maksimal karakter yang dapat diketik. Berikut ialah cara penulisan atribut ini:

<input type="text" name="id_user" maxlength="4"/>

Dengan memberikan atribut maxlength=”4″, maka saat user mengetikkan karakter ke 5, karakter itu tidak akan dapat diinput. Hal ini cukup penting bila kita memerlukan panjang karakter yang sudah dibatasi untuk inputan form, misalnya untuk password yang dibatasi sebanyak 6 karakter.

Tetapi kamu tidak dapat mengandalkan pembatasan atribut maxlength ini, sebab user bisa jadi membuat script untuk merubah nilainya. Atribut maxlength ini disarankan dipakai sebagai pelengkap. Proses pengecekan pembatasan karakter disarankan dilakukan pula pada saat form akan diproses di sisi web server (memakai PHP).

Berikut ialah contoh kode HTML pemakaian atribut maxsize:

<!DOCTYPE html>
<html>
 
<head>
<title>Belajar Tag Input Type=text HTML</title>
</head>
<body>
<h4>Belajar tag Input type="text" infanthree:</h4>
<form>
Size = 04 pixel, maxlength = 04 :
<input type="text" name="nama_user" size="4" maxlength="4"/>
<br/>
Size = 10 pixel, maxlength = 05 :
<input type="text" name="nama_user" size="10" maxlength="5"/>
<br/>
Size = 20 pixel, maxlength = 10 :
<input type="text" name="nama_user" size="20" maxlength="10"/>
</form>
</body>
</html>

Atribut disabled dan readonly

Atribut disabled dan readonly dipakai untuk membuat kotak isian text tidak dapat dipakai. Pemakaian atribut ini pada umumnya di kombinasikan dengan javascript supaya berfungsi maksimum. Misalnya sebuah kotak isian cuma bisa diisi saat user sudah mengisi kotak isian lainnya.

Kedua atribut ini cuma mempunyai 1 nilai, yaitu dirinya sendiri, yang ditulis dengan disabled=”disabled” dan readonly =“readonly”. Berikut contoh penulisannya:

<input type="text" name="nama_user" readonly="readonly" />
<input type="text" name="nama_user" disabled="disabled" />

Meskipun kedua text yang mempunyai atribut ini tidak dapat dipakai, tetapi keduanya akan mempunyai tampilan yang berbeda. Atribut disabled akan membuat kotak text berwarna abu-abu, sedangkan atribut readonly terlihat seperti kotak text biasa. Sehingga pada umumnya atribut disabled lah yang biasa dipakai, sebab akan memberikan tampilan kepada user bahwa kotak text itu tidak dapat dipakai.

Perbedaan lain ialah user masih bisa men-copy isian text isian saat atributnya diset jadi readonly. Tetapi tidak untuk atribut disabled.

Berikut ialah contoh pemakaian atribut disabled dan readonly dalam HTML:

<!DOCTYPE html>
<html>
 
<head>
<title>Belajar Tag Input Type=text HTML</title>
</head>
<body>
<h4>Belajar tag Input type="text" infanthree:</h4>
<form>
User name (normal) :
<input type="text" name="nama_user"/>
<br/>
User name (readonly) :
<input type="text" name="nama_user" readonly="readonly" />
<br/>
User name (disabled) :
<input type="text" name="nama_user" disabled="disabled" />
</form>
</body>
</html>

Atribut id dan class: CSS dan Javascript

Selain atribut type, value, size, maxlength, readonly dan disabled, kita juga dapat memakai atribut seperti id dan class dalam tag input type=”text”. Tag id dan class akan diperlukan untuk pemograman HTML memakai Javascript dan CSS.

Cara Pemakaian Tag Input type text dan type password

Sebagai penutup, saya akan membuat beberapa tag input untuk merangkum apa yang sudah kita pelajari dalan tutorial saat ini, berikut cara pemakaian tag input type text dan type password dalam HTML:

<!DOCTYPE html>
<html>
 
<head>
<title>Belajar Tag Input Type=text HTML</title>
</head>
<body>
<h4>Belajar tag Input type="text" di infanthree.com:</h4>
<form>
Tag Input dengan atribut value :
<input type="text" name="nama_user" value="masukkan nama kamu"/>
<br/>
Tag Input dengan atribut size = 4 :
<input type="text" name="nama_user" size="4"/>
<br/>
Tag Input dengan atribut maxlength = 5 :
<input type="text" name="nama_user" maxlength="5" />
<br/>
Tag Input dengan atribut readonly :
<input type="text" name="nama_user" readonly="readonly"/>
<br/>
Tag Input dengan atribut disabled :
<input type="text" name="nama_user" disabled="disabled" />
<br/>
</form>
</body>
</html>

Objek form berupa text inputan yang dibikin dengan tag input type text ini mungkin adalah inputan form yang akan paling selalu kamu pakai. Selain memahami atribut-atribut HTML yang dipakai untuk merancang form, di dalam tutorial cara pembuatan form HTML dengan tag input type text ini kamu juga sudah mempelajari contoh penggunaannya.

Berikutnya, kita akan mempelajari mengenai cara pembuatan dan pemakaian checkbox dalam form HTML


Butuh Web Developer Makassar atau Jasa SEO di Makassar yang bergaransi? Jangan ragu dengan infanthree.com. Kami juga penyedia Jasa Pembuatan Aplikasi Android di Makassar yang terkemuka. Selain itu ada layanan SEM, SMM, Internet Marketing Agency Makassar dan Social Media, Pembuatan Logo, Konten, Video, Maskot dan Instalasi jaringan ataupun mikrotik, hingga pelatihan komputer dan internet marketing.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *