info-b

Tutorial Form HTML Part 4: Fungsi dan Cara Penggunaan tag input type text dan type password

Posted on

Di pada panduan 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 urgen yang sering digunakan bagi tipe ini.

Beberapa atribut lebih berfungsi selaku persentasi atau mempercantik tampilan dari form, sehingga bila sahabat telah menguasai CSS, sebaiknya menggunakan CSS bagi kebutuhan tersebut.


Manfaat Tag Input Type Text dan Type Password pada perancangan Form HTML

Secara umum, kedua type tag input ini berfungsi selaku kolom isian dari user. Dengan perbedaan bagi type=password, text isian tak akan ditampilkan, namun diganti dengan karakter khusus.

Kedua tag ini biasanya digunakan di pada form HTML, namun sahabat pun dapat menggunakannya di luar tag form, terutama bila sahabat akan memprosesnya menggunakan javascript. Format penulisan sangat mendasar dari tag input type=”text” dan type=”password” ini ialah:

Seandainya sahabat menjalankan kedua baris tersebut di pada web browser, akan tampil 2 bikin kotak isian yang dapat diisi dengan text. Perbedaan keduanya hanya di tempilan karakter dari kotak isian tersebut. bagi type=password, text di kotak isian akan ditampilkan dengan karakter password.

Di pada contoh dan penjelasan pada artikel ini, saya hanya menggunakan contoh dan penjelasan bagi tag input type=”text”. Bagi tag input type=”password” caranya persis sama, dan sahabat dapat merubah seluruh kode yang terdapat dari type=”text” menjadi type=”password” selaku alat latihan.


Atribut name: Bagi Pemrosesan tag input type text

Selain atribut type yang digunakan selaku pembeda kedua input, atribut name adalah atribut sangat urgen bila sahabat bermaksud memprosesnya menggunakan form, karena nilai dari atribut inilah yang akan digunakan selaku nama variabel yang akan diproses oleh web server (biasanya menggunakan PHP).

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

Sahabat boleh bebas memberikan nilai bagi atribut name ini, namun disarankan menggunakan nama yang singkat dan sesuai dengan peruntukannya agar tak bingung ketika membangun program PHPnya.


Atribut value: Nilai Awal tag input type text

Atribut value digunakan selaku nilai isian awal bagi input type=”text”. Namun atribut ini bersifat opsional dan sahabat tak mesti menambahkannya bagi setiap text inputan.

Berikut ialah cara penulisannya:

Menggunakan atribut value bagi tampilan awal form akan menolong user memahami penjelasan bagi apa isian text tersebut, namun biasanya hal ini mesti dikombinasikan dengan javascript agar ketika user mulai mengisi text, kotak text akan seketika kosong. Seandainya tak, karenanya terpaksa user mesti mengapus nilai awal ini secara manual.

Pada pemprosesan form oleh web server nantinya, nilai dari atribut value inilah yang akan diproses. Sehingga bila user seketika men-klik tombol submit form tanpa mengisi apa-apa, karenanya nilai nama yang dikirim ialah =”masukkan nama sahabat”. Bagi menghindari hal ini sahabat dapat membangun program javascript bagi menvalidasi isian form sebelum dikirim ke web server.

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


Atribut size: Mengatur Panjang Tampilan

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

Berikut cara penulisan atribut size:

Berikut ialah contoh kode HTML pemakaian atribut size:


Atribut maxlength: Membatasi Panjang Karakter Maksimum

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

Dengan memberikan atribut maxlength=”4″, karenanya ketika user mengetikkan karakter ke 5, karakter tersebut tak akan dapat diinput. Hal ini lumayan urgen bila kita membutuhkan panjang karakter yang telah dibatasi bagi inputan form, misalkan bagi password yang dibatasi sebanyak 6 karakter.

Namun sahabat tak dapat mengandalkan pembatasan atribut maxlength ini, karena user dapat saja membangun script bagi mengubah nilainya. Atribut maxlength ini sebaiknya digunakan selaku pelengkap. Proses pengecekan pembatasan karakter sebaiknya dilakukan pun di ketika form akan diproses di sisi web server (menggunakan PHP).

Berikut ialah contoh kode HTML pemakaian atribut maxsize:


Atribut disabled dan readonly: Menonaktifkan tag input

Atribut disabled dan readonly digunakan bagi membangun kotak isian text tak dapat digunakan. Pemakaian 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 mempunyai 1 nilai, yaitu dirinya sendiri, yang ditulis dengan disabled=”disabled” dan readonly =“readonly”. Berikut contoh penulisannya:

Walaupun kedua text yang mempunyai atribut ini tak dapat digunakan, namun keduanya akan mempunyai tampilan yang berbeda. Atribut disabled akan membangun kotak text berwarna abu-abu, sedangkan atribut readonly tampak seperti kotak text lazim. Sehingga biasanya atribut disabled lah yang sering digunakan, karena akan memberikan tampilan kepada user bahwa kotak text tersebut tak dapat digunakan.

Perbedaan lain ialah user masih dapat men-copy isian text isian ketika atributnya diset menjadi readonly. Namun tak bagi atribut disabled.

Berikut ialah contoh pemakaian atribut disabled dan readonly pada HTML:


Atribut id dan class: CSS dan Javascript

Selain atribut type, value, size, maxlength, readonly dan disabled, kita pun dapat menggunakan atribut seperti id dan class pada tag input type=”text”. Tag id dan class akan dibutuhkan bagi pemograman HTML menggunakan Javascript dan CSS.


Cara Pemakaian Tag Input type text dan type password

Selaku penutup, saya akan membangun beberapa tag input bagi merangkum apa yang telah kita pelajari dalan panduan kali ini, berikut cara pemakaian tag input type text dan type password pada HTML:


Objek form berupa text inputan yang dikerjakan dengan tag input type text ini mungkin adalah inputan form yang akan sangat sering sahabat gunakan. Selain memahami atribut-atribut HTML yang digunakan bagi mendesain form, di pada panduan cara perancangan form HTML dengan tag input type text ini sahabat pun telah mempelajari contoh penggunaannya.

Berikutnya, kita akan mempelajari mengenai cara pembuatan dan penggunaan checkbox pada form HTML


Sumber https://www.duniailkom.com/