入力系タグ(input/select/option/textarea/buttonタグ)と入力系属性の使い方
HTMLの入力系タグ｜input・select・option・textarea・buttonタグ
HTMLの入力系タグは、入力ができる要素を定義できます。
formタグに内包して値を別の画面に渡したり、JavaScriptと一緒に使ったりします。
入力系タグには様々なタグや属性が用意されています。
【 入力系タグの種類 】
formタグとは、入力系要素の入力内容をまとめるタグです。
内包した入力系要素の入力内容を送信(submit)するための設定を定義できます。
実際に操作してみてください！
※スタイルがデフォルトと異なる点はご了承ください。
【 formタグの属性 】
パスとはファイルやディレクトリ（フォルダー）がある場所のことです。
【パスの基本に関する記事】
パス・ディレクトリとは？開発で必須なパスの基本知識と読み方を解説！ | こじはなNote
inputタグ｜type属性の値によって様々な種類の入力ができる
inputタグとは、汎用的な入力用のタグです。
type属性に指定する値によって様々な種類の入力要素となります。
【 使える基本の入力系属性 】
- type属性：入力要素の種類を指定できる。
- name属性：この入力要素の名前はこれ！と指定できる。
- value属性：入力系要素の初期値や選択肢ごとの値を定義するときに使う。
- required属性：必須入力を設定できる。
- disabled属性：無効化(入力できない状態)にできる。
- autofocus属性：ページを開いた時、自動的にフォーカスさせる。
- readonly属性：値を表示専用にする属性で、入力できない。
- form属性：formタグのid属性値を指定し、紐付けを明確化させる。
これら以外で使える入力系の属性はtype属性の値によって異なります。
type="text"｜文字を入力するテキストボックス。
type属性に"text"を設定すると、文字を入力できるテキストボックスとなります。
実際に操作してみてください！
【 使える入力系の属性 】
- inputタグ基本の属性：name, value, required, disabled, autofocus, readonly, form属性
- placeholder属性：入力時のヒントとなる文を設定できる。
- autocomplete属性：入力補完の有効/無効を設定できる。
- maxlength/minlength属性：入力できる最大/最小の文字数を設定できる。
- pattern属性：入力値に対して許容する文字を設定できる。値は正規表現という書き方で指定。
inputタグ基本の属性については以下の通りです。
【 基本の属性 】
- name属性：この入力要素の名前はこれ！と決める。
- value属性：入力系要素の初期値や選択肢ごとの値を定義するときに使う。
- required属性：必須入力を条件に設定できる。
- disabled属性：無効化(入力できない状態)にできる。
- autofocus属性：ページを開いた時、自動的にフォーカスさせる。
- readonly属性：値を表示専用にする属性で、入力できない。
- form属性：formタグのid属性値を指定し、紐付けを明確化させる。
type="radio"｜複数の選択肢の中から1つ選択できるラジオボタン
type属性に"radio"を設定すると、ラジオボタンとなります。
複数の選択肢の中から1つ選択させるときに使います。
実際に操作してみてください！
【 使える入力系の属性 】
- inputタグ基本の属性：name, value, required, disabled, autofocus, readonly属性
- checked属性：最初、選択済みにできる。
inputタグ基本の属性については以下の通りです。
【 基本の属性 】
- name属性：この入力要素の名前はこれ！と決める。
- value属性：入力系要素の初期値や選択肢ごとの値を定義するときに使う。
- required属性：必須入力を条件に設定できる。
- disabled属性：無効化(入力できない状態)にできる。
- autofocus属性：ページを開いた時、自動的にフォーカスさせる。
- readonly属性：値を表示専用にする属性で、入力できない。
- form属性：formタグのid属性値を指定し、紐付けを明確化させる。
labelタグは、入力系要素の項目名を定義するタグです。
inputタグのid属性の値をlabelタグのfor属性に設定することで繋がりを定義できます。
labelタグをクリック/タップしたとき、紐づくラジオボタンやチェックボックスが反応します。
同じグループのラジオボタンは、name属性には同一の値を設定します。
type="checkbox"｜複数選択できるチェックボックス
type属性に"checkbox"を設定すると、チェックボックスとなります。
複数選択可能にさせるときに使います。
実際に操作してみてください！
【 使える入力系属性 】
- inputタグ基本の属性：name, value, required, disabled, autofocus, readonly, form属性
- checked属性：最初、選択済みにできる。
inputタグ基本の属性については以下の通りです。
【 基本の属性 】
- name属性：この入力要素の名前はこれ！と決める。
- value属性：入力系要素の初期値や選択肢ごとの値を定義するときに使う。
- required属性：必須入力を条件に設定できる。
- disabled属性：無効化(入力できない状態)にできる。
- autofocus属性：ページを開いた時、自動的にフォーカスさせる。
- readonly属性：値を表示専用にする属性で、入力できない。
- form属性：formタグのid属性値を指定し、紐付けを明確化させる。
labelタグは、入力系要素の項目名を定義するタグです。
inputタグのid属性の値をlabelタグのfor属性に設定することで繋がりを定義できます。
labelタグをクリック/タップしたとき、紐づくラジオボタンやチェックボックスが反応します。
同じグループのチェックボックスは、name属性には同一の値を設定します。
type="email"｜メールアドレス入力用のテキストボックス
type属性に"email"を設定すると、メールアドレス入力用のテキストボックスとなります。
実際に操作してみてください！
【 使える入力系の属性 】
- inputタグ基本の属性：name, value, required, disabled, autofocus, readonly, form属性
- placeholder属性：入力時のヒントとなる文を設定できる。
- autocomplete属性：入力補完の有効/無効を設定できる。
- maxlength/minlength属性：入力できる最大/最小の文字数を設定できる。
- pattern属性：入力値に対して許容する文字を設定できる。値は正規表現という書き方で指定。
inputタグ基本の属性については以下の通りです。
【 基本の属性 】
- name属性：この入力要素の名前はこれ！と決める。
- value属性：入力系要素の初期値や選択肢ごとの値を定義するときに使う。
- required属性：必須入力を条件に設定できる。
- disabled属性：無効化(入力できない状態)にできる。
- autofocus属性：ページを開いた時、自動的にフォーカスさせる。
- readonly属性：値を表示専用にする属性で、入力できない。
- form属性：formタグのid属性値を指定し、紐付けを明確化させる。
type="tel"｜電話番号入力用のテキストボックス
type属性に"tel"を設定すると、電話番号入力用のテキストボックスとなります。
実際に操作してみてください！
【 使える入力系の属性 】
- inputタグ基本の属性：name, value, required, disabled, autofocus, readonly, form属性
- placeholder属性：入力時のヒントとなる文を設定できる。
- autocomplete属性：入力補完の有効/無効を設定できる。
- maxlength/minlength属性：入力できる最大/最小の文字数を設定できる。
- pattern属性：入力値に対して許容する文字を設定できる。値は正規表現という書き方で指定。
inputタグ基本の属性については以下の通りです。
【 基本の属性 】
- name属性：この入力要素の名前はこれ！と決める。
- value属性：入力系要素の初期値や選択肢ごとの値を定義するときに使う。
- required属性：必須入力を条件に設定できる。
- disabled属性：無効化(入力できない状態)にできる。
- autofocus属性：ページを開いた時、自動的にフォーカスさせる。
- readonly属性：値を表示専用にする属性で、入力できない。
- form属性：formタグのid属性値を指定し、紐付けを明確化させる。
type="password"｜パスワード入力用のテキストボックス
type属性に"password"を設定すると、パスワード入力用のテキストボックスです。
入力値は⚫︎となり表示されません。
実際に操作してみてください！
【 使える入力系の属性 】
- inputタグ基本の属性：name, value, required, disabled, autofocus, readonly, form属性
- placeholder属性：入力時のヒントとなる文を設定できる。
- autocomplete属性：入力補完の有効/無効を設定できる。
- maxlength/minlength属性：入力できる最大/最小の文字数を設定できる。
- pattern属性：入力値に対して許容する文字を設定できる。値は正規表現という書き方で指定。
inputタグ基本の属性については以下の通りです。
【 基本の属性 】
- name属性：この入力要素の名前はこれ！と決める。
- value属性：入力系要素の初期値や選択肢ごとの値を定義するときに使う。
- required属性：必須入力を条件に設定できる。
- disabled属性：無効化(入力できない状態)にできる。
- autofocus属性：ページを開いた時、自動的にフォーカスさせる。
- readonly属性：値を表示専用にする属性で、入力できない。
- form属性：formタグのid属性値を指定し、紐付けを明確化させる。
type="search"｜検索用のテキストボックス
type属性に"search"を設定すると、検索用のテキストボックスとなります。
実際に操作してみてください！
【 使える入力系の属性 】
- inputタグ基本の属性：name, value, required, disabled, autofocus, readonly, form属性
- placeholder属性：入力時のヒントとなる文を設定できる。
- autocomplete属性：入力補完の有効/無効を設定できる。
- maxlength/minlength属性：入力できる最大/最小の文字数を設定できる。
- pattern属性：入力値に対して許容する文字を設定できる。値は正規表現という書き方で指定。
inputタグ基本の属性については以下の通りです。
【 基本の属性 】
- name属性：この入力要素の名前はこれ！と決める。
- value属性：入力系要素の初期値や選択肢ごとの値を定義するときに使う。
- required属性：必須入力を条件に設定できる。
- disabled属性：無効化(入力できない状態)にできる。
- autofocus属性：ページを開いた時、自動的にフォーカスさせる。
- readonly属性：値を表示専用にする属性で、入力できない。
- form属性：formタグのid属性値を指定し、紐付けを明確化させる。
type="color"｜色を選択できるカラーピッカー
type属性に"color"を設定すると、色を選択できるカラーピッカーとなります。
実際に操作してみてください！
【 使える入力系の属性 】
- inputタグ基本の属性：name, value, required, disabled, autofocus, readonly, form属性
inputタグ基本の属性については以下の通りです。
【 基本の属性 】
- name属性：この入力要素の名前はこれ！と決める。
- value属性：入力系要素の初期値や選択肢ごとの値を定義するときに使う。
- required属性：必須入力を条件に設定できる。
- disabled属性：無効化(入力できない状態)にできる。
- autofocus属性：ページを開いた時、自動的にフォーカスさせる。
- readonly属性：値を表示専用にする属性で、入力できない。
- form属性：formタグのid属性値を指定し、紐付けを明確化させる。
type="number"｜数値入力用のテキストボックス
type属性に"number"を設定すると、数値入力用のテキストボックスとなります。
実際に操作してみてください！
【 使える入力系の属性 】
- inputタグ基本の属性：name, value, required, disabled, autofocus, readonly, form属性
- placeholder属性：入力時のヒントとなる文を設定できる。
- autocomplete属性：入力補完の有効/無効を設定できる。
- max/min属性：入力値に対して許容する範囲の最大/最小の値を設定できる。
- step属性：入力値に対する増減幅を設定できる。
inputタグ基本の属性については以下の通りです。
【 基本の属性 】
- name属性：この入力要素の名前はこれ！と決める。
- value属性：入力系要素の初期値や選択肢ごとの値を定義するときに使う。
- required属性：必須入力を条件に設定できる。
- disabled属性：無効化(入力できない状態)にできる。
- autofocus属性：ページを開いた時、自動的にフォーカスさせる。
- readonly属性：値を表示専用にする属性で、入力できない。
- form属性：formタグのid属性値を指定し、紐付けを明確化させる。
type="range"｜数値入力用のスライダー
type属性に"number"を設定すると、数値を指定できるスライダーとなります。
実際に操作してみてください！
【 使える入力系の属性 】
- inputタグ基本の属性：name, value, required, disabled, autofocus, readonly, form属性
- placeholder属性：入力時のヒントとなる文を設定できる。
- autocomplete属性：入力補完の有効/無効を設定できる。
- max/min属性：入力値に対して許容する範囲の最大/最小の値を設定できる。
- step属性：入力値に対する増減幅を設定できる。
min/max属性を指定しない限り、最小値は0、最大値は100となります。
inputタグ基本の属性については以下の通りです。
【 基本の属性 】
- name属性：この入力要素の名前はこれ！と決める。
- value属性：入力系要素の初期値や選択肢ごとの値を定義するときに使う。
- required属性：必須入力を条件に設定できる。
- disabled属性：無効化(入力できない状態)にできる。
- autofocus属性：ページを開いた時、自動的にフォーカスさせる。
- readonly属性：値を表示専用にする属性で、入力できない。
- form属性：formタグのid属性値を指定し、紐付けを明確化させる。
type="submit"｜formタグ内の入力内容を送信(submit)するボタン
type属性に"submit"を設定すると、formタグ内の入力内容を送信(submit)するボタンとなります。
実際に操作してみてください！
※スタイルがデフォルトと異なる点はご了承ください。
【 使える入力系の属性 】
- inputタグ基本の属性：name, value, required, disabled, autofocus, readonly, form属性
inputタグ基本の属性については以下の通りです。
【 基本の属性 】
- name属性：この入力要素の名前はこれ！と決める。
- value属性：入力系要素の初期値や選択肢ごとの値を定義するときに使う。
- required属性：必須入力を条件に設定できる。
- disabled属性：無効化(入力できない状態)にできる。
- autofocus属性：ページを開いた時、自動的にフォーカスさせる。
- readonly属性：値を表示専用にする属性で、入力できない。
- form属性：formタグのid属性値を指定し、紐付けを明確化させる。
type="submit"のvalue属性にはボタンの文字を設定します。
formタグとは、入力系要素の入力内容をまとめるタグです。
内包した入力系要素の入力内容を送信(submit)するための設定を定義できます。
実際に操作してみてください！
※スタイルがデフォルトと異なる点はご了承ください。
【 formタグの属性 】
パスとはファイルやディレクトリ（フォルダー）がある場所のことです。
【パスの基本に関する記事】
パス・ディレクトリとは？開発で必須なパスの基本知識と読み方を解説！ | こじはなNote
type="image"｜画像付きのボタン(type="submit"と同じ機能)
type属性に"image"を設定すると、画像付きのボタンとなります。
type="submit"同様のformタグ内の入力内容を送信(submit)するボタンです。
実際に操作してみてください！
※スタイルがデフォルトと異なる点はご了承ください。
【 使える入力系の属性 】
- inputタグ基本の属性：name, value, required, disabled, autofocus, readonly, form属性
- src属性：表示させる画像のパスやURLを指定。
- alt属性：表示させる画像の代替テキストを設定。
inputタグ基本の属性については以下の通りです。
【 基本の属性 】
- name属性：この入力要素の名前はこれ！と決める。
- value属性：入力系要素の初期値や選択肢ごとの値を定義するときに使う。
- required属性：必須入力を条件に設定できる。
- disabled属性：無効化(入力できない状態)にできる。
- autofocus属性：ページを開いた時、自動的にフォーカスさせる。
- readonly属性：値を表示専用にする属性で、入力できない。
- form属性：formタグのid属性値を指定し、紐付けを明確化させる。
ファイルやディレクトリ（フォルダー）がある場所のことです。
【パスの基本に関する記事】
パス・ディレクトリとは？開発で必須なパスの基本知識と読み方を解説！ | こじはなNote
formタグとは、入力系要素の入力内容をまとめるタグです。
内包した入力系要素の入力内容を送信(submit)するための設定を定義できます。
実際に操作してみてください！
※スタイルがデフォルトと異なる点はご了承ください。
【 formタグの属性 】
パスとはファイルやディレクトリ（フォルダー）がある場所のことです。
【パスの基本に関する記事】
パス・ディレクトリとは？開発で必須なパスの基本知識と読み方を解説！ | こじはなNote
type="button"｜押しても入力内容を送信(submit)しないボタン
type属性に"button"を設定すると、ただのボタンとなります。
押しても入力内容を送信(submit)しないボタンです。
JavaScriptのプログラムやCSSと一緒に使うことが多いです。
実際に操作してみてください！
※スタイルがデフォルトと異なる点はご了承ください。
【 使える入力系の属性 】
- inputタグ基本の属性：name, value, required, disabled, autofocus, readonly, form属性
inputタグ基本の属性については以下の通りです。
【 基本の属性 】
- name属性：この入力要素の名前はこれ！と決める。
- value属性：入力系要素の初期値や選択肢ごとの値を定義するときに使う。
- required属性：必須入力を条件に設定できる。
- disabled属性：無効化(入力できない状態)にできる。
- autofocus属性：ページを開いた時、自動的にフォーカスさせる。
- readonly属性：値を表示専用にする属性で、入力できない。
- form属性：formタグのid属性値を指定し、紐付けを明確化させる。
type="button"のvalue属性にはボタンの文字を設定します。
type="reset"｜formタグ内の入力内容をリセットするボタン
type属性に"reset"を設定すると、formタグ内の入力内容をリセットする(初期値に戻す)ボタンとなります。
押しても入力内容を送信(submit)しないボタンです。
実際に操作してみてください！
※スタイルがデフォルトと異なる点はご了承ください。
【 使える入力系の属性 】
- inputタグ基本の属性：name, value, required, disabled, autofocus, readonly, form属性
inputタグ基本の属性については以下の通りです。
【 基本の属性 】
- name属性：この入力要素の名前はこれ！と決める。
- value属性：入力系要素の初期値や選択肢ごとの値を定義するときに使う。
- required属性：必須入力を条件に設定できる。
- disabled属性：無効化(入力できない状態)にできる。
- autofocus属性：ページを開いた時、自動的にフォーカスさせる。
- readonly属性：値を表示専用にする属性で、入力できない。
- form属性：formタグのid属性値を指定し、紐付けを明確化させる。
type="reset"のボタンを押下したときの挙動は、初期値に戻すことです。
空にするわけではありません。
type="button"のvalue属性にはボタンの文字を設定します。
formタグとは、入力系要素の入力内容をまとめるタグです。
内包した入力系要素の入力内容を送信(submit)するための設定を定義できます。
実際に操作してみてください！
※スタイルがデフォルトと異なる点はご了承ください。
【 formタグの属性 】
パスとはファイルやディレクトリ（フォルダー）がある場所のことです。
【パスの基本に関する記事】
パス・ディレクトリとは？開発で必須なパスの基本知識と読み方を解説！ | こじはなNote
type="date"｜日付（YYYY-MM-DD）入力用のテキストボックス
type属性に"date"を設定すると、日付（YYYY-MM-DD）入力用のテキストボックスとなります。
実際に操作してみてください！
【 使える入力系の属性 】
- inputタグ基本の属性：name, value, required, disabled, autofocus, readonly, form属性
- autocomplete属性：入力補完の有効/無効を設定できる。
- max/min属性：入力値に対して許容する範囲の最大/最小の値を設定できる。
- step属性：入力値に対する増減幅を設定できる。
inputタグ基本の属性については以下の通りです。
【 基本の属性 】
- name属性：この入力要素の名前はこれ！と決める。
- value属性：入力系要素の初期値や選択肢ごとの値を定義するときに使う。
- required属性：必須入力を条件に設定できる。
- disabled属性：無効化(入力できない状態)にできる。
- autofocus属性：ページを開いた時、自動的にフォーカスさせる。
- readonly属性：値を表示専用にする属性で、入力できない。
- form属性：formタグのid属性値を指定し、紐付けを明確化させる。
YYYY-MM-DDは、"YYYY"が西暦年、"MM"が月、"DD"が日付を表します。
例えば2025年2月1日だと2025-02-01となります。
type="month"｜月単位（YYYY-MM）入力用のテキストボックス
type属性に"month"を設定すると、月単位（YYYY-MM）入力用のテキストボックスとなります。
実際に操作してみてください！
【 使える入力系の属性 】
- inputタグ基本の属性：name, value, required, disabled, autofocus, readonly, form属性
- autocomplete属性：入力補完の有効/無効を設定できる。
- max/min属性：入力値に対して許容する範囲の最大/最小の値を設定できる。
- step属性：入力値に対する増減幅を設定できる。
inputタグ基本の属性については以下の通りです。
【 基本の属性 】
- name属性：この入力要素の名前はこれ！と決める。
- value属性：入力系要素の初期値や選択肢ごとの値を定義するときに使う。
- required属性：必須入力を条件に設定できる。
- disabled属性：無効化(入力できない状態)にできる。
- autofocus属性：ページを開いた時、自動的にフォーカスさせる。
- readonly属性：値を表示専用にする属性で、入力できない。
- form属性：formタグのid属性値を指定し、紐付けを明確化させる。
YYYY-MMは、"YYYY"が西暦年、"MM"が月を表します。
例えば2025年2月だと2025-02となります。
type="week"｜週単位（YYYY-Www）入力用のテキストボックス
type属性に"week"を設定すると、週単位（YYYY-Www）入力用のテキストボックスとなります。
実際に操作してみてください！
【 使える入力系の属性 】
- inputタグ基本の属性：name, value, required, disabled, autofocus, readonly, form属性
- autocomplete属性：入力補完の有効/無効を設定できる。
- max/min属性：入力値に対して許容する範囲の最大/最小の値を設定できる。
- step属性：入力値に対する増減幅を設定できる。
inputタグ基本の属性については以下の通りです。
【 基本の属性 】
- name属性：この入力要素の名前はこれ！と決める。
- value属性：入力系要素の初期値や選択肢ごとの値を定義するときに使う。
- required属性：必須入力を条件に設定できる。
- disabled属性：無効化(入力できない状態)にできる。
- autofocus属性：ページを開いた時、自動的にフォーカスさせる。
- readonly属性：値を表示専用にする属性で、入力できない。
- form属性：formタグのid属性値を指定し、紐付けを明確化させる。
YYYY-Wwwは、"YYYY"が西暦年、"Www"が週を表します。
例えば2025年第6週だと2025-W06となります。
type="time"｜時間（HH:mm）入力用のテキストボックス
type属性に"time"を設定すると、時間（HH:mm）入力用のテキストボックスとなります。
実際に操作してみてください！
【 使える入力系の属性 】
- inputタグ基本の属性：name, value, required, disabled, autofocus, readonly, form属性
- autocomplete属性：入力補完の有効/無効を設定できる。
- max/min属性：入力値に対して許容する範囲の最大/最小の値を設定できる。
- step属性：入力値に対する増減幅を設定できる。
inputタグ基本の属性については以下の通りです。
【 基本の属性 】
- name属性：この入力要素の名前はこれ！と決める。
- value属性：入力系要素の初期値や選択肢ごとの値を定義するときに使う。
- required属性：必須入力を条件に設定できる。
- disabled属性：無効化(入力できない状態)にできる。
- autofocus属性：ページを開いた時、自動的にフォーカスさせる。
- readonly属性：値を表示専用にする属性で、入力できない。
- form属性：formタグのid属性値を指定し、紐付けを明確化させる。
HH:mmは、"HH"が時刻、"mm"が分を表します。
例えば12時5分だと12:05となります。
type="datetime-local"｜日付と時間（YYYY-MM-DDTHH:mm）入力用のテキストボックス
type属性に"datetime-local"を設定すると、日付と時間（YYYY-MM-DDTHH:mm）入力用のテキストボックスとなります。
実際に操作してみてください！
【 使える入力系の属性 】
- inputタグ基本の属性：name, value, required, disabled, autofocus, readonly, form属性
- autocomplete属性：入力補完の有効/無効を設定できる。
- max/min属性：入力値に対して許容する範囲の最大/最小の値を設定できる。
- step属性：入力値に対する増減幅を設定できる。
inputタグ基本の属性については以下の通りです。
【 基本の属性 】
- name属性：この入力要素の名前はこれ！と決める。
- value属性：入力系要素の初期値や選択肢ごとの値を定義するときに使う。
- required属性：必須入力を条件に設定できる。
- disabled属性：無効化(入力できない状態)にできる。
- autofocus属性：ページを開いた時、自動的にフォーカスさせる。
- readonly属性：値を表示専用にする属性で、入力できない。
- form属性：formタグのid属性値を指定し、紐付けを明確化させる。
YYYY-MM-DDTHH:mmは、"YYYY"が西暦年、"MM"が月、"DD"が日付、"HH"が時刻、"mm"が分を表します。
例えば2025年2月1日12時5分だと2025-02-01T12:05となります。
type="hidden"｜値の受け渡し用の表示されないinput要素
type属性に"hidden"を設定すると、実際には表示されないinput要素となります。
値の受け渡し用に使います。
ブラウザで実行するとこんな感じです。
【 使える入力系の属性 】
- inputタグ基本の属性：name, value, disabled, form属性
inputタグ基本の属性については以下の通りです。
【 基本の属性 】
- name属性：この入力要素の名前はこれ！と決める。
- value属性：入力系要素の初期値や選択肢ごとの値を定義するときに使う。
- required属性：必須入力を条件に設定できる。
- disabled属性：無効化(入力できない状態)にできる。
- autofocus属性：ページを開いた時、自動的にフォーカスさせる。
- readonly属性：値を表示専用にする属性で、入力できない。
- form属性：formタグのid属性値を指定し、紐付けを明確化させる。
type="file"｜ファイルアップロード用の入力要素
type属性に"file"を設定すると、PDFやPNG、JPGなどファイルアップロード用の入力要素となります。
実際に操作してみてください！
【 使える入力系の属性 】
- inputタグ基本の属性：name, required, disabled, autofocus, form属性
- accept属性：PDFやPNGなどファイルの種類を指定できる。
- multiple属性：複数ファイルをアップロード可能にする。
- capture属性：モバイル系で操作した場合、カメラ撮影を可能にする。
inputタグ基本の属性については以下の通りです。
【 基本の属性 】
- name属性：この入力要素の名前はこれ！と決める。
- value属性：入力系要素の初期値や選択肢ごとの値を定義するときに使う。
- required属性：必須入力を条件に設定できる。
- disabled属性：無効化(入力できない状態)にできる。
- autofocus属性：ページを開いた時、自動的にフォーカスさせる。
- readonly属性：値を表示専用にする属性で、入力できない。
- form属性：formタグのid属性値を指定し、紐付けを明確化させる。
capture属性は、モバイル系で操作した場合、カメラ撮影を可能にします。
値の指定は以下の3パターンあります。
selectタグ・optionタグ｜selectタグでプルダウンメニューを定義し、選択肢はoptionタグで定義
selectタグとはプルダウンメニューを定義できるタグです。
選択肢はoptionタグで定義でき、selectタグに複数のoptionタグを内包して使います。
実際に操作してみてください！
【 selectタグ｜使える入力系の属性 】
- name属性：この入力要素の名前はこれ！と決める。
- required属性：必須入力を条件に設定できる。
- disabled属性：無効化(入力できない状態)にできる。
- autofocus属性：ページを開いた時、自動的にフォーカスさせる。
- form属性：formタグのid属性値を指定し、紐付けを明確化させる。
【 optionタグ｜使える入力系の属性 】
- value属性：入力系要素の初期値や選択肢ごとの値を定義するときに使う。
- disabled属性：無効化(入力できない状態)にできる。
- selected属性：最初、選択済みにできる。
textareaタグ｜複数行の文字を入力できるテキストボックス
textareaタグは複数行の文字を入力できるテキストボックスです。
実際に操作してみてください！
【 使える入力系の属性 】
- 入力系タグ基本の属性：name, required, disabled, autofocus, readonly, form属性
- placeholder属性：入力時のヒントとなる文を設定できる。
- autocomplete属性：入力補完の有効/無効を設定できる。
- maxlength/minlength属性：入力できる最大/最小の文字数を設定できる。
- rows/cols属性：最初に表示される高さ(行数)/幅(1行の文字数)を設定できる。
- wrap属性：文字の改行について設定できる。
入力系タグ基本の属性については以下の通りです。
【 基本の属性 】
- name属性：この入力要素の名前はこれ！と決める。
- value属性：入力系要素の初期値や選択肢ごとの値を定義するときに使う。
- required属性：必須入力を条件に設定できる。
- disabled属性：無効化(入力できない状態)にできる。
- autofocus属性：ページを開いた時、自動的にフォーカスさせる。
- readonly属性：値を表示専用にする属性で、入力できない。
- form属性：formタグのid属性値を指定し、紐付けを明確化させる。
wrap属性は、文字の改行について設定できます。
値の指定は以下の3パターンあります。
buttonタグ｜type属性の値によって違う種類のボタンになる。
buttonタグはボタン用のタグです。
type属性に指定する値によって様々な種類のボタンとなります。
実際に操作してみてください！
※スタイルがデフォルトと異なる点はご了承ください。
【 type属性の値 】
【 使える入力系の属性 】
- name属性：この入力要素の名前はこれ！と決める。
- value属性：入力系要素の初期値や選択肢ごとの値を定義するときに使う。
- required属性：必須入力を条件に設定できる。
- disabled属性：無効化(入力できない状態)にできる。
- autofocus属性：ページを開いた時、自動的にフォーカスさせる。
- form属性：formタグのid属性値を指定し、紐付けを明確化させる。
buttonタグを使った方が柔軟にスタイルをカスタマイズできます。
inputタグでも同様の機能のボタンを定義できますが、
表示文字はvalue属性に指定する必要があります。
他の画像やhtmlタグを一緒に挿入できません。
formタグとは、入力系要素の入力内容をまとめるタグです。
内包した入力系要素の入力内容を送信(submit)するための設定を定義できます。
実際に操作してみてください！
※スタイルがデフォルトと異なる点はご了承ください。
【 formタグの属性 】
パスとはファイルやディレクトリ（フォルダー）がある場所のことです。
【パスの基本に関する記事】
パス・ディレクトリとは？開発で必須なパスの基本知識と読み方を解説！ | こじはなNote
入力系の属性
入力系タグ(input・select・option・textarea・buttonタグ)で使える入力系の属性をご紹介します。
name属性｜入力系要素の名前（キー名）
name属性は、入力値を受け渡しするためのキー名を設定します。
この入力系要素の名前はこれ！と指定できます。
【 使えるタグ 】
- inputタグ：type属性に指定する値によって、様々な種類の入力要素となる。
- selectタグ：プルダウンメニューを定義できるタグ。
- textareaタグ：複数行の文字を入力できるテキストボックス。
- buttonタグ：ボタンを定義するタグ。
value属性｜入力系要素の値
value属性には入力系要素の値を指定できます。
入力系要素の初期値や選択肢ごとの値を定義するときに使います。
【 使えるタグ 】
- inputタグ：type属性に指定する値によって、様々な種類の入力要素となる。
- optionタグ：プルダウンメニューを定義できるタグ。
- buttonタグ：ボタンを定義するタグ。
required属性｜必須入力の指定
required属性は、必須入力を設定できる属性です。
実際に操作してみてください！
※スタイルがデフォルトと異なる点はご了承ください。
【 使えるタグ 】
- inputタグ：type属性に指定する値によって、様々な種類の入力要素となる。
- selectタグ：プルダウンメニューを定義できるタグ。
- textareaタグ：複数行の文字を入力できるテキストボックス。
属性="値"の形式ではなく、"required"単体で指定します。
formタグとは、入力系要素の入力内容をまとめるタグです。
内包した入力系要素の入力内容を送信(submit)するための設定を定義できます。
実際に操作してみてください！
※スタイルがデフォルトと異なる点はご了承ください。
【 formタグの属性 】
パスとはファイルやディレクトリ（フォルダー）がある場所のことです。
【パスの基本に関する記事】
パス・ディレクトリとは？開発で必須なパスの基本知識と読み方を解説！ | こじはなNote
disabled属性｜無効化(入力できない状態)の指定
disabled属性は、入力系の要素を無効化(入力できない状態)にできる属性です。
PHP/Javaなどサーバーサイド言語やJavaScript/CSSで制御するときによく使われます。
実際に操作してみてください！
【 使えるタグ 】
- inputタグ：type属性に指定する値によって、様々な種類の入力要素となる。
- select・optionタグ：プルダウンメニューを定義できるタグ。
- textareaタグ：複数行の文字を入力できるテキストボックス。
- buttonタグ：ボタンを定義するタグ。
属性="値"の形式ではなく、"disabled"単体で指定します。
autofocus属性｜最初にフォーカスさせる
autofocus属性は、ページを開いたとき自動的にフォーカスさせる属性です。
ブラウザで実行するとこんな感じです。
※スタイルがデフォルトと異なる点はご了承ください。
【 使えるタグ 】
- inputタグ：type属性に指定する値によって、様々な種類の入力要素となる。
- select・optionタグ：プルダウンメニューを定義できるタグ。
- textareaタグ：複数行の文字を入力できるテキストボックス。
- buttonタグ：ボタンを定義するタグ。
属性="値"の形式ではなく、"autofocus"単体で指定します。
readonly属性｜値を表示専用にする
readonly属性は、値を表示専用にする属性で、入力できません。
実際に操作してみてください！
【 使えるタグ 】
- inputタグ：type属性に指定する値によって、様々な種類の入力要素となる。
- textareaタグ：複数行の文字を入力できるテキストボックス。
属性="値"の形式ではなく、"readonly"単体で指定します。
placeholder属性｜入力時のヒントとなる文を設定
placeholder属性は、入力時のヒントとなる文を設定できます。
実際に操作してみてください！
【 使えるinputタグのtype属性値 】
- type="text"：文字を入力できるテキストボックス。
- type="password"：パスワード入力用のテキストボックス。
- type="email"：メールアドレス入力用のテキストボックス。
- type="tel"：電話番号入力用のテキストボックス。
- type="search"：検索用のテキストボックス。
- type="number"：数値入力用のテキストボックス。
【 使えるタグ(inputタグ以外) 】
- textareaタグ：複数行の文字を入力できるテキストボックス。
autocomplete属性｜入力補完の有効/無効を指定
autocomplete属性は、入力補完の有効/無効を設定できる属性です。
実際に操作してみてください！
【 使えるinputタグのtype属性値 】
- type="text"：文字を入力できるテキストボックス。
- type="password"：パスワード入力用のテキストボックス。
- type="email"：メールアドレス入力用のテキストボックス。
- type="tel"：電話番号入力用のテキストボックス。
- type="search"：検索用のテキストボックス。
- type="number"：数値入力用のテキストボックス。
- type="date"：日付（YYYY-MM-DD）入力用のテキストボックス。
- type="month"：月単位（YYYY-MM）入力用のテキストボックス。
- type="week"：週単位（YYYY-Www）入力用のテキストボックス。
- type="time"：時間（HH:mm）入力用のテキストボックス。
- type="datetime-local"：日付と時間（YYYY-MM-DD HH:mm）入力用のテキストボックス。
【 使えるタグ(inputタグ以外) 】
- textareaタグ：複数行の文字を入力できるテキストボックス。
- formタグ：入力系要素の入力内容をまとめるタグ。
formタグとは、入力系要素の入力内容をまとめるタグです。
内包した入力系要素の入力内容を送信(submit)するための設定を定義できます。
実際に操作してみてください！
※スタイルがデフォルトと異なる点はご了承ください。
【 formタグの属性 】
パスとはファイルやディレクトリ（フォルダー）がある場所のことです。
【パスの基本に関する記事】
パス・ディレクトリとは？開発で必須なパスの基本知識と読み方を解説！ | こじはなNote
maxlength/minlength属性｜最大/最小の文字数を指定
maxlength/minlength属性は、入力できる最大/最小の文字数を設定できる属性です。
実際に操作してみてください！
※スタイルがデフォルトと異なる点はご了承ください。
【 使えるinputタグのtype属性値 】
- type="text"：文字を入力できるテキストボックス。
- type="password"：パスワード入力用のテキストボックス。
- type="email"：メールアドレス入力用のテキストボックス。
- type="tel"：電話番号入力用のテキストボックス。
- type="search"：検索用のテキストボックス。
【 使えるタグ(inputタグ以外) 】
- textareaタグ：複数行の文字を入力できるテキストボックス。
formタグとは、入力系要素の入力内容をまとめるタグです。
内包した入力系要素の入力内容を送信(submit)するための設定を定義できます。
実際に操作してみてください！
※スタイルがデフォルトと異なる点はご了承ください。
【 formタグの属性 】
パスとはファイルやディレクトリ（フォルダー）がある場所のことです。
【パスの基本に関する記事】
パス・ディレクトリとは？開発で必須なパスの基本知識と読み方を解説！ | こじはなNote
max/min属性｜入力値の範囲の最大/最小値
max/min属性は、入力値に対して許容する範囲の最大/最小の値を設定できる。
実際に操作してみてください！
※スタイルがデフォルトと異なる点はご了承ください。
【 使えるinputタグのtype属性値 】
- type="number"：数値入力用のテキストボックス。
- type="range"：数値を指定できるスライダー。
- type="date"：日付（YYYY-MM-DD）入力用のテキストボックス。
- type="month"：月単位（YYYY-MM）入力用のテキストボックス。
- type="week"：週単位（YYYY-Www）入力用のテキストボックス。
- type="time"：時間（HH:mm）入力用のテキストボックス。
- type="datetime-local"：日付と時間（YYYY-MM-DD HH:mm）入力用のテキストボックス。
formタグとは、入力系要素の入力内容をまとめるタグです。
内包した入力系要素の入力内容を送信(submit)するための設定を定義できます。
実際に操作してみてください！
※スタイルがデフォルトと異なる点はご了承ください。
【 formタグの属性 】
パスとはファイルやディレクトリ（フォルダー）がある場所のことです。
【パスの基本に関する記事】
パス・ディレクトリとは？開発で必須なパスの基本知識と読み方を解説！ | こじはなNote
step属性｜入力値の増減幅
step属性とは、入力値に対する増減幅を設定できます。
実際に操作してみてください！
【 使えるinputタグのtype属性値 】
- type="number"：数値入力用のテキストボックス。
- type="range"：数値を指定できるスライダー。
- type="date"：日付（YYYY-MM-DD）入力用のテキストボックス。
- type="month"：月単位（YYYY-MM）入力用のテキストボックス。
- type="week"：週単位（YYYY-Www）入力用のテキストボックス。
- type="time"：時間（HH:mm）入力用のテキストボックス。
- type="datetime-local"：日付と時間（YYYY-MM-DD HH:mm）入力用のテキストボックス。
pattern属性｜許容する文字を正規表現で設定
pattern属性は、入力値に対して許容する文字を設定できます。
値は正規表現という書き方で指定します。
実際に操作してみてください！
※スタイルがデフォルトと異なる点はご了承ください。
【 使えるinputタグのtype属性値 】
- type="text"：文字を入力できるテキストボックス。
- type="password"：パスワード入力用のテキストボックス。
- type="email"：メールアドレス入力用のテキストボックス。
- type="tel"：電話番号入力用のテキストボックス。
- type="search"：検索用のテキストボックス。
formタグとは、入力系要素の入力内容をまとめるタグです。
内包した入力系要素の入力内容を送信(submit)するための設定を定義できます。
実際に操作してみてください！
※スタイルがデフォルトと異なる点はご了承ください。
【 formタグの属性 】
パスとはファイルやディレクトリ（フォルダー）がある場所のことです。
【パスの基本に関する記事】
パス・ディレクトリとは？開発で必須なパスの基本知識と読み方を解説！ | こじはなNote
特にtype属性・name属性・value属性はいっぱい使うよ！