Cara Mengatasi Error Wrapper Pada Input Element Dan Form

Apa yang dimaksud dengan error wrapper pada input element dan form? Pada case ini error wrapper yang saya maksud adalah block input element dan form melebihi/menembus hingga keluar dari pembungkus/wrapper. Biasanya error wrapper sering terjadi pada formulir kontak (contact form) dan form lainnya yang mengandung input element dengan style lebar penuh atau full width.

Agar mudah dipahami mari kita lihat ilustrasi error wrapper pada elemen <input> dan <form> pada gambar berikut ini:

[ads id="ads1"] Sebenarnya error wrapper merupakan masalah sederhana, meski demikian bagi pemula tentu saja ini sangat membingungkan. Maka dari itu disini saya akan menjelaskan secara rinci cara mengatasi error wrapper pada elemen input dan form.

Mengatasi Error Wrapper <input> element dan <form>

Cara yang paling mudah untuk mengatasi error wrapper adalah dengan menambahkan css box-sizing:border-box; pada elemen input, contoh:

html

<input class="input-element" title="Input Email" name="email" placeholder="Email address..." type="text">

Css

.input-element{

box-sizing:border-box;

width:100%;

}

box-sizing:border-box; secara default akan mengawal input element agar tetap berada didalam pembungkus atau wrapper. CSS box-sizing:border-box; memungkinkan kita untuk menambahkan pembatas dalam lebar dan tinggi sehingga input element meskipun input element memiliki nilai width 100%, input element tidak akan keluar dari pembungkus/wrapper <form> atau <div>

Contoh:

Saya membuat dua <form> yang memiliki nilai yang sama yaitu: width:200px;padding:10px 5px; dan input element yang ada didalamnya memiliki nilai width:100%. Jika input element tidak dibatasi dengan css box-sizing maka input element akan menerobos pembungkusnya yaitu form element seperti terlihat pada contoh dibawah ini:

Sedangkan form yang kedua dengan penerapan css box-sizing:border-box;, hasilnya input element tidak keluar/melebihi pembungkusnya (wrapper).

Terlihat bedanya bukan? Bahkan tanpa css box-sizing:border-box; input element yang memiliki nilai width:100% akan menembus padding pada pembungkus.

Nah, demikian saja cara nya, mudah bukan...! perlu diketahui juga bahwa css box-sizing:border-box; tidak hanya berfungsi pada input element saja, kamu juga bisa menerapkan css box-sizing pada form element, div dan tag html lainnya yang sulit untuk dibungkus dengan padding dan margin atau disebut dengan istilah error wrapper.