Javascriptの勉強を始てformタグとinputタグを使うようになりました。
HTML上でシンプルに<input>タグを書くと以下のように表示されます。
何も考えずに使っていましたが、inputのテキストエリアを画面に合わせて調整したい状況になりHTMLにスタイルを適用させる方法をすっかり忘れていたので、書き方をまとめてみました。
参考サイト：－HTMLタグリファレンス (新しいタブで開く)”><INPUT type=”text”>－HTMLタグリファレンス
HTMLにスタイルを適用させる
以下が例となります。
実際に表示させてみると下のように表示されます。
解説
size = “”
inputでサイズを指定するのは、sizeを使うらしい。
けれどブラウザによってサイズが異なるようでクセがありそうです。
style=””
style属性を書くことができます。
上記の例ではsizeは無視されstyleで記述したwidth:100px; height:100px; が適用されています。
※ width = 幅、height = 高さ。
inputのサイズ指定はstyleで行うほうが柔軟なようです。
※styleで書かなくても外部ファイルでcssを指定しておくこともできます。
maxlength=”” (サイズと関係ないけど)
サイズと関係ないけれど、予備知識として記述します。
maxlength=”” は最大文字数を指定できます。
例えばレスポンシブ
スマホ表示など全面にinputの幅を広げたい時はこんな感じ。
ブラウザに表示すると以下のようになります。
widthの単位がパーセントなので幅が変動しても対応可能です。
