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

== 概要 ==
<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>
==== その他属性 ====
===== 必須入力項目の指定 =====
requiredは、必須入力項目を指定する。<br>
 <syntaxhighlight lang="html">
 <input type="text" required>
 </syntaxhighlight>
<br>
===== プレースホルダ =====
placeholderは、入力例やヒントを表示する。<br>
 <syntaxhighlight lang="html">
 <input type="text" placeholder="例: 山田太郎">
 </syntaxhighlight>
<br>
===== バリデーション =====
patternは、正規表現によるバリデーションを指定する。<br>
 <syntaxhighlight lang="html">
 <input type="text" pattern="[A-Za-z]{3}">
 </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>

== バリデーション関連 ==
==== min / max ====
数値の最小 / 最大値を指定する。<br>
<br>
==== step ====
数値の増減幅を指定する。<br>
<br>
==== maxlength / minlength ====
最大文字数 / 最小文字数を指定する。<br>
<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]]