perbedaan input width vs size html


berikut perbedaan input html width dengan size

dengan mengunakan width maka lebih konsisten untuk ukurannya, jika menggunakan type font yang berbeda maka dengan atribut size ukurannya menjadi tidak konsisten

 


atribut width digunakan didalam css sedangkan size langsung
<input type='text' name='pin' style='width:20px'>
contoh tidak konsistenya ukuran 
 @font-face {
font-family: 'Diplomata';
font-style: normal;
font-weight: 400;
src: local('Diplomata'), local('Diplomata-Regular'), url(http://fonts.gstatic.com/s/diplomata/v6/8UgOK_RUxkBbV-q561I6kFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
}
@font-face {
font-family: 'Open Sans Condensed';
font-style: normal;
font-weight: 300;
src: local('Open Sans Cond Light'), local('OpenSans-CondensedLight'), url(http://fonts.gstatic.com/s/opensanscondensed/v10/gk5FxslNkTTHtojXrkp-xBEur64QvLD-0IbiAdTUNXE.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
p {
margin: 0 0 10px 0;
}
input {
font-size: 20px;
}
.narrow-font {
font-family: 'Open Sans Condensed', sans-serif;
}
.wide-font {
font-family: 'Diplomata', cursive;
}
.set-width {
width: 220px;
}

<input type="text" size="10" class="narrow-font" value="0123456789" />


<input type="text" size="10" class="wide-font" value="0123456789" />


<input type="text" size="10" class="narrow-font set-width" value="0123456789" />


<input type="text" size="10" class="wide-font set-width" value="0123456789" />

” CSS controls the layout/style of the page. Use CSS when you are controlling your layout.”

width vs size

referensi :

Ditulis dalam web, website. Leave a Comment »

tinggalkan pesan

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 )

w

Connecting to %s

%d blogger menyukai ini: