HTML - formタグのソースを表示

== 概要 ==
<form>タグは、Webページでユーザから情報を収集して、サーバに送信するための仕組みを提供するものである。<br>
<br>
<form>タグは、オンラインショッピングの注文フォームやお問い合わせフォーム、ログインフォーム等、Webサイトには不可欠な要素である。<br>
ユーザが入力した情報は、サーバサイドで処理されて、データベースへの保存やメール送信等の処理が行われる。<br>
<br>
HTML5の登場により、フォームの機能は大きく進化しており、<br>
最新のWebブラウザでは、JavaScriptを使用せずともフォームのバリデーション (入力値の検証) が可能になっている。<br>
例えば、メールアドレスの形式チェックやテキストの必須入力等が実装できる。<br>
<br>
また、古いWebブラウザでも適切にフォールバック (代替動作) するよう設計されているため、段階的な実装が可能である。<br>
<br>
スマートフォンやタブレット等のモバイルデバイスでは、入力項目の種類に応じて最適なキーボードが自動的に表示される。<br>
例えば、メールアドレス入力時には@マークが表示されたキーボード、電話番号入力時には数字キーパッドが表示される等、ユーザの入力をサポートする。<br>
<br>
HTML5では、日付選択や色選択等の専用インターフェースが提供され、ブラウザネイティブのUI要素を活用できる。<br>
これにより、より直感的で使いやすいユーザ入力を実現できる。<br>
<br>
フォームデータの送信方法には、主にGETとPOSTがある。<br>
GETはURLにデータを含めて送信するため、ブックマーク可能な検索フォーム等に適している。<br>
POSTはデータを非表示で送信するため、パスワード等の機密情報を扱うフォームに適している。<br>
<br>
適切なマークアップとフォーム要素の使用により、スクリーンリーダー等の支援技術を使用するユーザにも配慮したフォームを作成できる。<br>
HTML5の新しい属性を活用することにより、多くのユーザにとって理解しやすいフォームを提供することができる。<br>
<br><br>

== formタグ ==
<form>タグは、Webページ上でユーザからデータを収集して、サーバに送信するためのHTMLタグである。<br>
<br>
 <syntaxhighlight lang="html">
 <!-- 基本的な使用例 -->
 <form action="/submit" method="post" name="contactForm">
   <!-- ここにフォーム要素を配置 -->
 </form>
 </syntaxhighlight>
<br>
<u>※注意</u><br>
* ネストして使用することは推奨されない。
* JavaScriptでフォームの送信を制御する場合は、onsubmitイベントが使用可能である。
<br>
==== 属性 ====
===== action属性 =====
フォームのデータを送信する先のURLを指定する。<br>
 <syntaxhighlight lang="html">
 <form action="/submit">
 </syntaxhighlight>
<br>
===== method属性 =====
データの送信方法を指定する。<br>
* GET
*:URLにデータを付加して送信する。(データはURLに表示)
* POST
*: HTTPリクエストのボディにデータを含めて送信する。(データは非表示)
 <syntaxhighlight lang="html">
 <form method="post">
 </syntaxhighlight>
<br>
===== enctype属性 =====
フォームデータのエンコード方式を指定する。<br>
* application/x-www-form-urlencoded  (デフォルト値)
* text/plain
*: プレーンテキストとして送信する。
* multipart/form-data
*: ファイルアップロード時に使用する。
 <syntaxhighlight lang="html">
 <form enctype="multipart/form-data">
 </syntaxhighlight>
<br>
===== name属性 =====
JavaScript等で参照する場合、フォームの名前を指定する。<br>
 <syntaxhighlight lang="html">
 <form name="loginForm">
 </syntaxhighlight>
<br>
===== target属性 =====
フォーム送信後の結果をどこに表示するかを指定する。<br>
* _self
*: 同じウィンドウ、同じタブ (デフォルト)
* _blank
*: 新しいタブ、新しいウィンドウ
* _parent
*: 親フレーム
* _top
*: 最上位フレーム
 <syntaxhighlight lang="html">
 <form target="_blank">
 </syntaxhighlight>
<br>
===== autocomplete属性 =====
フォームの自動補完機能の有効 / 無効を指定する。<br>
* 値
*: on または off
 <syntaxhighlight lang="html">
 <form autocomplete="off">
 </syntaxhighlight>
<br>
===== novalidate属性 =====
Webブラウザのデフォルトの検証機能を無効にする。<br>
 <syntaxhighlight lang="html">
 <form novalidate>
 </syntaxhighlight>
