今回から、フォームの部品になる要素を紹介します。
フォームの部品の中でも、入力欄やチェックボックス、送信ボタンなど、お馴染みのものはinput要素で作ります。
今回は、input要素の中で重要な役割を持っているtype属性についてまとめたいと思います。
HTML 【フォーム】1 ~ フォームの概要とform要素の属性一覧
HTML 【フォーム】2 ~ form要素の使い方
HTML 【フォーム】3 ~ form要素で使う主な属性の使い方
HTML 【フォーム】4 ~ fieldset要素とlegend要素
HTML 【フォーム】5 ~ input要素(1)フォーム部品一覧( 本ページ )
HTML 【フォーム】5 ~ input要素(2)テキスト入力部品
HTML 【フォーム】5 ~ input要素(3)ラジオボタンとチェックボックス
HTML 【フォーム】5 ~ input要素(4)日時の入力部品
HTML 【フォーム】5 ~ input要素(5)数値の入力部品
HTML 【フォーム】5 ~ input要素(6)レンジ(range)の入力部品
HTML 【フォーム】5 ~ input要素(7)色(color)の入力部品
HTML 【フォーム】5 ~ input要素(8)ファイル送信のための部品
HTML 【フォーム】5 ~ input要素(9)隠し情報(hidden)
HTML 【フォーム】5 ~ input要素(10)ボタン(submit、reset、button)
HTML 【フォーム】5 ~ input要素(11)画像ボタン(image)
HTML 【フォーム】6 ~ button要素で作るボタン
HTML 【フォーム】7 ~ ボタンの作り方比較とJavaScriptでアラート表示
HTML 【フォーム】8 ~ セレクトリスト
HTML 【フォーム】9 ~ 入力候補(datalist)
HTML 【フォーム】10 ~ テキストエリア(textarea)
HTML 【フォーム】11 ~ ラベル(label)
HTML 【フォーム】12 ~ 出力欄(output)
HTML 【フォーム】13 ~ 数量や割合のゲージ(meter)
HTML 【フォーム】14 ~ 進捗状況を示すプログレスバー(progress)
HTML 【フォーム】15 ~ キーを発行して暗号化(keygen)
HTML 【フォーム】16 ~ CSSでフォームを整える
なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。
input要素は、input (インプット) の言葉通り入力のための要素です。
そして、input要素は、type属性で何を指定するかによってフォームの各部品を作っていきます。
input要素のtype属性以外の属性は、type属性で作った部品の機能についての指定をします。
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でさらに増えました)。
部品のカテゴリー | 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” | 画像を送信ボタンにする |
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> |
INTERNOUS,inc. All rights reserved.