ITコラム

Register Registration Enter Apply Membership Concept

ITコラム

2017.02.06

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

今回から、フォームの部品になる要素を紹介します。
フォームの部品の中でも、入力欄やチェックボックス、送信ボタンなど、お馴染みのものは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でフォームを整える

目次

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>

▲目次へ戻る

SHARE

最新記事

IMG_004

卒業生インタビュー

2019.08.20

【卒業生の声:渡邉さん】宮城の大学とプログラマカレッジへ通学を両立!限られた時間を有効活用し、希望するWEB系の会社へ内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 某WEB系会社 プログラマカレッジ卒業生の渡邉さんにお話しをお伺いしました! 目次 新卒採用の切符を捨て、アイデアを形にできる仕事を目指す 質問が […]

続きを見る

DSC_3661

卒業生インタビュー

2019.08.16

【卒業生の声:前田さん】大学中退の未経験エンジニアが4社から内定獲得!初めての就活を成功させた秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社リヴァンプ プログラマカレッジ卒業生のマエダさん(23歳)にお話しをお伺いしました! 目次 勉強に興味が持てなくて大学中退 就職できるか不 […]

続きを見る

DSC_0077

卒業生インタビュー

2019.08.08

【卒業生の声:オチアイさん】高校教師からプログラマーへ転身!最初の2ヶ月は理解に苦しむ日々。楽しめるまでに至った秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 プライムソリューションズ株式会社 プログラマカレッジ卒業生のオチアイさんにお話しをお伺いしました! 目次 大学院卒業後は高校教師に そこから思い切 […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.