Fungsi Tag Input dalam pembuatan Form HTML
Secara umum, kedua type tag input ini berfungsi sebagai kolom isian dari user. Dengan perbedaan untuk type=password, text isian tidak akan ditampilkan, namun diganti dengan karakter khusus.
Kedua tag ini biasanya digunakan di dalam form HTML,
namun anda juga bisa menggunakannya di luar tag form, terutama jika anda akan memprosesnya
menggunakan javascript. Format penulisan paling dasar dari tag
input type=”text” dan type=”password” ini
adalah:
<input type="text" />
<input type="password"/>
Atribut name: Untuk Pemrosesan tag input type text
Selain atribut type yang
digunakan sebagai pembeda kedua input, atribut name merupakan atribut paling penting jika anda
bermaksud memprosesnya menggunakan form, karena nilai dari atribut inilah yang akan
digunakan sebagai nama variabel yang akan diproses oleh web server (biasanya
menggunakan PHP).
Berikut
adalah 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>
Atribut value: Nilai Awal tag input type text
Atribut value digunakan
sebagai nilai isian awal untuk input type=”text”. Namun atribut
ini bersifat opsional dan anda tidak harus menambahkannya untuk setiap text
inputan.
Beri.kut adalah cara penulisannya:
<input type="text"
name="nama_user" value="masukkan nama anda"/>
<input type="password"
name="password_user" value="masukkan password anda"/>
Menggunakan atribut value untuk
tampilan awal form akan membantu user memahami
penjelasan untuk apa isian text tersebut, namun biasanya hal ini harus
dikombinasikan denganjavascript agar ketika user mulai mengisi text,
kotak text akan langsung kosong. Jika tidak, maka terpaksa user harus mengapus
nilai awal ini secara manual.
Berikut adalah contoh penggunaan 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" duniailkom:</h4>
<form>
nama user : <input type="text" name="nama_user" value="masukkan nama anda">
<br/>
password user : <input tyoe="password" name="password_user" value="masukan password anda"/>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Belajar Tag Input Type=text HTML</title>
</head>
<body>
<h4>Belajar tag input type="text" duniailkom:</h4>
<form>
nama user : <input type="text" name="nama_user" value="masukkan nama anda">
<br/>
password user : <input tyoe="password" name="password_user" value="masukan password anda"/>
</form>
</body>
</html>
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 tyoe="text duniaikom"</h4>
<form>
size = 04 pixel :
<input type="text" name="nama user" size="4">
size = 10 pixel :
<input type="text" name="nama user" size="10">
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"/>
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 tyoe="text duniaikom"</h4>
<form>
size = 04 pixel, maxlength = 04 :
<input type="text" name="nama user" size="4" maxlength="4">
size = 10 pixel, maxlength = 05 :
<input type="text" name="nama user" size="10" maxlength="5">
size = 20 pixel, maxlength = 10 :
<input type="text" name="nama user" size="20" maxlength="10">
</form>
</html>
</body
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 dengandisabled=”disabled” dan readonly =“readonly”. Berikut contoh penulisannya:
<input type="text" name="nama_user"
readonly="readonly" />
<input type="text"
name="nama_user" disabled="disabled" />
Atribut disabled akan
membuat kotak text berwarna abu-abu, sedangkan atribut readonly tampak seperti kotak text biasa.
Perbedaan lain adalah user masih dapat men-copy isian
text isian ketika atributnya diset menjadireadonly. 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 tyoe="text duniaikom"</h4>
<form>
username (normal) :
<input type="text" name="nama user">
username (readonly) :
<input type="text" name="nama user" readonly="readonly">
username (disable)
<input type="text" name="nama user" disable="disable">
</form>
</body>
</html>
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:
dan type password dalam HTML:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Tag Input Type=text HTML</title>
</head>
<body>
<h4>belajar tag input tyoe="text duniaikom"</h4>
<form>
tag input dengan atribut value :
<inpt type="text" name="nama user" value="masukkan nama anda">
</br>
tag input dengan atribut size = 4 :
<inpt type="text" name="nama user" size="4">
</br>
tag input dengan atribut maxlength = 5:
<inpt type="text" name="nama user" maxlength="5"">
</br>
tag input dengan atribut readonly :
<inpt type="text" name="nama user" readonly="readonly">
tag input dengan atribut disable :
<inpt type="text" name="nama user" disable="disable">
</form>
</body>
</html>
Informasi yang sangat bermanfaat.
BalasHapusbagi yang ingin belajar membuat website bisa dilihat di situs berikut ini http://www.computer-course-center.com/web-design.html