ITコラム

Register Registration Enter Apply Membership Concept

プログラミングノウハウ

2017.02.06

#HTML入門

HTML【フォーム】5～input要素（1）フォーム部品一覧

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

フォームについては、こちらのページもご参照下さい。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

１．input要素とtype属性
２．input要素のフォーム部品一覧
３．input要素の属性

１．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でさらに増えました）。

▲目次へ戻る

２．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”	画像を送信ボタンにする

▲目次へ戻る

３．input要素の属性

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

type属性
type　=　”部品の種類” ２．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回目以上`

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="リセット">`

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">`

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回目以上`

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>`

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">`

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>`

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>`

disabled属性

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

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

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

▲目次へ戻る

column

ITコラム

HTML【フォーム】5～input要素（1）フォーム部品一覧

１．input要素とtype属性

２．input要素のフォーム部品一覧

３．input要素の属性

最新記事

プログラミングが上達する学習のコツ10選！スクール講師が解説

プログラミング言語とは？種類や特徴を選び方とともに解説【初心者向け】

プログラミング独学でメンターをつけるメリットと良いメンターの探し方

プログラミングは趣味として楽しめる！始め方を初心者向けに解説

【体験談あり】働きながら通えるおすすめのプログラミングスクールは？メリットや選び方も解説

プログラミングを始めるのに必要なものは？環境・スキル・知識を紹介

column

ITコラム

HTML【フォーム】5～input要素（1）フォーム部品一覧

１．input要素とtype属性

２．input要素のフォーム部品一覧

３．input要素の属性

SHARE

最新記事

プログラミングが上達する学習のコツ10選！スクール講師が解説

プログラミング言語とは？種類や特徴を選び方とともに解説【初心者向け】

プログラミング独学でメンターをつけるメリットと良いメンターの探し方

プログラミングは趣味として楽しめる！始め方を初心者向けに解説

【体験談あり】働きながら通えるおすすめのプログラミングスクールは？メリットや選び方も解説

プログラミングを始めるのに必要なものは？環境・スキル・知識を紹介