Bagian yang akan ditemukan padasebuah website yang memiliki keanggotaan adalah form pengisian atau form untuk log in. Seperti sehari hari, pastinya anda menggunakan sosmed. Untuk mengakses tersebut anda harus log in dengan memasukkan username/email beserta password. Sebagai salah satu unsur dalam tampilan website, maka berikut catatan dari saya tentang membuat form isian username (tipe teks) dan password.
Untuk membuat data input tersebut cukup dengan menambahkan atribut type = "text" dan atribut type="password". Secara lengkap format dasarnya bisa ditulis sebagai berikut.
Untuk membuat data input tersebut cukup dengan menambahkan atribut type = "text" dan atribut type="password". Secara lengkap format dasarnya bisa ditulis sebagai berikut.
<input type ="text/><input type="password/>Selanjutnya metode input tersebut akan dikaitkan degan bahasa pemograman lain seperti PHP. Data tersebut akan diterjemahkan server dan akan menampilkan halaman yang dituju.
Menggunakan Atribut Value
Atribut value ini digunakan untuk tampilan sebelum pengguna memasukkan teks atau password. Tamplan tersebut berupa tulisan pada kolom seperti "masukkan username". Tetapi atribut ini merupakan pilihan saja.
Username :<input type="text" name="nama_user" value="username kamu"/>
Password :<input type="password" name="password_user" value="ketikan kata sandi"/>
Ketika user memasukkan formulir kosong maka yang akan diproses data adalah value tersebut. Namun bila telah diinput username dan password makadata yang diproses sesuai dengan inputan. Untuk mencegah proses yang tidak berguna itu biasanya akan dipasang javascript untuk menvalidasi isisan sebelum di proses server. sebagai contoh anda bisa jalankan kode berikut ini
<!DOCTYPE html>
<html>
<head>
<title>Form Untuk Log In</title>
</head>
<body>
<h4>Silahkan Masukkan Username dan Password Anda di sini</h4>
<form>
Username:<input type="text" name="nama_user" value="masukkan nama anda"/>
<br/><br/>
Password:<input type="password" name="password_user"
value="masukkan password anda"/>
</form>
</body>
</html>
Mengatur Panjang Kotak tampilan
Untuk mengatur tampilan kotak bisa menggunakan atribut size. Secara lengkappenulisannya mengikuti : <input type="text" size="5"/>. Satuan yang digunakan adalah pixel untuk dimensi kotak tampilan ini.
Sebagai contoh bisa di jalankan kode berikut ini dan lihat perbandinga panjang masng masing kolom isian.
<!DOCTYPE html>
<html>
<head>
<title>Form Untuk Log In</title>
</head>
<body>
<h4>Membuat Form Log In pada Website</h4>
<form>
Username:<input size ="10" type="text" name="nama_user" value="masukkan nama anda"/>
<br/><br/>
Password:<input size="20" type="password" name="password_user"
value="masukkan password anda"/>
</form>
</body>
</html>
Membatasi Jumlah Karakter dalam Form Input HTML
Untuk membatasi karakter maksimun bisa digunakan atribut maxlength. Ini akan membatasi seperti jumlah password yang harus digunakan misalnya 8 karakter. Contoh lengkapnya format penulisan ini adalah :
<input type="text" name="id_user" maxlength="4"/>
Sebagai contoh bisa ditambahkan maxlength pada kode sebelumnya. Jika anda mengetikkan karakter lebih dari yang diijinkan maka karakter tersebut mentok.
Pengisian Kotak Isian Bersyarat
Fungsi ini digunakan misalnya sebuah isian baru akan bisa diisi setelah mengisi sebuah kotak sebelumnya. Untuk menggunakan ini biasanya digunakan atribut ... disabled="disabled> dan ... readonly="readonly/>.
Fungsi ini biasa digunakan dengan integrasi javascript. Pada tampilannya kotak teks ini akan berwarna abu abu ketika ditampilkan default tanpa diberi CSS.
Penambahan id dan class
atribut id dan class ini digunakan untuk merujukkan hubungan dengan yang lain. Misalkan isian form akan digunakan untuk memproses data untuk javascript. Atau akan disetting dengan CSS, maka digunakan class.
Contoh Keseluruhan dari form tersebut adalah sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<title>ibahasapemograman</title>
</head>
<body>
<h4>Form Teks dan Password</h4>
<form>
Tag Input dengan atribut value :
<input type="text" name="nama_user" value="masukkan nama anda"/>
<br/><br/>Password :<input type="password" name="nama_user" />
<br/><br/>
Tag Input dengan atribut size = 4 :
<input type="text" name="nama_user" size="4"/>
<br/><br/>
Tag Input dengan atribut maxlength = 5 coba ketik 6 huruf pasti gak bisa :
<input type="text" name="nama_user" maxlength="5" />
<br/><br/>
Tag Input dengan atribut readonly gak bisa di isi karena readonly:
<input type="text" name="nama_user" readonly="readonly"/>
<br/><br/>
Tag Input dengan atribut disabled gak bisa di isi karena disabled :
<input type="text" name="nama_user" disabled="disabled" />
<br/>
</form></body>
</html>
Dari contoh atmpilan di atas, bisa dilihat masing masing sesuai atribut penggunaanya. Untuk password akan disembunyikan dengan menampilkan tanda bullet. Sekarang bisa kan membuat sebuah form log in pada website.
Share Yuk
Related Posts
Loading...
No comments:
Post a Comment