HTML 【フォーム】5 ~ input要素(1)フォーム部品一覧

Register Registration Enter Apply Membership Concept

今回から、フォームの部品になる要素を紹介します。
フォームの部品の中でも、入力欄やチェックボックス、送信ボタンなど、お馴染みのものはinput要素で作ります。
今回は、input要素の中で重要な役割を持っているtype属性についてまとめたいと思います。

フォームについては、以下のページもご参照下さい。
HTML 【フォーム】1 ~ フォームの概要とform要素の属性一覧
HTML 【フォーム】2 ~ form要素の使い方
HTML 【フォーム】3 ~ form要素で使う主な属性の使い方
HTML 【フォーム】4 ~ fieldset要素とlegend要素

目次

1.input要素とtype属性
2.input要素のフォーム部品一覧
3.input要素の属性

1.input要素とtype属性

input要素は、input (インプット) の言葉通り入力のための要素です。
そして、input要素は、type属性で何を指定するかによってフォームの各部品を作っていきます。
input要素のtype属性以外の属性は、type属性で作った部品の機能についての指定をします。

使用する要素 input要素

input要素は空(から)要素で、終了タグ(</input>)はありません。

inputの属性 type
name value size
maxlength checked accept
src alt width
height readonly disabled
required placeholder autocomplete
pattern autofocus form
list multiple min
max step formaction
formmethod formnovalidate formtarget
foamenctype

input要素は、type属性の値次第で全く違う部品になります。
そして、type以外の属性もたくさんあります(HTML5でさらに増えました)。

▲目次へ戻る

2.input要素のフォーム部品一覧

部品のカテゴリー type属性の値 部品の役割
テキスト入力 type=”text”(デフォルト) 1行のテキストフィールド
type=”search” 検索キーワードの入力フィールド
type=”tel” 電話番号
type=”url” URL
type=”email” メール
type=”password” パスワード
日付や時刻の入力 type=”datetime” 日時(タイムゾーン有)
type=”datetime-local” 日時(タイムゾーン無)
type=”date”
type=”month”
type=”week”
type=”time” 時刻(タイムゾーン無)
数値の入力 type=”number” 数値
type=”range” スライダーで数値(割合)の選択
色の入力 type=”color” 色の選択
選択ボタン type=”checkbox” 複数選択のボタン
type=”radio” 1つだけ選択のボタン
ファイル送信 type=”file” 送信ファイルの選択
非表示データ type=”hidden” 非表示データの送信
送信ボタンなど type=”submit” 送信ボタン
type=”reset” リセットボタン
type=”button” 汎用のプッシュボタン
type=”image” 画像を送信ボタンにする

▲目次へ戻る

3.input要素の属性

input要素には、type属性以外の属性もたくさんあります。
そして、その大半がHTML5から加わった属性です。

type属性

type = ”部品の種類”

2.input要素のフォーム部品一覧をご覧下さい。

name属性

name = ”部品の名前(任意のテキスト)”

受け取る側が、各部品を見分けるための名前なので、重要です。
「部品の名前 = データ内容」として送信されます。

<input type=”tel” name=”telNo”>

また、ラジオボタンやチェックボックスでは、複数の選択肢全部に同じ名前を付けてグループ化します。

<input type=”radio” name=”repeat” value=”はじめて”>はじめて
<input type=”radio” name=”repeat” value=”2回目”>2回目
<input type=”radio” name=”repeat” value=”3回目以上”>3回目以上

value属性

value = ”初期値” または value = ”ボタンのラベル(選択名)”

部品がテキストフィールドなら初期値として入力欄に表示されます。
テキストが書き換えられると、それがvalue値になり、name属性とセットで送信されます。
また、ラジオボタンやチェックボックスでは、選択された値の名称となり、name属性とセットで送信されます。
送信やリセットボタンなどの場合はボタン上に表示されます。

<input type=”text” name=”code1″ value=”サンプル1″>

<input type=”submit” value=”送信”>
<input type=”reset” name=”reset” value=”リセット”>

size属性、maxlength属性

size = ”テキストフィールドの幅(文字数)”
maxlength = ”最大文字数”

size属性は、テキストフィールドの幅を文字数で指定します。
maxlengthは、最大文字数を指定すると、それ以上は入力できなくなります。
type属性の値が、テキスト入力用のtext、search、tel、url、email、passwordの場合のみ使用します。

<span>お名前 :</span>
<input type=”text” name=”name” size=”20″ maxlength=”30″>

checked属性

checked(値は省略可能)

ボタンが選択された状態にします。
type属性の値が、radioとcheckboxの場合のみ使用します。

<input type=”radio” name=”repeat” value=”はじめて” checked> はじめて
<input type=”radio” name=”repeat” value=”2回目”> 2回目
<input type=”radio” name=”repeat” value=”3回目以上”> 3回目以上

accept属性

accept = ”MIMEタイプ”

ファイルを受け取るとき、サーバが受信可能なMIMEタイプを指定します。
「,(カンマ)」を使って、複数指定ができます。
type属性の値がfileの場合のみ使用します。

<input type=”file” name=”img” accept=”image/png”, image/gif, image/jpeg>

src属性、alt属性、width属性、height属性

src = ”画像のURL”
alt = ”代替テキスト”
width = ”幅”
height = ”高さ”

type=”image”の時に使用する画像のURL、代替テキスト、幅、高さを指定します。
type属性の値がimageの場合のみ使用します。

<input type=”image” src=”btn.gif” alt=”送信” width=”60″ height=”30″>

readonly属性

readonly または readonly = ”” または readonly = ”readonly” 

読み取り専用(リードオンリー)になり、テキストフィールドの入力はできなくなりますが、value値は送信されます。
type属性の値が、checkbox、radio、range、color、file、submit、reset、button、image、hiddenの場合は使用できません。

<select name=”browser” readonly>
<option value=”IE”>IE</option>
<option value=”Firefox”>Firefox</option>
<option value=”Chrome”>Chrome</option>
</select>

disabled属性

disabled または disabled = ”” または disabled = ”disabled”

使用不可になります。
入力も選択もできない状態で、value値も送信されません。

<input type=”submit” value=”送信” disabled>

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です