<br>
===== accept-charset属性 =====
フォームの文字エンコーディングを指定する。<br>
 <syntaxhighlight lang="html">
 <form accept-charset="UTF-8">
 </syntaxhighlight>
<br><br>

== ラジオボタン ==
==== ラジオボタンの基本 ====
ラジオボタンは、複数の選択肢から1つだけを選べる入力要素である。<br>
<br>
基本的な実装を以下に示す。<br>
* inputタグのtype属性を"radio"に指定する。
* 各選択肢には固有のvalue属性を設定する。
* checked属性で初期選択状態を設定できる。
<br>
また、アクセシビリティのためにlabelタグと組み合わせて使用する。<br>
<br>
 <syntaxhighlight lang="html">
 <form>
   <div>
     <input type="radio" id="male" name="gender" value="male">
     <label for="male">男性</label>
 
     <input type="radio" id="female" name="gender" value="female">
     <label for="female">女性</label>
   </div>
 </form>
 </syntaxhighlight>
<br>
 <syntaxhighlight lang="html">
 <!-- checked属性は初期選択を指す -->
 <input type="radio" name="gender" value="male" checked>
 
 <!-- disabled属性は選択不可を指す -->
 <input type="radio" name="gender" value="female" disabled>
 </syntaxhighlight>
<br>
==== グループ化 ====
ラジオボタンをグループ化するには、同じname属性値を設定する。<br>
<br>
各ラジオボタンには個別のid属性値とvalue属性値を設定する。<br>
<br>
labelタグを使用して、ラジオボタンにラベルを付ける。<br>
labelのfor属性が存在する場合は、対応するラジオボタンのid属性値と一致させる。<br>
<br>
 <syntaxhighlight lang="html">
 <form>
   <div>
     <p>好きな色を選んでください：</p>
 
     <input type="radio" id="red" name="color" value="red">
     <label for="red">赤</label>
 
     <input type="radio" id="blue" name="color" value="blue">
     <label for="blue">青</label>
 
     <input type="radio" id="green" name="color" value="green">
     <label for="green">緑</label>
   </div>
 </form>
 </syntaxhighlight>
<br>
グループ化を視覚的にも明確にする場合は、fieldsetおよびlegendを使用する。<br>
これにより、グループに枠線が付き、legendでグループのタイトルが表示される。<br>
 <syntaxhighlight lang="html">
 <form>
   <fieldset>
     <legend>好きな色を選んでください：</legend>
 
     <input type="radio" id="red" name="color" value="red">
     <label for="red">赤</label>
 
     <input type="radio" id="blue" name="color" value="blue">
     <label for="blue">青</label>
 
     <input type="radio" id="green" name="color" value="green">
     <label for="green">緑</label>
   </fieldset>
 </form>
 </syntaxhighlight>
<br><br>

== テキストボックス ==
==== Eメール ====
emailは、メールアドレス入力用のテキストボックスである。<br>
 <syntaxhighlight lang="html">
 <input type="email" name="email">
 </syntaxhighlight>
<br>
==== URL ====
urlは、URL入力用ののテキストボックスである。<br>
 <syntaxhighlight lang="html">
 <input type="url" name="website">
 </syntaxhighlight>
<br>
==== 数値入力 ====
numberは、数値入力用のテキストボックスである。<br>
 <syntaxhighlight lang="html">
 <input type="number" min="0" max="100" step="1">
 </syntaxhighlight>
<br>
==== 数値入力 (rangeの使用) ====
rangeは、スライダーによる数値入力するものである。<br>
 <syntaxhighlight lang="html">
 <!-- JavaScriptの関数を分離して記述する場合 -->
 <input type="range" min="0" max="100" value="50" oninput="updateValue(this.value)">
 <input type="text" id="rangeValue" value="50" readonly>
 
 <script>
 function updateValue(value) {
   document.getElementById('rangeValue').value = value;
 }
 </script>

 <!-- JavaScriptの関数を直接HTML属性に記述する場合 -->
 <div>
   <input type="range" min="0" max="100" value="50" oninput="document.getElementById('rangeValue').value = this.value">
   <input type="text" id="rangeValue" value="50" readonly>  <!-- readonly属性を使用して、テキストボックスの値を直接編集できないようにしている -->
 </div>
 </syntaxhighlight>
<br>

==== 電話番号入力 ====
telは、電話番号入力用のテキストボックスである。<br>
 <syntaxhighlight lang="html">
 <input type="tel" name="phone">
 </syntaxhighlight>
<br>
==== 検索ボックス ====
searchは、検索ボックス用のテキストボックスである。<br>
 <syntaxhighlight lang="html">
 <input type="search" name="query">
 </syntaxhighlight>
