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: ![Cara Mengatasi Error Wrapper Pada Input Element Dan Form Cara Mengatasi Error Wrapper Pada Input Element](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAlacpA39QGjNXuXFoY34CwJ6yKCw2uznU3pLK3rXPz8zWvAMEQQjZZE8MuYA8IvcKvJpyIokFh8qV-KQxLu6IBf4kpHCZqIpQcG_nNgRbeg3CwGW-LgRZ4eXU_C2Q-CjkzIatE0RTjSI/s640/error-wrapper.jpg)
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.
Komentar
Posting Komentar