https://hmaster.net/


HTMLタグとCSSを使いメモ帳だけで無料でホームページを作成する 方法を分かりやすく解説しているサイトです。 初心者向けに見やすい、読みやすい作りになっています。

フォームに入れる部品

<form action="URI">
<input type="部品" name="名前">
</form>
のようにフォームタグの中にinputタグを入れることで以下のようなフォームの部品が作ることができます。

ここではHTML5で追加されたフォーム部品を紹介します。

部品の名前説明
A.電話番号入力欄 電話番号を入力可能なフィールドです。××-××××-××××のような形式で入力します(×は数字)
B.URLの入力欄 ホームページのURLを入力可能なフィールドです。URLではない文字等を入力してしまうと エラーメッセージが表示されます。
C.email メールアドレスの入力欄です。メール形式ではない文字等を入力してしまうと エラーメッセージが表示されます。
D.検索テキスト入力欄 検索キーワードを入力するための入力欄です
E.date 日付の入力欄です。年/月/日の形式で入力します。Firefox等ではカレンダーが 表示され目的の日をクリックすると自動的に入力されます。
F.time 時刻の入力欄です。時間と分で表示します。Google Chromeでは時間と分を選択 できるようになっています。
G.number 数値の入力欄です。Firefox等ではスピンボタンが表示され数値の増減が可能です。
H.range レンジ(範囲や幅)の入力欄です。スライダーが表示され数値を入力します。
I.color 色の入力欄です。ブラウザによってはPhotoshopのようなカラーピッカーが 表示され色を選択できます。

【ブラウザ表示】

A. B. C. D.
E. F. G. H. I.


ソース

<form action="URI">
A.<input type="tel" name="te" value="0120-0000-0000" size="20" maxlength="40">
B.<input type="url" name="ur" size="20" maxlength="40">
C.<input type="email" name="email" maxlength="40">
D.<input type="search" name="q">
E.<input type="date" name="anniversary"><br>
F.<input type="time" name="t">
G.<input type="number">
H.<input type="range" name="r" min="1" max="80" value="50">
I.<input type="color" name="iro">
</form>

■ その他の項目

オートコンプリートを指定する
フォームの入力データの検証を無効にする
初期表示する内容を指定する
フォームの入力候補を表示する
計算結果の出力欄を表す
作業の進捗状況を示す
規定範囲内の容量を示す

HTML5のタグ一覧

HTMLタグ一覧

CSS一覧


このエントリーをはてなブックマークに追加 Instagram