<br>
==== 時刻選択 ====
timeは、時刻選択用のテキストボックスである。<br>
 <syntaxhighlight lang="html">
 <input type="time">
 </syntaxhighlight>
<br>
==== バリデーション ====
===== 正規表現の使用 =====
patternは、正規表現によるバリデーションを指定する。<br>
 <syntaxhighlight lang="html">
 <input type="text" pattern="[A-Za-z]{3}">
 </syntaxhighlight>
<br>
===== 数値の最小 / 最大値 =====
min / maxは、数値の最小 / 最大値を制限する。<br>
数値入力やレンジスライダで使用する。<br>
 <syntaxhighlight lang="html">
 <input type="number" min="18" max="65">
 </syntaxhighlight>
<br>
===== 数値の増減幅 =====
stepは、数値の増減幅を指定する。<br>
* 未指定の場合は、1
* 小数点の入力も可能
 <syntaxhighlight lang="html">
 <input type="number" min="100" max="250" step="0.5">
 </syntaxhighlight>
<br>
以下の例では、min / max / stepを使用して、スライダでの数値入力を指定している。<br>
 <syntaxhighlight lang="html">
 <input type="range" min="0" max="100" step="10">
 </syntaxhighlight>
<br>
===== 文字数制限 =====
maxlength / minlengthは、最大文字数 / 最小文字数を指定する。<br>
input要素やtextarea要素で使用可能である。<br>
 <syntaxhighlight lang="html">
 <!-- テキスト入力の文字数制限 -->
 <input type="text" maxlength="20">
 
 <!-- パスワードの文字数制限  8-16文字 -->
 <input type="password" minlength="8" maxlength="16">
 
 <!-- テキストエリアの文字数制限  最大200文字 -->
 <textarea maxlength="200" rows="4" cols="50"></textarea>
 </syntaxhighlight>
<br>
==== その他属性 ====
===== 必須入力項目の指定 =====
requiredは、必須入力項目を指定する。<br>
 <syntaxhighlight lang="html">
 <input type="text" required>
 </syntaxhighlight>
<br>
===== プレースホルダ =====
placeholderは、入力例やヒントを表示する。<br>
 <syntaxhighlight lang="html">
 <input type="text" placeholder="例: 山田太郎">
 </syntaxhighlight>
<br>
===== オートコンプリート =====
autocompleteは、自動補完を制御する。<br>
 <syntaxhighlight lang="html">
 <input type="text" autocomplete="on">
 </syntaxhighlight>
<br>
===== 自動フォーカス =====
autofocusは、ページ読み込み時に自動フォーカスを制御する。<br>
 <syntaxhighlight lang="html">
 <input type="text" autofocus>
 </syntaxhighlight>
<br><br>

== ラベル ==
==== for属性 ====
for属性は、labelタグとフォームコントロール (input、select、textarea等) を関連付けるために使用する属性である。<br>
<br>
<u>for属性の値は、関連付けるフォームコントロールのid属性と一致させる必要がある。(大文字・小文字も区別される)</u><br>
<br>
ラベルを押下する時、関連付けられたフォームコントロールにフォーカスが移動する。<br>
<br>
<u>for属性は、<label>タグ専用の属性であり、他のHTML要素では使用できない。</u><br>
<br>
<u>※注意</u><br>
<u>同じページ内で同じid値を複数使用してはいけない。</u><br>
<br>
for属性を使用するメリットは、スクリーンリーダーでの読み上げが適切になり、クリック / タップ可能な領域が広がることである。<br>
<br>
 <syntaxhighlight lang="html">
 <!-- 基本 -->
 <label for="username">ユーザ名:</label>
 <input type="text" id="username">
 
 <!-- チェックボックス -->
 <label for="agree">利用規約に同意する</label>
 <input type="checkbox" id="agree">
 
 <!-- ラジオボタン -->
 <label for="male">男性</label>
 <input type="radio" id="male" name="gender">
 <label for="female">女性</label>
 <input type="radio" id="female" name="gender">
 
 <!-- テキストエリア -->
 <label for="comment">コメント:</label>
 <textarea id="comment"></textarea>
 
 <!-- プルダウン (セレクトボックス) -->
 <label for="country">国:</label>
 <select id="country">
   <option value="jp">韓国</option>
   <option value="jp">中国</option>
   <option value="us">アメリカ</option>
 </select>
 </syntaxhighlight>
