このページについて
このページではHTMLで使う事ができるsize属性の機能と使い方の解説をしています。
size属性
sizeはinputタグとselectタグの2つで使う事ができます。それぞれで機能が異なるので、それぞれで解説していきます。
inputタグで使う場合
inputタグで使う場合は「入力エリアの横幅を文字の数で指定」する機能となります。まずはサンプルです
<input size="4">これは「横に4文字分の大きさ」になります。
<input size="10">これは「横に10文字分の大きさ」になります。
実際にこうしてみるとその大きさがわかります。
selectタグで使う場合
selectタグで使う場合、横ではなく縦方向の大きさ指定になります。こっちの場合は「追加で表示する行数を指定」する使い方になります。
<select size="3">
<option value="1">No.1</option>
<option value="2">No.2</option>
<option value="3">No.3</option>
<option value="4">No.4</option>
<option value="5">No.5</option>
</option>こんなリストがあったとします。この場合はsizeが3なので、元々の一行に加えて三行分が追加で表示されます。
選択リストをスクロールすることでNo.5もしっかりと出てきます。
他の属性との違い
このsizeはシンプルに入力エリアの見た目を変更するものです。なので「受付可能にする文字数を設定」とか「複数選択を可能にする」とかは別の属性で扱う事になります。
受け付ける文字数の最小値と最大値はmaxlength属性・minlength属性を使います。複数選択を可能にする場合は、multiple属性を使います。
まとめ
sizeは入力エリアの見た目を変更する属性になります。使えるのはinputタグとselectタグの2つです。文字数の設定など、機能的な部分は他の属性で行う必要があるので注意しましょう。
- HTMLの基礎
- HTMLってどんな言語？書き方やHTMLファイルの作成方法などを解説。
- HTMLタグで押さえておきたいポイント3選
- HTMLタグを使う上で必ず押さえておいてほしいポイント3つの解説です。
- HTMLタグと属性一覧
- HTMLタグと属性の一覧です。
- tableタグ生成ページ
- tableタグの基本形を生成できるページです。
- ulタグ・olタグ生成ページ
- ulタグとolタグの基本形を生成できるページです。