no-image

フォームタグ

form/フォーム

入力データを送信する。

結果

range


50

解説

<form>関連タグは、HTMLのバージョンアップによって最も機能が充実したといっていいほどのカテゴリーです。

今まで、JavascriptやFlashのActionscript等でしか表現できなかったものがHTMLレベルで手軽に表現することができます。

また、セキュリティーに関連したタグが増えたのも大きいです。

それぞれのタグを、実用的な事例を挙げながら解説していきます。

「action」は、送信先を表します。
cgi等でデータを反映させたいファイルのアドレスを書きます。

「method」は、GET・POSTのどちらかを指定します。
簡単に言うと、「GET」はURLレベルでの送信、「POST」はURLには関係しません。

「novalidate」は、バリデートを行わない指定。

「target」は、結果を別ウィンドウに表示させるかどうかの指定。

「name」は、フォームの名前。

「accept-charset」は、フォーム送信時のエンコーディング(EUC-JPなど)。

「autocomplete」は、オートコンプリート(入力履歴の表示)。

「enctype」は、フォーム送信時のMIMEタイプ。"application/x-www-form-urlencoded","multipart/form-data","text/plain"のどれかを指定。

input/入力・選択

フォーム入力部分。

結果

好きな果物:
:メロン
:すいか
:ぶどう
:みかん

解説

input type属性一覧
属性の値 用途
hidden 非表示 非表示
ユーザーには見えない形で、内容を送信したいときに使います。
text テキスト
一行のテキスト入力専用。
search 検索
検索フィールド。
tel 電話番号
電話番号専用フィールド。スマホでは入力パッドが数字入力になる。
url URL
不適切なURL入力をするとエラーが検出される。
email メルアド
不適切なメールアドレスを入力をするとエラーが検出される。
password パスワード
パスワード専用。
datetime 日時
date 日付
month
week
time 時間
datetime-local 日時
number 数値
数値専用の入力フォームが表示される。
range 範囲
スライダー表示。
color sRGB値
カラーピッカーが表示される。
checkbox チェックボックス
初期チェック済みの場合は「checked="checked"」を入力。
radio ラジオボタン
初期チェック済みの場合は「checked="checked"」を入力。
name属性を同一にすることでグルーピングされる。
file ファイル選択
submit 送信ボタン
image 画像ボタン
src="画像URL"で画像を表示、"width","height"で幅と高さを指定。
reset リセット

textarea/テキストエリア

複数行のテキストエリア。

結果

解説

「autofoucus」は、ページが開いたときにデフォルトでフォーカスされる。

「cols」は、一行間の文字の数(幅)。※CSSにて指定がない限り

「 disabled」は、コントロールの無効。

「form」は、関連付けられたフォームのid。

「maxlength」は、「="140"」のように使います。半角全角関係なく1文字としてカウント。改行も1文字。

「name」は、テキストエリアの名前。

「placeholder」は、テキストのヒントを表示する。

「readonly」は、読み取り専用で書き込みできなくする。

「required」は、テキスト入力を必須にする。

「rows」は、行数の指定。

「wrap」は、「soft」と「hard」のいずれかを指定。「hard」にすると、自動改行されてしまったものをカウントする。

select/セレクトメニュー

セレクトメニュー。

結果

解説

<slect>は、<option>とセットで使います。
表示方法が2種類あります。
プルダウン方式と、マルチプル方式です。

select要素。
「autofocus」は、ページが開いたときにデフォルトでフォーカスされる。
「disabled」は、コントロールの無効。
「form」は、関連付けられたフォームのid。
「name」は、セレクト要素の名前。
「required」は、選択入力を必須にする。
「multiple」は、複数選択可能(マルチプル)。「multiple="multiple"」のように書きます。

option要素。
「selected」は、選択済み。
「value」は、値。<option>で囲んだ文字と別な値を送りたいときに使用します。
「label」は、選択肢に表示される文字。
「disabled」は、使用不可項目。

optgroup要素
「label」は、グループの大項目。<optgroup>の必須要素です。
「disabled」は、コントロールの無効。

datalist/入力候補選択肢

入力候補選択肢。

結果


解説

<datalist>は、<option>とセットで使います。

従来、Javascriptなどでしか表現できなかった「候補キーワード」がHTMLレベルで実装されました。

fieldset/部品のグループ化

フォーム部品のグループ化。

結果

range

解説

<fieldset>は、フォーム部品のグループ化。
<legend>は、そのタイトルになります。

「form」は、フォームのID。
「disabled」は、コントロールの無効。
「name」は、グループの名前。

label/部品項目名

入力データを送信する。

結果

好きな果物:


どっち派?:


リンゴ

range


50

解説

<label>は、キャプションを表します。
関連付けられるタグは
<button>、<input>、<keygen>、<meter>、<output>、<progress>、<select>、<textarea>です。

「form」は、関連付けられたフォームのid。
「for」は、キャプションを結びつけるフォーム関連タグのid。

output/計算結果

計算結果。

結果

range


50

解説

<utput>は、<form>内で行われる計算の結果を表します。
そういう意味を除いては突出した機能は備えていませんので、Javascript等と組み合わせて使います。

「form」は、関連付けられたフォームのid。
「for」は、キャプションを結びつけるフォーム関連タグのid。
「name」は、oputputの名前。

keygen/公開鍵生成

秘密鍵と公開鍵を生成する。

結果


解説

は、秘密鍵と公開鍵を生成します。
秘密鍵はブラウザに保存、公開鍵はサーバーに送信されます。鍵のタイプは「rsa」です。
ブラウザによって表示方法は異なりますが、基本的にプルダウンです。

progress/プログレスバー

進行状況を表示。

結果

30%進行中

解説

<progress>は、「現在の状況」を表すものであり、終了した数値を表すには<meter>を使います。

主なコンテンツ属性は、 「value」と「max」です。
「value」は、進歩を表す値。
「max」は、完了時の値。maxを省略するとデフォルトで最大値は「1」となり、valueは0から1(小数点を含む)の間を指定しなければなりません。

meter/メーター

静的な状況を表示。

結果

120人中34人がYESと答えた。

解説

<meter>は、静的な状況を表すゲージです。
例題では全ての要素を使ってみました。
このタグの面白いところは、松竹梅のように、値によってゲージの色が変化することです。

「value」は、メーターの値。
「min」は、最低値。
「max」は、最大値。
「low」は、低い範囲。
「haigh」は、高い範囲。
「optimum」は、最適な範囲。