Webサイト制作におけるフォーム(inputタグ)の入力欄のsize属性とwidth指定値の関係について
本日、Webサイトのフォームページを制作していて、tableのthタグにCSSでwidthを指定したところ、
Firefoxでは希望通りになったが、IEとChromeでは幅が変化しなかった。
指定値を変えてみたが、IEとChromeではまったく変わらない。
Webで調べてtable-layout: fixed;などを指定してみてもまったく変わらない。
いろいろと試してみて、ふと気づいたのが、inputタグのsize属性の値(幅)。
この値を小さくしてみると、IEとChromeでの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>