<br>
また、for属性を使用せずに、<label>タグの中にフォームコントロールを直接入れることもできる。<br>
 <syntaxhighlight lang="html">
 <!-- ネストした記法 -->
 <label>
   ユーザ名:
   <input type="text">
 </label>
 
 <!-- チェックボックス -->
 <label>
   <input type="checkbox">
   利用規約に同意する
 </label>
 </syntaxhighlight>
<br><br>

== カレンダー ==
==== 日付選択用 ====
dateは、日付選択用のカレンダーである。<br>
 <syntaxhighlight lang="html">
 <input type="date">
 </syntaxhighlight>
<br>
==== 日時選択 ====
datetime-localは、日時選択用のカレンダーである。<br>
 <syntaxhighlight lang="html">
 <input type="datetime-local">
 </syntaxhighlight>
<br>
==== 月選択 ====
monthは、月選択用のカレンダーである。<br>
 <syntaxhighlight lang="html">
 <input type="month">
 </syntaxhighlight>
<br>
==== 週選択 ====
weekは、週選択用のカレンダーである。<br>
 <syntaxhighlight lang="html">
 <input type="week">
 </syntaxhighlight>
<br><br>

== カラーピッカー ==
 <syntaxhighlight lang="html">
 <input type="color">
 </syntaxhighlight>
<br><br>

==== 入力要素 ====
===== 入力候補リスト =====
<datalist>タグは、入力候補リストを提供する。<br>
 <syntaxhighlight lang="html">
 <input list="browsers">
 <datalist id="browsers">
   <option value="Chrome">
   <option value="Firefox">
   <option value="Safari">
 </datalist>
 </syntaxhighlight>
<br><br>

== その他表示 ==
==== 計算結果等の出力表示 ====
<output>タグは、計算結果等の出力表示用である。<br>
 <syntaxhighlight lang="html">
 <output name="result"></output>
 </syntaxhighlight>
<br>
==== 進捗表示 ====
<progress>タグは、進捗状況表示用である。<br>
 <syntaxhighlight lang="html">
 <progress value="70" max="100">70%</progress>
 </syntaxhighlight>
<br>
==== 数値の度合い ====
<meter>タグは、数値の度合いを表示する。<br>
 <syntaxhighlight lang="html">
 <meter value="0.6">60%</meter>
 </syntaxhighlight>
<br><br>

== ファイル ==
==== 複数ファイルの選択 ====
multipleは、複数ファイルの選択を許可する。<br>
 <syntaxhighlight lang="html">
 <input type="file" multiple>
 </syntaxhighlight>
<br><br>

== 送信ボタン ==
==== 属性 ====
===== 送信先URLの指定 =====
formactionは、送信先URLを指定する。<br>
 <syntaxhighlight lang="html">
 <input type="submit" formaction="/submit2.php">
 </syntaxhighlight>
<br>
===== 送信メソッドの指定 =====
formmethodは、送信メソッドを指定する。<br>
 <syntaxhighlight lang="html">
 <input type="submit" formmethod="post">
 </syntaxhighlight>
<br>
===== エンコードタイプの指定 =====
formenctypeは、エンコードタイプを指定する。<br>
 <syntaxhighlight lang="html">
 <input type="submit" formenctype="multipart/form-data">
 </syntaxhighlight>
<br>
===== 送信後の表示先の指定 =====
formtargetは、送信後の表示先を指定する。<br>
 <syntaxhighlight lang="html">
 <input type="submit" formtarget="_blank">
 </syntaxhighlight>
<br>
===== バリデーションの無効化 =====
formnovalidateは、バリデーションを無効化する。<br>
 <syntaxhighlight lang="html">
 <input type="submit" formnovalidate>
 </syntaxhighlight>
<br><br>


{{#seo:
|title={{PAGENAME}} : Exploring Electronics and SUSE Linux | MochiuWiki
|keywords=MochiuWiki,Mochiu,Wiki,Mochiu Wiki,Electric Circuit,Electric,pcb,Mathematics,AVR,TI,STMicro,AVR,ATmega,MSP430,STM,Arduino,Xilinx,FPGA,Verilog,HDL,PinePhone,Pine Phone,Raspberry,Raspberry Pi,C,C++,C#,Qt,Qml,MFC,Shell,Bash,Zsh,Fish,SUSE,SLE,Suse Enterprise,Suse Linux,openSUSE,open SUSE,Leap,Linux,uCLnux,Podman,電気回路,電子回路,基板,プリント基板
|description={{PAGENAME}} - 電子回路とSUSE Linuxに関する情報 | This page is {{PAGENAME}} in our wiki about electronic circuits and SUSE Linux
|image=/resources/assets/MochiuLogo_Single_Blue.png
}}

__FORCETOC__
[[カテゴリ:Web]]