ホームページ作成ＴＯＰ > フォームを設置する > 入力窓(type="text")の幅を指定する
入力窓(type="text")の幅を指定する
フォーム<form>の中にいれるテキスト入力窓の幅を指定する方法になります。
幅を指定するには、下記の方法があります。
- 文字数指定：size="文字数"
- スタイルシート指定：width:サイズ;
今回は、表示サイズの調整の方法ですので、入力する文字数の制限をしたい場合には入力窓の入力文字数を制限するをご覧下さい。
<input type="text">の入力窓は１行の入力スペースになりますので、複数行を入力する為のサイズ指定は出来ません。
この場合には、複数行分の入力窓を入れるの<textarea>〜</textarea>を使用します。
sample
(1)がsize="サイズ"にて指定、(2)がstyle="width:サイズ;"で指定したものです。
(1)：(2)：
ＨＴＭＬ (1)：size="サイズ"
入力窓サイズをＨＴＭＬにて指定するには、<input>に対してsize="●"にて指定します。
この●の部分に数字にて指定します。今回は、size="20"にて指定してあります。
書き方
<input type="text" size="20" name="text1" >
こうなります
下記の様にブラウザによってサイズが変わってきますので、レイアウトに余裕がない様な場合はレイアウトが崩れてしまう場合がありますので、スタイルシートにて指定する方法もご覧下さい。
| 種類 | 表示結果 | |
|---|---|---|
 IE7 |  | この大きさの違いにより、ブラウザによってはレイアウトが崩れる可能性が高くなってしまいます。 よって、サイズをほぼ同じ大きさに調整した方が良いです。 ↓↓↓ 下記のスタイルシートにて調整する方法をご覧下さい。 |
 IE6 |  | |
 Firefox |  | |
 Opera |  |
ホームページ作成ＴＯＰ > フォームを設置する > 入力窓(type="text")の幅を指定する > このページのＴＯＰ ▲
スタイルシート (2)：width:サイズ;
入力窓サイズをスタイルシートにて指定する事で、上記の様にブラウザによる表示サイズをほぼ同じ大きさにする事が可能になります。
入力窓サイズをスタイルシートにて指定するには、<input>に対してstyle="width:●;"にて指定します。
今回は、width:100px;にて指定してあります。
書き方
<input type="text" size="20" name="text1" style="width:100px;">
こうなります
| 種類 | 表示結果 |
|---|---|
| IE7 |  |
| IE6 |  |
| Firefox |  |
| Opera |  |
ホームページ作成ＴＯＰ > フォームを設置する > 入力窓(type="text")の幅を指定する > このページのＴＯＰ ▲
