Cara menggunakan html change password template

Di dalam tutorial Belajar HTML Dasar: Cara Membuat Form di HTML (tag form), kita telah menggunakan tag input dengan type=text dan type=password, namun kali ini kita akan mempelajari beberapa atribut penting yang sering digunakan untuk tipe ini.

Table of Contents Show

Atribut size: Mengatur Panjang Tampilan
Atribut maxlength: Membatasi Panjang Karakter Maksimum
Atribut disabled dan readonly: Menonaktifkan tag input
Atribut id dan class: CSS dan Javascript
Cara Penggunaan Tag Input type text dan type password

Atribut size: Mengatur Panjang Tampilan

Atribut size untuk tag input type=”text” digunakan untuk membatasi panjang dari kotak isian. Nilai dari atribut ini adalah berapa pixel panjang kotak isian tersebut.

Berikut cara penulisan atribut size:

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

Berikut adalah contoh kode HTML penggunaan atribut size:

<!DOCTYPE html>
<html>
 
<head>
   <title>Belajar Tag Input Type=text HTML</title>
</head>

<body>

   <h4>Belajar tag Input type="text" duniailkom:</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: Membatasi Panjang Karakter Maksimum

Atribut maxlegth digunakan untuk membatasi seberapa banyak karakter yang dapat diinput kedalam kotak isian. Nilai dari atribut ini adalah banyak maksimum karakter yang bisa diketik. Berikut adalah cara penulisan atribut ini:

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

Dengan memberikan atribut maxlength=”4″, maka ketika user mengetikkan karakter ke 5, karakter tersebut tidak akan bisa diinput. Hal ini cukup penting jika kita membutuhkan panjang karakter yang telah dibatasi untuk inputan form, misalkan untuk password yang dibatasi sebanyak 6 karakter.

Namun anda tidak bisa mengandalkan pembatasan atribut maxlength ini, karena user bisa saja membuat script untuk mengubah nilainya. Atribut maxlength ini sebaiknya digunakan sebagai pelengkap. Proses pengecekan pembatasan karakter sebaiknya dilakukan juga pada saat form akan diproses di sisi web server (menggunakan PHP).

Berikut adalah contoh kode HTML penggunaan atribut maxsize:

<!DOCTYPE html>
<html>
 
<head>
   <title>Belajar Tag Input Type=text HTML</title>
</head>

<body>

   <h4>Belajar tag Input type="text" duniailkom:</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: Menonaktifkan tag input

Atribut disabled dan readonly digunakan untuk membuat kotak isian text tidak bisa digunakan. Penggunaan atribut ini biasanya di kombinasikan dengan javascript agar berfungsi maksimal. Misalkan sebuah kotak isian hanya dapat diisi ketika user telah mengisi kotak isian lainnya.

Kedua atribut ini hanya memiliki 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" />

Walaupun kedua text yang memiliki atribut ini tidak bisa digunakan, namun keduanya akan memiliki tampilan yang berbeda. Atribut disabled akan membuat kotak text berwarna abu-abu, sedangkan atribut readonly tampak seperti kotak text biasa. Sehingga biasanya atribut disabled lah yang sering digunakan, karena akan memberikan tampilan kepada user bahwa kotak text tersebut tidak bisa digunakan.

Perbedaan lain adalah user masih dapat men-copy isian text isian ketika atributnya diset menjadi readonly. Namun tidak untuk atribut disabled.

Berikut adalah contoh penggunaan 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" duniailkom:</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 bisa menggunakan atribut seperti id dan class dalam tag input type=”text”. Tag id dan class akan dibutuhkan untuk pemograman HTML menggunakan Javascript dan CSS.

Cara Penggunaan Tag Input type text dan type password

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

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

Objek form berupa text inputan yang dibuat dengan tag input type text ini mungkin merupakan inputan form yang akan paling sering anda gunakan. Selain memahami atribut-atribut HTML yang digunakan untuk merancang form, di dalam tutorial cara pembuatan form HTML dengan tag input type text ini anda juga telah mempelajari contoh penggunaannya.