フォーム画面の作成 – inputタグとtype属性【HTML/CSS入門】

WebForm

Webでのお問い合わせフォームや、ログイン画面など、ユーザーが情報を入力する時に使用されるフォームの作り方についてです。

フォーム画面作成のポイント

  • HTML:
    Formタグ > フォーム部品(inputなど)> 属性(type=”text”など)の構造。
  • レイアウト:
    <dl> <dt> <dd>タグで見出しと入力フォームを情報構造化し、CSSで見た目を整えると効果的。

HTML

formタグに、見出しと入力したいフォーム部品を配置します。
<dl> <dt> <dd>タグで情報構造化しておくとCSSでレイアウトしやすくなります。

See the Pen formSample by uxbear (@uxbear) on CodePen.

CSS

レイアウトはHTMLで書いたタグや属性にスタイルすることで見た目を調整していきます。

See the Pen formSample by uxbear (@uxbear) on CodePen.

<form>要素

フォーム部品と呼ばれる “ラジオボタン”、”テキストエリア”等を配置し、選択や入力した値をサーバに送信したり、JavaScriptを実行するなどおこないます。

form構文

 <form method="データの送信方法" action="送信先URL指定" name="名前を指定">
 ここにフォーム部品(ボタン等)を配置
 </form> 

form属性

属性説明
accept-charset属性送信するデータの文字エンコーディングを指定UTF-8、Shift_JIS、EUC-JPなど
action属性送信先URLを指定URL(https://〜など)
autocomplete属性オートコンプリートの オン/オフを指定値: on / off(初期値: on
enctype属性送信するデータの形式を指定application/x-www-form-urlencoded
multipart/form-data・text/plain
method属性送信方法(HTTPメソッド)を指定値: get / post (初期値: get)
name属性フォームの名前を指定
novalidate属性入力されたデータの妥当性を確認しないnovalidate
target属性フォーム送信するターゲット先を指定_blank / _self / _parent / _top
任意のターゲット名

フォーム部品

form要素の中に設置する、input要素select要素textarea要素など

input要素

// input要素の例

<dl>
<dd>メールアドレス</dt>
<dd><input type="email" name="emaill" class="emailIInput"></dd>
</dl>

input要素は、フォームの各種部品(入力欄・選択肢・ボタン)を作成します。

input要素の属性【attribute】

下記は、Input要素に共通で指定できる属性です。(グローバル属性: Global Attributes)

これ以外にも、部品のタイプごとに多数の属性が用意されています。(ローカル属性: local Attributes)

属性意味説明
type=””部品のタイプキーワード特定のキーワードを指定 (初期値: text)
name=””部品の名前文字列部品を識別するための名前
value=””送信される値文字列入力欄の初期値、選択時の値、ボタンのテキスト
disabled部品の無効化(disabled)値は省略可
form=””フォームとの関連付けID名関連付けるform要素に指定したID名
autofocus自動フォーカスの指定(autofocus)値は省略可、1つの文書に1つだけ指定可能

フォーム画面作成の際に、よく使う type属性 を見ていきます。

type属性の種類

input要素の”type属性”は、フォーム部品の種類を指定する際に使用します。

一行テキストボックス・チェックボックス・ラジオボタン・送信ボタン・リセットボタン等、フォーム部品の種類を指定し分けることができます。

type属性を指定しなかった場合は、type="text" となります。

type属性の値意味
type=”hidden”画面上は表示されない隠しデータを指定
type=”text”一行テキストボックスを作成(初期値)
type=”search”検索テキストの入力欄を作成
type=”tel”電話番号の入力欄を作成
type=”url”URLの入力欄を作成
type=”email”メールアドレスの入力欄を作成
type=”password”パスワード入力欄を作成する
type=”datetime”UTC(協定世界時)による日時の入力欄を作成する
type=”date”日付の入力欄を作成する
type=”month”月の入力欄を作成する
type=”week”週の入力欄を作成する
type=”time”時間の入力欄を作成する
type=”datetime-local”UTC(協定世界時)によらないローカル日時の入力欄を作成する
type=”number”数値の入力欄を作成する
type=”range”レンジの入力欄を作成する
type=”color”色の入力欄を作成する
type=”checkbox”チェックボックスを作成する
type=”radio”ラジオボタンを作成する
type=”file”サーバーへファイルを送信する
type=”submit”送信ボタンを作成する
type=”image”画像ボタンを作成する
type=”reset”リセットボタンを作成する
type=”button”汎用ボタンを作成する

まとめ

Webでのお問い合わせフォームや、ログイン画面など、ユーザーが情報を入力する時に使用されるフォームの作り方についてでした。

JavaScriptの学習講座、エンジニアの転職

あわせて読みたい記事

あわせて読みたい書籍

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA