
卒業生インタビュー
2021.03.03
【卒業生の声:森さん】文系の僕がプログラミングの道へ進むことは、不安も迷いもあった。今は、あの時思い切って良かったと心から思います
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
ITコラム
2017.02.06
今回から、フォームの部品になる要素を紹介します。
フォームの部品の中でも、入力欄やチェックボックス、送信ボタンなど、お馴染みのものは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要素の属性
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でさらに増えました)。
部品のカテゴリー | 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属性 |
---|
2.input要素のフォーム部品一覧をご覧下さい。 |
name属性 |
---|
受け取る側が、各部品を見分けるための名前なので、重要です。
また、ラジオボタンやチェックボックスでは、複数の選択肢全部に同じ名前を付けてグループ化します。
|
value属性 |
---|
部品がテキストフィールドなら初期値として入力欄に表示されます。
|
size属性、maxlength属性 |
---|
size属性は、テキストフィールドの幅を文字数で指定します。
|
checked属性 |
---|
ボタンが選択された状態にします。
|
accept属性 |
---|
ファイルを受け取るとき、サーバが受信可能なMIMEタイプを指定します。
|
src属性、alt属性、width属性、height属性 |
---|
type=”image”の時に使用する画像のURL、代替テキスト、幅、高さを指定します。
|
readonly属性 |
---|
読み取り専用(リードオンリー)になり、テキストフィールドの入力はできなくなりますが、value値は送信されます。
|
disabled属性 |
---|
使用不可になります。
|
卒業生インタビュー
2021.03.03
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
スキルアップ
2021.03.03
プログラミング学習は「挫折しやすい」というイメージがありますよね。実際に学習を始めてみて、挫折しそうだと感じている方もいらっしゃるでしょう。本記事では、プログラミング学習で挫折する4つの原因を解説。さらに、プログラミング […]
スキルアップ
2021.03.02
未経験からプログラマーを目指しているものの「自分はプログラミングに向いているのかわからない」という不安から、プログラミング学習に踏み切れない人も多いでしょう。そこで本記事では、プログラミングに向いている人や向いていない人 […]
スキルアップ
2021.02.25
プログラミング初心者で、最速で技術を身につけたいと考えている人の悩みを解決します。 後述しますが、「1000時間ルール」という法則がありプログラミング初心者の方はまず1000時間の学習を目標にしましょう。今回は、プログラ […]
スキルアップ
2021.02.22
「プログラミングスクールが多すぎて選び方の基準がわからない」「スクール選びに失敗してお金も時間も無駄にすることだけはしたくない」そんな初心者の方に向けて、この記事では自分に合ったプログラミングスクールの選び方を解説します […]
プログラマハック
2021.02.19
フリーターからプログラマーになろうとしている方の中には「未経験者でも正社員として採用してもらえるか?」「自分は職歴なしのフリーターだけど、本当にプログラマーになれるのだろうか?」と不安を感じている方も多いはず。そこで今回 […]
INTERNOUS,inc. All rights reserved.