Webサイト制作におけるフォーム(inputタグ)の入力欄のsize属性とwidth指定値の関係について

本日、Webサイトのフォームページを制作していて、tableのthタグにCSSでwidthを指定したところ、
Firefoxでは希望通りになったが、IEChromeでは幅が変化しなかった。

指定値を変えてみたが、IEChromeではまったく変わらない。
Webで調べてtable-layout: fixed;などを指定してみてもまったく変わらない。

いろいろと試してみて、ふと気づいたのが、inputタグのsize属性の値(幅)。
この値を小さくしてみると、IEChromeでのth幅が変化した。

どうやらブラウザによってsize属性で指定した値の表示幅が異なることが原因だったらしい。

Webで調べてみたところ、やはり検証されている方がいた。
参照:http://www.form-keeper.com/efo-blog/in-form/the-wide-differences-in-birth-size-input-by-the-browser/

size属性値で指定するのではなく、inputタグにstyle="width: ○○px;"と指定するのがベターらしい。

せっかくなので、inputタグのsize属性の指定値と、tableタグ、thタグ、tdタグのwidth指定値との関係、さらにinputタグへのwidth指定値との関係を検証してみた。

以下、検証コード。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>inputタグのsize属性関連の検証</title>
<style>
body, div, table, th, tr, td, p {
  margin: 0;
  padding: 0;
}
table {
  border-collapse:collapse;
  margin: 5px;	
}
table.one {
  width: 600px;
}
table.two {
  width: 500px;
}
table.three {
  width: 300px;
}
table.four {
  width: 100px;
}
th {
  width: 290px;
  font-size: 12px;
 font-weight:normal;
  padding: 5px;
  background: #eee;
}
td {
  width: 290px;	
  font-size: 12px;
  padding: 5px;
  background: #ccc;	
}
p {
  margin-top: 20px;
  padding-left: 10px;		
}
input.five {
  width: 300px;		
}
</style>
</head>
<body>
<form action="#" method="post" id="customerIpt">
<p>size属性値とtdタグのwidth指定値の関係</p>
<table border="1">
<tr><th>size属性値(40)がtdタグの指定幅(width:290px)より小さい場合</th><td><input type="text" name="txt1" size="40"></td></tr>
</table>
<table border="1">
<tr><th>size属性値(80)がtdタグの指定幅(width:290px)より大きい場合</th><td><input type="text" name="txt1" size="80"></td></tr>
</table>

<p>以下、table幅を指定した場合のthのwidthとinputタグのsize属性の幅の優先度の検証</p>
<table border="1" class="one">
<tr><th>tableのwidth(600px)、thのwidth(290px)</th><td><input type="text" name="txt1" size="70"></td></tr>
</table>
<table border="1" class="two">
<tr><th>tableのwidth(500px)、thのwidth(290px)</th><td><input type="text" name="txt1" size="70"></td></tr>
</table>
<table border="1" class="three">
<tr><th>tableのwidth(300px)、thのwidth(290px)</th><td><input type="text" name="txt1" size="70"></td></tr>
</table>
<table border="1" class="four">
<tr><th>tableのwidth(100px)、thのwidth(290px)</th><td><input type="text" name="txt1" size="70"></td></tr>
</table>

<p>以下、inputタグに対するsize属性指定とwidth指定の違いによる表示結果の検証</p>
<table border="1">
<tr><th>size属性のみ指定</th><td><input type="text" name="txt1" size="70"></td></tr>
</table>
</table>
<table border="1">
<tr><th>widthのみ指定</th><td><input type="text" name="txt1" style="width:300px;"></td></tr>
</table>
<table border="1">
<tr><th>size属性とwidth両方指定(size先、width後)</th><td><input type="text" name="txt1" size="70" style="width:300px;"></td></tr>
</table>
<table border="1">
<tr><th>size属性とwidth両方指定(width先、size後)</th><td><input type="text" name="txt1" style="width:300px;" size="70"></td></tr>
<table border="1">
<tr><th>タグ内でsize属性指定、CSSでwidth指定</th><td><input type="text" name="txt1" class="five" size="70" ></td></tr>
</table>
</form>
</body>
</html>

以下、Firefoxでの表示結果。
←クリックで拡大表示
結果から、以下のことがわかった。

  • inputタグの入力欄の指定幅(size属性、widthどちらで指定しても)はtableのtdタグの指定幅より優先される。
  • tableタグの幅を指定した場合でも、inputタグの入力欄の指定幅が守られる。thタグやtdタグに幅を指定していた場合もinputタグの入力欄の指定幅が優先される。
  • inputタグに対してsize属性とstyle属性(width)を指定した場合は、style属性の幅が優先される。

念のため、ブラウザの違いによるinputタグのsize属性とwidth指定値の表示幅の結果も比較しておく。

以下、検証コード。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ブラウザの違いによるinputタグのsize属性とwidthの関係</title>
<style>
body, div, p {
  margin: 0;
  padding: 0;
}
th {
  width: 150px;		
}
input {
  background:#CCCCCC;		
}
p {
  margin-top: 20px;
  padding-left: 10px;		
}
</style>
</head>
<body>
<form action="#" method="post" id="customerIpt">
<p>各ブラウザ表示結果</p>
<table>
<tr><th>size属性:50</th><td><input type="text" name="txt1" size="50"></td></tr>
<tr><th>width:300px</th><td><input type="text" name="txt1" style="width: 300px;"></td></tr>
</table>
</form>
</body>
</html>

以下、表示結果。
←クリックで拡大表示

やはりFirefoxIEChromeでは表示される幅がかなり違うことがわかる。