細 Wiki がページ「HTML - form」を「HTML - formタグ」に、リダイレクトを残さずに移動しました |
編集の要約なし |
||
| 75行目: | 75行目: | ||
</fieldset> | </fieldset> | ||
</form> | </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は、スライダーによる数値入力するものである。<br> | |||
<syntaxhighlight lang="html"> | |||
<input type="range" min="0" max="100"> | |||
</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> | </syntaxhighlight> | ||
<br><br> | <br><br> | ||