Lanjut ke konten

Tips Meresize INPUT type TEXT Form

April 15, 2011

Jika anda menghadapi desain web yang melibatkan INPUT TYPE text seperti ini, contoh kodenya adalah:

Nama: <input type=”text” name=”name” >

Hasilnya adalah:

Nama:

Tentu suatu ketika akan mengalami masalah dengan mengatur lebar kolom tersebut. Nah, bagaimana caranya melakukan pengubahan ukurannya? Caranya ternyata tidak terdapat dalam properti utama input type text tersebut. Tetapi dengan cara menambahkan Style dengan kode semacam ini:

<input type=”text” name=”name” style=”width:500px;”>

Hasilnya adalah seperti ini:

Mudah bukan? Ternyata style ini bisa digunakan tidak hanya sebatas width, tetapi tinggi, background, warna, border, lengkungan sudut, margin, padding, font,  dan lain sebagainya.

Contoh adalah:

<input type=”text” name=”name” style=”width:500px; border:1px dotted #f30; border-radius:4px; -moz-border-radius:4px; background:#363; height:20px; font-family:Garamond; margin-left:10px;”>

Nah, hasilnya seperti berikut di bawah ini

Nah Selamat berkreasi lebih lanjut.. hehehehe

From → Tidak Dikategorikan

3 Komentar
  1. s
    s
    s
    s
    s
    s
    s
    s
    s
    s
    s
    s
    s
    s

    lha yang begini ini lho yang saya cari,,,
    makasih infonya

  2. itu style untuk class yang mana ya gan ?

  3. rozi permalink

    blog tolol

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout /  Ubah )

Foto Google

You are commenting using your Google account. Logout /  Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout /  Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout /  Ubah )

Connecting to %s

%d blogger menyukai ini: