HTML辞典 form要素、input要素の解説

HTML辞典 HTML辞典
この記事は約51分で読めます。

フォームを作るformタグ、<input>タグの基本的使用方法を掲載

HTML5

スポンサーリンク

対応ブラウザ

ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:chrome
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:firefox
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:safari
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms edge
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms ie
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:opera

カテゴリー・コンテンツモデル

要素 カテゴリー コンテンツモデル
from要素 ・フローコンテンツ
・パルパブルコンテンツ
フローコンテンツ
input要素

type属性値がhiddenでない場合

  • インタラクティブコンテンツ
  • パルパブルコンテンツ
  • リスト、ラベル付け、サブミット、リセット可能なフォーム関連要素

type属性値がhiddenの場合

  • リスト、サブミット、リセット可能なフォーム関連要素

グローバル属性(共通)

グローバル属性は、すべての要素に指定できる共通の属性のことです。

accesskey(アクセスキー)

要素にアクセスキーを割り当てます。いわゆるショートカットキーになります。

autocapitallze

入力/編集されたとき、入力文字列の先頭大文字化が自動的に行われるかどうかなどを指定します

内容
offまたはnone自動的な大文字化は指定しない
onまたはsentences最初の文字を大文字化する
words各語の最初の文字を大文字化する
charactersすべての文字を大文字化する

class(クラス)

要素に分類上の名前を指定します。CSSのセレクタで、特定の要素を選択できるようになります。

contenteditable(コンテント・エディタブル)

要素の内容が閲覧者による編集可能かどうか指定します。

内容
trueまたは、空閲覧者による編集可能。
false閲覧者による編集不可。

data-

カスタムデータ属性、JavaScriptで使用するための独自の属性を指定します。「data-*****=””」のような形式で開発者が自由に指定できます。JavaScriptを利用してデータ処理したり、独自のデータを入力したりするために使用します。

dir(ディレクショナリティ)

要素の内容の書字方向(文字を書き進める方向)を指定します。

内容
ltrテキストを左から右へ書き進める。「Left to Righ」の略
rtl要素は編集不可。「Right to Left」の略
autoユーザーエージェントによって自動的に書字方向を決める

draggable

Drag and Drop APIを使用して要素をドラッグすることができるか指定します。

内容
テキストを左から右へ書き進める。「Left to Righ」の略
autoユーザーエージェントによって自動的に書字方向を決める

hidden(ヒドゥン)

要素がその時点でのページの内容に関連がないことを表し、指定された要素は表示されません。用途としては、ページ内に表示したくないデータの値などをセットしておき、POSTなどで値を送信する場合などに使用したりします。(商品IDやユーザーID)

id(アイディー)

要素にユニークな識別IDを指定します。文章内で一意である必要があり、同じ値を複数のidに設定することはできません。CSSのセレクタで、特定の要素を選択できるようになります。また、リンクのフラグメント識別子としても利用できます。

空白文字は使用できません。

lang(ランゲージ)

要素の内容の言語を指定します。html要素や文書全体に対して指定することができます。また、一部の要素に対しても指定することができます。

例:lang=”ja”

spellcheck(スペルチェック)

要素の内容に対するスペルチェックの可否を指定します。

trueスペルチェックをします。
falseスペルチェックをしません。

style(スタイル)

要素に直接スタイルシートを指定します。

※style属性でスタイルを指定する方法はあまり推奨されていません。

tabindex(タブインデックス)

「TABキー」による移動順序を指定します。正の数値で指定すると、その順序にフォーカスが移動します。負の数値を指定すると選択することができますが、TABキーでの移動順序に含まれません。また、0を指定した要素は最後にフォーカスします。

title(タイトル)

要素に補足情報を加えます

translate(トランスレート)

翻訳対象にするかどうかを指定します。

内容
yes翻訳対象とする
no翻訳非対象とする

イベントハンドラ属性は、JavaScriptのコードを閲覧者の操作に合わせて実行する属性です。

onclick

要素をクリックしたときにスクリプトを実行します。

oninput

入力コントロールにデータを入力したときにスクリプトを実行します。

onsubmit

入力コントロールからデータを送信するときにスクリプトを実行します。

form要素

ブロックレベル要素

書式・概要

<form 属性="属性値">~</form>
<form action="URL" method="送信形式" enctype="MIMEタイプ" target="ウィドウ名">~</form>

form要素は、その内容が送信可能な入力フォームであることを示します。入力されたデータの送信先や送信方法、この要素の属性で指定します。内容として用意された送信ボタンが押されると入力された値がサーバーのプログラムに送信されます。

送信形式は、「get」と「post」の2種類があります。「get」を指定すると、入力されたデータは、action属性で指定されているURLの後に「?」記号で連結された状態で送信されます。この形式はサーチエンジンで検索語を入力して送信する際にも利用されます。

postは送信するデータ量が多い場合に使用される形式で、入力された内容をURLに連結することなくフォームの本文としてデータを送信します。

enctype属性で指定するMIMEタイプは、デフォルトでは「application/x-wwwform-urlencoded」になっています。ファイルをなどのバイナリデータを送信する場合は、「multipart/form-data」を指定します。

使用できる属性

accept-charset(アクセプト・キャラクター・セット)

フォームで送信可能な文字コードを指定します。半角スペースで区切って複数の値を指定できます。

action(アクション)

入力されたデータの送信先をURLで指定します。サーバー側でデータを受け取るプログラムを指定するのが一般的です。

<form action="URL">~</form>

autocomplete(オート・コンプリート)

オートコンプリートの可否を以下の2つの値で指定できます。

onオートコンプリートをします。(初期値)
offオートコンプリートをしません。

enctype(エンコード・タイプ)

フォームが送信するデータ形式を指定できます。

application/x-www-form-urlencodedデータはURLエンコードさせて送信されます
(初期値)
multipart/form-dataデータはマルチパートデータとして送信され
ます。ファイルを送信する際に必ず
指定します。
text/plainデータプレーンテキストとして送信されます。
<form action="URL" enctype="application/x-www-form-urlencoded" >~</form>

method(メソッド)

データを送信する方式を以下の値で指定できます。

get送信されるデータは、action属性で指定されたURLにクエリ文字として付加され
た状態で送信されます。(初期値)
post送信されるデータは本文として送信されます。大きなデータを送信するの向いて
います。
通常、サーバー側でプログラムで受け取るデータはこのpostメソッドを
使用します。
<form action="URL" method="post">~</form>

name

フォームに名前を付けます。

novalidate(ノ-・ヴァリデート)

入力データの検証可否を指定します。この属性が指定された場合は、フォーム送信の際のデータ検証を行いません。

target(ターゲット)

データ送信後の応答画面を表示する対象を以下の値で指定します。

_blankリンクは新しいブラウジング
コンテキストに展開されます。
_parentリンクは現在のブラウジングコンテキストの1つの上位のブラウジング
コンテキスト
を対象に展開されます。
_selfリンクは現在のブラウジングコンテキストに展開されます。
_topリンクは現在のブラウジングコンテキストの最上位のブラウジング
コンテキストを対象に展開されます。

input要素

インラインレベル要素

フォームにおける入力欄を表します。type属性の値に入力コントロールの種別を指定することで、様々な入力コントロールが表示できます。

使用できる属性

accept(アクセプト)

サーバーが受け取ることが可能なファイルの種別をしてします。値にはMIMEタイプまたは拡張子を指定できます。複数の値をカンマで区切って指定することもできます。

height(ハイト)

入力コントロールの高さを指定します。値は正の整数のみとなります。

alt(オルタナティブ)

ボタン画像の代替テキストを指定します。

list

入力コントロールにデータが入力されるときに表示する入力候補リストを指定します。入力候補リストは同一文書内に記述したdatalist要素で定義し、list属性の値は対象としたdatalist要素に付与したid属性の値を指定します。

autocomplete(オート・コンプリート)

オートコンプリートの可否を以下の2つの値で指定できます。

onオートコンプリートをします。(初期値)
offオートコンプリートをしません。

max

入力可能な値の最大値を指定できます。

autofocus(オート・フォーカス)

フォーカスをコントロールします。Webページが読み込まれた際、この属性を持つ入力コントロールにフォーカスを移動させます。

maxlength(マックス・レンス)

入力可能な文字列の最大文字数を指定します。この属性を指定すると「〇文字以内」という入力制限を行えます。

checked(チェックト)

指定された項目をあらかじめ選択した状態にします。

min(ミニマム)

入力可能な値の最小値を指定できます。

dirname(ディレクショナリティ・ネーム

送信するデータの書字方向に関するクエリ値のクエリ名を指定します。

multiple(マルチプル)

選択肢の複数選択を可能にします。select要素の選択肢やアップロードするファイルを「Ctrl」キーなどを押しながらクリックすることで、負k数の対象を選択可能です。

disabled(ディスエーブルド)

フォームの入力コントロールを無効にします。

name

データが送信される際のクエリ名を設定します。

form(フォーム)

任意のform要素に付与したid属性値を指定することで、そのフォームとこの属性を持つ入力コントロールを関連付けできます。

pattern(パターン)

入力された内容が正しいか、JavaScriptの正規表現によって検証します。この正規表現は完全一致のみ。以下の条件では無視され検証されません。

  • 関連付けられたform要素にnovalidate属性が付与されている場合。
  • 入力コントロールにdisabled属性または、readonly属性が付与されている。

formaction(フォーム・アクション)

この属性を持つ入力コントロールが関連付けられているform要素のaction属性値を上書きできます。

placeholder(プレースホルダー)

入力コントロールにあらあじめ表示されるダミーテキストを指定します。値に改行コードを含めることはできません。

formenctype(フォーム・エンコードタイプ)

この属性を持つ入力コントロールが関連付けられているform要素のenctype属性値を上書きできます。

readonly(リード・オンリー)

フォームの入力コントロールを閲覧者が編集できないようにします。フォーム送信時に値は送信されます。

formmethod(フォーム・メソッド)

この属性を持つ入力コントロールが関連付けられているform要素のmethod属性値を上書きできます。

required(レクワイアド)

入力コントロールへのデータ入力や選択が必須になります。この属性が指定された入力コントロールに値がない場合、対応するブラウザーではフォームの送信が行われません。

formnovalidate(フォーム・ノー・ヴァリデート)

この属性を持つ入力コントロールが関連付けられているform要素のnovalidate属性値を上書きできます。

size

ブラウザーが入力コントロールを表示する際のサイズ(文字数)を指定します。1以上の正の整数を値として入力でき、指定した文字数分を初期状態で表示できるように入力コントロールのサイズが調整されます。

src(ソース)

入力コントロールに埋め込む画像やスクリプトなどの外部リソースのURLを指定します。

step(ステップ)

入力コントロールに対して入力可能な値の最小単位を指定します。

type

キーワードを指定することで、入力コントロールの種別を指定します。

submit 送信ボタン
image 画像形式の送信ボタン
reset 入力内容のリセットボタン
hidden 閲覧者に表示しないデータ
text 1行テキスト入力欄(初期値)
search 検索キーワードの入力欄
tel 電話番号の入力欄
url URLの入力欄
email メールアドレスの入力欄
password パスワードの入力欄
datetime 日時の入力欄(タイムゾーンはUTC)
month 月の入力欄
week 週の入力欄
date 日付の入力欄
time 時間の入力欄
number 数値の入力欄
range 数値の入力欄
checkbox チェックボックス(複数選択)
radio ラジオボタン(1つだけ選択)
file 送信するファイルの選択
bottum スクリプト起動用のボタン
color RGBカラーの入力欄

value(バリュー)

入力コントロールの初期値を指定します。フォームが送信される際、type属性値がhiddenの場合やreadonly属性が指定されている場合は、この値がそのまま送信されます。

【checkbox、radio】

選択された項目に指定されたvalue属性の値が送信されます。

【指定されていない】

空の値が送信される

【submit、image、reset、button】

value属性の値が表示されるボタン名

width(ウィズ)

入力コントロールの幅を指定します。値は正の整数のみとなります。

inputmode

入力時にキーボードを指定します。

内容
numeric0~9の数字
tel電話番号
emailメールアドレス
urlURL
kana日本語のひらがな入力
katakana日本語のカタカナ入力
verbatimパスワードのような絵数字で文章ではない入力
latin検索ボックス。入力支援ができるラテン文字
latin-namelatinの人名用
latin-proselatinよりも積極的な入力支援が可能な場合
latin-width-latinlatinの全角ラテン文字

capture

type属性がfileの場合、ユーザーの環境からメディアを直接取り込む

tabindex

tabキーを押したときのフォーカスされる入力コントロールの順番

spellcheck

属性値をtrueにすると、スペル・文法チェックを有効にします。

selectionDirection

選択が行われたときの方向を指定します。

内容
forwardLTRロケールのときは左から右へ
RTLロケール時は右から左へ
backwardforwardの逆方向を指定
none選択方向が不明

入力コントロール例

送信ボタン

<input type="submit" value="ラベル" name="名前">

input要素のtype属性に「submit」を指定すると、フォームのデータを送信するためのボタンになります。value属性を指定すると、ボタン上に表示される文字を指定することができます。特に指定しなかった場合には、ブラウザがデフォルトの文字を表示させます。

別の処理を行わせたい場合は、name属性に別々の名前を付けることで判定することができます。

使用できる属性

autofocus、disabled、form、formaction、formenctype、formmethod、formnovalidate、formtarget、name、value

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>fromタグ サンプルページ</title>
    <meta charset="uft-8"><!-- 文字コード指定 -->
  </head>
  <body>
      <form action="https://kcfran.com/inquery" method="post">
          <p>問い合わせ内容</p>
          <input type="text" name="inquery" size="100" placeholder="問い合わせを入力">
          <input type="submit" name="submit" value="送信">
      </form>
  </body>
</html>

chrome実行サンプル

基本的なサンプル input要素-submit属性 chrome実行結果画像

Firefox実行サンプル

基本的なサンプル input要素-submit属性 firefox実行結果画像

edge実行サンプル

基本的なサンプル input要素-submit属性 edge実行結果画像

opera実行サンプル

基本的なサンプル input要素-submit属性 opera実行結果画像

リセットボタン

<input type="reset" value="ラベル">

input要素のtype属性に「reset」を指定すると、フォームの内容をすべて初期値に戻すためのボタンになります。value属性を指定すると、ボタン上に表示される文字を指定することができます。特に指定しなかった場合は、ブラウザがデフォルトの文字を表示させます。

使用できる属性

autofocus、disabled、form、name、value

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>fromタグ サンプルページ</title>
    <meta charset="uft-8"><!-- 文字コード指定 -->
  </head>
  <body>
      <form action="https://kcfran.com/inquery" method="post">
          <p>問い合わせ内容</p>
          <input type="text" name="inquery" size="20" placeholder="問い合わせを入力">
          <input type="reset" name="reset" value="リセット">
          <input type="submit" name="submit" value="送信">
      </form>
  </body>
</html>

chrome実行サンプル

基本的なサンプル input要素-reset属性 chrome実行結果画像

Firefox実行サンプル

基本的なサンプル input要素-reset属性 firefox実行結果画像

edge実行サンプル

基本的なサンプル input要素-reset属性 edge実行結果画像

opera実行サンプル

基本的なサンプル input要素-reset属性 opera実行結果画像

汎用ボタン

<input type="button" value="ラベル" name="名前">

input要素のtype属性に「button」を指定すると、送信もリセットもしない汎用ボタンになります。一般的には、onClickなどのイベント属性を利用して、JavaScriptなどのスクリプト言語と組み合わせてしようされます。

使用できる属性

autofocus、disabled、form、name、value

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>fromタグ サンプルページ</title>
    <meta charset="uft-8"><!-- 文字コード指定 -->
  </head>
  <body>
      <form action="https://kcfran.com/inquery" method="post">
          <p>問い合わせ内容</p>
          <input type="text" name="inquery" size="20" placeholder="問い合わせを入力">
          <input type="button" name="button" value="送信ボタン">
      </form>
  </body>
</html>

chrome実行サンプル

基本的なサンプル input要素-button属性 chrome実行結果画像

Firefox実行サンプル

基本的なサンプル input要素-button属性 firefox実行結果画像

edge実行サンプル

基本的なサンプル input要素-button属性 edge実行結果画像

opera実行サンプル

基本的なサンプル input要素-button属性 opera実行結果画像

画像で送信ボタン

<input type="image" src="URL" name="名前" alt="代替テキスト">

通常、送信ボタンには<input type=”submit”>を使用しますが、画像を送信ボタンとして機能させることもできます。その場合はtype属性に「image」を指定します。

画像を送信ボタンとして使用する場合には、画像が表示されなくても送信ができるように、必ずalt属性で代替テキストを指定しておくようにしてください(type=”image”の場合は、alt属性の指定は文法的に必須となります)

使用できる属性

alt、autofocus、disabled、form、formaction、formenctype、formmethod、formnovalidate、formtarget、height、name、

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>fromタグ サンプルページ</title>
    <meta charset="uft-8"><!-- 文字コード指定 -->
  </head>
  <body>
      <form action="https://kcfran.com/inquery" method="post">
          <p>問い合わせ内容</p>
          <input type="text" name="inquery" size="20" placeholder="問い合わせを入力">
          <input type="image" src="https://kcfran.com/sample/avatarIconCustomReset.png" name="iamge" alt ="ローディングボタン" width="30px">
      </form>
  </body>
</html>

chrome実行サンプル

基本的なサンプル input要素-image属性 chrome実行結果画像

Firefox実行サンプル

基本的なサンプル input要素-image属性 firefox実行結果画像

edge実行サンプル

基本的なサンプル input要素-image属性 edge実行結果画像

opera実行サンプル

基本的なサンプル input要素-image属性 opera実行結果画像

1行の入力フィールドを作る

<input type="text" name="名前" value="デフォルト文字" size="幅" maxlength="最大文字数">

input要素のtype属性に「text」を指定すると、1行のテキスト入力フィールドになります。name属性で指定する名前は、フォームの内容を受信した時にデータを見分けるために使用されます。

名前入力フィールド
デフォルト文字あらかじめ入力されている文字
入力フィールドの幅(文字数)
最大文字数入力可能な最大文字数
使用できる属性

autocomplete、autofocus、dirname、disabled、form、list、maxlength、name、pattern、placeholder、readonly、equired、size、value、inputmode

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>fromタグ サンプルページ</title>
    <meta charset="uft-8"><!-- 文字コード指定 -->
  </head>
  <body>
      <form action="https://kcfran.com/inquery" method="post">
          <p>問い合わせ内容</p>
          <input type="text" name="inquery" size="100" placeholder="問い合わせを入力">
          <input type="submit" name="submit" value="送信">
      </form>
  </body>
</html>

chrome実行サンプル

基本的なサンプル input要素-text属性 chrome実行結果画像

Firefox実行サンプル

基本的なサンプル input要素-text属性 firefox実行結果画像

edge実行サンプル

基本的なサンプル input要素-text属性 edge実行結果画像

opera実行サンプル

基本的なサンプル input要素-text属性 opera実行結果画像

パスワードの入力フィールド

<input type="password" name="名前" value="デフォルト文字" size="幅" maxlength="最大文字数">
名前入力フィールドの名前
デフォルト文字あらかじめ入力されている文字
入力フィールドの幅(文字数)
最大文字数入力可能な最大の文字数

input要素のtype属性に「password」を指定すると、パスワードの入力に使用する1行のテキスト入力フィールドになります。このフィールドに入力した文字は、他の文字や記号などに置き換えられて表示されます。name属性で指定する名前は、フォームの内容を受信した時にデータを見分けるためなどに使用されます。

使用できる属性

autocomplete、autofocus、disabled、form、list、maxlength、name、pattern、placeholder、readonly、required、size、value、inputmode

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>fromタグ サンプルページ</title>
    <meta charset="uft-8"><!-- 文字コード指定 -->
  </head>
  <body>
      <form action="https://kcfran.com/inquery" method="post">
          <p>パスワード入力</p>
          <input type="password" name="password" size="20" placeholder="推測困難なパスワードを入力してください。">
          <input type="submit"  name="submit">
      </form>
  </body>
</html>

chrome実行サンプル

基本的なサンプル input要素-password属性 chrome実行結果画像

Firefox実行サンプル

基本的なサンプル input要素-password属性 firefox実行結果画像

edge実行サンプル

基本的なサンプル input要素-password属性 edge実行結果画像

opera実行サンプル

基本的なサンプル input要素-password属性 opera実行結果画像

検索キーワードの入力欄

<input type="search" name="名前" placeholder="キーワードを入力">

input要素のtype属性に「search」を指定すると、検索用の入力欄になります。ブラウザーによっては、ビジュアルが変化する場合もあります。

使用できる属性

autocomplete、autofocus、disabled、form、list、maxlength、name、pattern、placeholder、readonly、required、size、value

chrome実行サンプル

基本的なサンプル input要素-searh属性 chrome実行結果画像

Firefox実行サンプル

基本的なサンプル input要素-searh属性 firefox実行結果画像

edge実行サンプル

基本的なサンプル input要素-searh属性 edge実行結果画像

opera実行サンプル

基本的なサンプル input要素-searh属性 opera実行結果画像

電話番号の入力欄

<input type="tel" name="名前" autofocus="autofocus">

input要素のtype属性に「tel」を指定すると、電話番号の入力欄になります。スマホでは自動的に数字キーボードが表示されます。

使用できる属性

autocomplete、autofocus、disabled、form、list、maxlength、name、pattern、placeholder、readonly、required、size、value

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>fromタグ サンプルページ</title>
    <meta charset="uft-8"><!-- 文字コード指定 -->
  </head>
  <body>
      <form action="https://kcfran.com/inquery" method="post">
          <p>電話番号</p>
          <input type="tel" name="tel" autofocus="autofocus">
          <input type="submit"  name="submit">
      </form>
  </body>
</html>

chrome実行サンプル

基本的なサンプル input要素-tel属性 chrome実行結果画像

Firefox実行サンプル

基本的なサンプル input要素-tel属性 firefox実行結果画像

edge実行サンプル

基本的なサンプル input要素-tel属性 edge実行結果画像

opera実行サンプル

基本的なサンプル input要素-tel属性 opera実行結果画像

URLの入力欄

<input type="url" name="名前" placeholder="URLを入力">

input要素のtype属性に「url」を指定すると、URLの入力欄になります。ブラウザーによっては、不適切なURLがセットされるとエラーになります。

使用できる属性

autocomplete、autofocus、disabled、form、list、maxlength、name、pattern、placeholder、readonly、required、size、value、inputmode

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>fromタグ サンプルページ</title>
    <meta charset="uft-8"><!-- 文字コード指定 -->
  </head>
  <body>
      <form action="https://kcfran.com/inquery" method="post">
          <p>お気に入りのURL入力</p>
          <input type="url" name="search" placeholder="URL">
          <input type="submit"  name="submit" value="送信">
      </form>
  </body>
</html>

chrome実行サンプル

基本的なサンプル input要素-url属性 chrome実行結果画像

Firefox実行サンプル

基本的なサンプル input要素-url属性 firefox実行結果画像

edge実行サンプル

基本的なサンプル input要素-url属性 edge実行結果画像

opera実行サンプル

基本的なサンプル input要素-url属性 opera実行結果画像

メールアドレスの入力欄

<input type="email" name="名前" autofocus="autofocus">

input要素のtype属性に「email」を指定すると、メールアドレスの入力欄になります。ブラウザーによっては、不適切なメールアドレスがセットされるとエラーになります。

使用できる属性

autocomplete、autofocus、disabled、form、list、maxlength、multiple、name、pattern、placeholder、readonly、required、size、value、inputmode

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>fromタグ サンプルページ</title>
    <meta charset="uft-8"><!-- 文字コード指定 -->
  </head>
  <body>
      <form action="https://kcfran.com/inquery" method="post">
          <p>メールアドレス入力</p>
          <input type="email" name="mail" placeholder="email入力">
          <input type="submit"  name="submit" value="送信">
      </form>
  </body>
</html>

chrome実行サンプル

基本的なサンプル input要素-email属性 chrome実行結果画像

Firefox実行サンプル

基本的なサンプル input要素-email属性 firefox実行結果画像

edge実行サンプル

基本的なサンプル input要素-email属性 edge実行結果画像

opera実行サンプル

基本的なサンプル input要素-email属性 oepra実行結果画像

日時の入力欄

<input type="datetime-local" name="名前" >

input要素のtype属性に「datetime-local」を指定すると、日時(年月日と時刻)の入力欄になります。協定世界時で「yyyy-mm-ddThh:mm:ss」(2022-05-20 20:00:00)という形式で送信されます。

使用できる属性

autocomplete、autofocus、disabled、form、list、max、min、name、readonly、required、step、value

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>fromタグ サンプルページ</title>
    <meta charset="uft-8"><!-- 文字コード指定 -->
  </head>
  <body>
      <form action="https://kcfran.com/inquery" method="post">
          <p></p>
          <input type="datetime-local" name="localtime" max="2022-06-30T12:00" >
      </form>
  </body>
</html>

chrome実行サンプル

基本的なサンプル input要素-datetime-local属性 chrome実行結果画像

Firefox実行サンプル

基本的なサンプル input要素-datetime-local属性 firefox実行結果画像

edge実行サンプル

基本的なサンプル input要素-datetime-local属性 edge実行結果画像

opera実行サンプル

基本的なサンプル input要素-datetime-local属性 opera実行結果画像

月の入力欄

<input type="month" name="名前">

input要素のtype属性に「month」を指定すると、月(年月)の入力欄になります。値は「yyyy-mm」(2022-05)という形式で送信されます。対応ブラウザではカレンダーが表示されます。

使用できる属性

autocomplete、autofocus、disabled、form、list、max、min、name、readonly、required、step、value

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>fromタグ サンプルページ</title>
    <meta charset="uft-8"><!-- 文字コード指定 -->
  </head>
  <body>
      <form action="https://kcfran.com/inquery" method="post">
          <label for="reserve_month">次回の予約月</label>
          <input type="month" name="reserve_month" id="reserve_month" >
      </form>
  </body>
</html>

chrome実行サンプル

基本的なサンプル input要素-month属性 chrome実行結果画像

Firefox実行サンプル

基本的なサンプル input要素-month属性 firefox実行結果画像

edge実行サンプル

基本的なサンプル input要素-month属性 edge実行結果画像

opera実行サンプル

基本的なサンプル input要素-month属性 opera実行結果画像

週の入力欄

<input type="week" name="名前" >

input要素のtype属性に「week」を指定すると、週の入力欄になります。値は、「yyyy-Www」という形式で送信されます。wwは1年の最初の週から数えられた数値で、「2022-W09」の場合、2022年2月23日~3月1日を示します。対応ブラウザでは、カレンダーから年と週が選択できます。

使用できる属性

autocomplete、autofocus、disabled、form、list、max、min、name、readonly、required、step、value

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>fromタグ サンプルページ</title>
    <meta charset="uft-8"><!-- 文字コード指定 -->
  </head>
  <body>
      <form action="https://kcfran.com/send" method="post">
          <label for="reserve_week">次回の予約週</label>
          <input type="week" name="reserve_month" id="reserve_week" >
      </form>
  </body>
</html>

chrome実行サンプル

基本的なサンプル input要素-week属性 chrome実行結果画像

Firefox実行サンプル

基本的なサンプル input要素-week属性 firefox実行結果画像

edge実行サンプル

基本的なサンプル input要素-week属性 edge実行結果画像

opera実行サンプル

基本的なサンプル input要素-week属性 opera実行結果画像

日付(年-月-日)の入力欄

<input type="date" name="名前">

input要素のtype属性に「date」を指定すると、日付(年月日)の入力欄となります。値は、「yyyy-mm-dd」(2022-05-20)形式で送信されます。対応ブラウザであればカレンダーが表示され、年月日を選択できます。

使用できる属性

autocomplete、autofocus、disabled、form、list、max、min、name、readonly、required、step、value

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>fromタグ サンプルページ</title>
    <meta charset="uft-8"><!-- 文字コード指定 -->
  </head>
  <body>
      <form action="https://kcfran.com/send" method="post">
          <label for="reserve_date">次回の予約日</label>
          <input type="date" name="reserve_date" id="reserve_date" >
      </form>
  </body>
</html>

chrome実行サンプル

基本的なサンプル input要素-date属性 chrome実行結果画像

Firefox実行サンプル

基本的なサンプル input要素-date属性 firefox実行結果画像

edge実行サンプル

基本的なサンプル input要素-date属性 edge実行結果画像

opera実行サンプル

基本的なサンプル input要素-date属性 opera実行結果画像

時刻の入力欄

<input type="time" name="名前" >

input要素のtype属性に「time」を指定すると、時刻の入力欄となります。値は「hh:mm:ss」(14:05:34)という形式で送信されます。対応ブラウザでは時刻を選択できるビジュアルになります。

使用できる属性

autocomplete、autofocus、disabled、form、list、max、min、name、readonly、required、step、value

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>fromタグ サンプルページ</title>
    <meta charset="uft-8"><!-- 文字コード指定 -->
  </head>
  <body>
      <form action="https://kcfran.com/send" method="post">
          <label for="reserve_time">次回の予約時間</label>
          <input type="time" name="reserve_time" id="reserve_time" >
      </form>
  </body>
</html>

chrome実行サンプル

基本的なサンプル input要素-time属性 chrome実行結果画像

Firefox実行サンプル

基本的なサンプル input要素-time属性 firefox実行結果画像

edge実行サンプル

基本的なサンプル input要素-time属性 edge実行結果画像

opera実行サンプル

基本的なサンプル input要素-time属性 opera実行結果画像

数値の入力欄

<input type="number" name="名前">

input要素のtype属性に「number」を指定すると、数値の入力欄になります。対応ブラウザでは、数値以外はエラーが表示されます。

使用できる属性

autocomplete、autofocus、disabled、form、list、max、min、name、pattern、placeholder、readonly、required、step、value

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>fromタグ サンプルページ</title>
    <meta charset="uft-8"><!-- 文字コード指定 -->
  </head>
  <body>
      <form action="https://kcfran.com/send" method="post">
          <label for="number_orders">注文数を入力してください。</label>
          <input type="number" name="number_orders" id="number_orders" min="1" max="50">
      </form>
  </body>
</html>

chrome実行サンプル

基本的なサンプル input要素-number属性 chrome実行結果画像

Firefox実行サンプル

基本的なサンプル input要素-number属性 firefox実行結果画像

edge実行サンプル

基本的なサンプル input要素-number属性 edge実行結果画像

opera実行サンプル

基本的なサンプル input要素-number属性 opera実行結果画像

大まかな数値の入力欄

<input type="range" name="名前" >

input要素のtype属性に「range」を指定すると、ざっくり数値入力欄となります。スライダー形式のビジュアルが表示されます。

使用できる属性

autocomplete、autofocus、disabled、form、list、max、min、name、step、value

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>fromタグ サンプルページ</title>
    <meta charset="uft-8"><!-- 文字コード指定 -->
  </head>
  <body>
      <form action="https://kcfran.com/send" method="post">
          <label for="range_review">評価を入力してください。</label>
          <span>低</span>
          <input type="range" name="range_review" id="range_review" min="0" max="100">
          <span>高</span>
      </form>
  </body>
</html>

chrome実行サンプル

基本的なサンプル input要素-range属性 chrome実行結果画像

Firefox実行サンプル

基本的なサンプル input要素-range属性 firefox実行結果画像

edge実行サンプル

基本的なサンプル input要素-range属性 edge実行結果画像

opera実行サンプル

基本的なサンプル input要素-range属性 opera実行結果画像

表示されないフィールド

<input type="hidden" name="名前" value="送信値">
名前フィールドの名前
送信値送信する文字

input要素のtype属性に「hidden」を指定すると、画面上には表示されないフィールドになります。一般に、ユーザに見せる必要のない特定の値を、フォームを処理するプログラムに送信したい場合などに使用します。name属性で指定する名前は、フォームの内容を受信した側がこのデータを見分けるために使用されます。

使用できる属性

disabled、form、name、value

チェックボックス

<input type="checkbox" name="名前" value="送信文字">
<input type="checkbox" name="名前" value="送信文字" checked>

input要素のtype属性に「checkbox」を指定すると、チェックボックスになります。チェックボックスは、複数の選択項目の中から個数を限定せずに選択できるようにする場合に使用します。共通の項目に対する選択肢として使用するチェックボックスは、すべて同じ名前を指定する必要があります。また、データが送信された時に、どの項目が選択されたのかを判別するために、value属性には個別の値を指定するようにしてください。

使用できる属性

checked、disabled、form、name、required、value

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>fromタグ サンプルページ</title>
    <meta charset="uft-8"><!-- 文字コード指定 -->
  </head>
  <body>
      <form action="https://kcfran.com/send" method="post">
          <label >普段使用してるブラウザーは?</label>
          <div>
              <label for="questionnaire_chrome">
                  <input type="checkbox" name="questionnaire" value="chrome" checked>chrome
              </label>
          </div>
          <div>
              <label for="questionnaire_firefox">
                  <input type="checkbox" name="questionnaire" value="firefox">firfox
              </label>
          </div>
          <div>
              <label for="questionnaire_safari">
                  <input type="checkbox" name="questionnaire" value="safari">safari
              </label>
          </div>
          <div>
              <label for="questionnaire_edge">
                  <input type="checkbox" name="questionnaire" value="edge">edge
              </label>
          </div>
          <div>
              <label for="questionnaire_opera">
                  <input type="checkbox" name="questionnaire" value="opera">opera
              </label>
          </div>
      </form>
  </body>
</html>

chrome実行サンプル

基本的なサンプル input要素-checkbox属性 chrome実行結果画像

Firefox実行サンプル

基本的なサンプル input要素-checkbox属性 firefox実行結果画像

edge実行サンプル

基本的なサンプル input要素-checkbox属性 edge実行結果画像

opera実行サンプル

基本的なサンプル input要素-checkbox属性 opera実行結果画像

ラジオボタン

<input type="radio" name="名前" value="送信値">
<input type="radio" name="名前" value="送信値" checked>
名前ラジオボタンの名前
送信文字選択された結果として送信される文字
checkedあらかじめ選択された状態にする場合に指定

input要素のtype属性に「radio」を指定すると、ラジオボタンになります。ラジオボタンは、複数の選択項目のうちひとつだけ選択できる形式のボタンです。共通の項目に対する選択肢として使用するラジオボタンには、すべて同じ名前を指定する必要があります。

また、データが送信された時にどの項目が選択されたのかを判別するために、value属性には個別の値を指定するようにしてください。

使用できる属性

checked、disabled、form、name、required、value

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>fromタグ サンプルページ</title>
    <meta charset="uft-8"><!-- 文字コード指定 -->
  </head>
  <body>
      <form action="https://kcfran.com/send" method="post">
          <label >あなたの性別は?</label>
          <div>
              <label for="questionnaire_chrome">
                  <input type="radio" name="sex" value="男性" checked>男性
              </label>
          </div>
          <div>
              <label for="questionnaire_firefox">
                  <input type="radio" name="sex" value="女性">女性
              </label>
          </div>
          <div>
              <label for="questionnaire_safari">
                  <input type="radio" name="sex" value="中性">中性
              </label>
          </div>
      </form>
  </body>
</html>

chrome実行サンプル

基本的なサンプル input要素-radio属性 chrome実行結果画像

Firefox実行サンプル

基本的なサンプル input要素-radio属性 firefox実行結果画像

edge実行サンプル

基本的なサンプル input要素-radio属性 edge実行結果画像

opera実行サンプル

基本的なサンプル input要素-radio属性 opera実行結果画像

RGBカラーの入力欄

<input type="color" name="" value="color">

input要素のtype属性に「color」を指定すると、RGBカラーの入力欄になります。送信されるデータはRGB値を16進数に変換したカラーコードになります。(#ffffff)

使用できる属性

autocomplete、autofocus、disabled、form、list、name、value

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>fromタグ サンプルページ</title>
    <meta charset="uft-8"><!-- 文字コード指定 -->
  </head>
  <body>
      <form action="https://kcfran.com/send" method="post">
          <label >あなたのファッションカラーは?</label>
              <label for="questionnaire_chrome">
                  <input type="color" name="color" >
              </label>
      </form>
  </body>
</html>

chrome実行サンプル

基本的なサンプル input要素-color属性 chrome実行結果画像

Firefox実行サンプル

基本的なサンプル input要素-color属性 firefox実行結果画像

edge実行サンプル

基本的なサンプル input要素-color属性 edge実行結果画像

opera実行サンプル

基本的なサンプル input要素-color属性 opoera実行結果画像

ファイル選択の機能を付ける

<input type="file" name="名前" accept="MIMEタイプ">

input要素のtype属性に「file」を指定すると、フォームのデータとして送信するファイルを選択するためのボタンとフィールドになります。accept属性には、受信プログラムが受け付けることのできるファイルの種類をMIMEタイプで指定できます。

form要素のmethod属性には「post」を、enctype属性には「multipart/form-data」を指定する必要があります。

使用できる属性

accept、autofocus、disabled、form、multiple、name、required、value

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>fromタグ サンプルページ</title>
    <meta charset="uft-8"><!-- 文字コード指定 -->
  </head>
  <body>
      <form action="https://kcfran.com/send" method="post">
          <label >添付画像を選択してください。</label>
              <label for="questionnaire_chrome">
                  <input type="file" name="file" multiple accept=".png,.jpg,.gif,image/png,image/jpg,image/gif">
              </label>
      </form>
  </body>
</html>

chrome実行サンプル

基本的なサンプル input要素-file属性 chrome実行結果画像

Firefox実行サンプル

基本的なサンプル input要素-file属性 firefox実行結果画像

edge実行サンプル

基本的なサンプル input要素-file属性 edge実行結果画像

opera実行サンプル

基本的なサンプル input要素-file属性 opera実行結果画像

コメント

タイトルとURLをコピーしました