HTMLで入力フォームを作成する方法

当ページのリンクには広告が含まれています。
html
  • URLをコピーしました!
生徒

WEBページに入力フォームを作成したいです

先生

HTMLで入力フォームを作成する方法を説明します

目次

WEBサイトの入力フォームについて

お問い合わせフォームやアンケートといった入力を求めるWEBページを作るには、HTMLフォームを使用します。

実際にHTMLフォームを使用するには、フォームの入力内容を受け取るサーバー側のプログラムが必要です。

この記事でわかること
  • HTMLで入力フォームを作る方法
  • HTMLのフォームの各要素

<form>タグでHTMLフォームを作成する

入力フォームは<form>タグで作成します。

<form>タグの内側にフォームの内容を記述していきます。

See the Pen form by mik20621 (@mik20621) on CodePen.

HTMLは大文字小文字のどちらでもよいですが、全て小文字で書くのが定則です。

<form>タグでよく使う属性

<form>タグは属性をいくつか指定して使用することが多いです。

<form>タグでよく使用する属性は以下になります。

属性説明
methodフォームの情報をサーバーへ送信する方法(ほとんどの場合postまたはget
actionフォームの情報を送信するサーバーのURL(例:https:/example.com/form.php
idとnameとvalueに付いて

HTMLフォームで使用するidnamevalueは混同しやすいですが以下の違いがあります。

項目説明
idJavaScriptやCSSで要素を指定する時などに使用(ベージ内で重複させない)
name要素の内容をPHPなどにパラメータとして渡す時の名前(name=value)
value要素に入力された値(name=value)

inputタグはいろいろな形式の入力項目を表示できる

inputタグは入力項目を表示するのに使用します。type属性の値を変えることで様々な形式の入力項目を表示できます。

inputタグには閉じタグ</input>は文法としてありません。

type=”button”

type="button"とするとボタンを表示します。

属性説明
valueボタンに表示する文字を指定します。

See the Pen button by mik20621 (@mik20621) on CodePen.

type=”checkbox”

type="checkbox"とするとチェックボックスが表示されます。

See the Pen checkbox by mik20621 (@mik20621) on CodePen.

type=”color”

type="color"と書くとカラーピッカーを表示します。

表示されるカラーピッカーの内容はブラウザによって異なります。

See the Pen color by mik20621 (@mik20621) on CodePen.

type=”datetime”

日付の入力欄を表示して、クリックするとカレンダーが表示されます。

See the Pen date by mik20621 (@mik20621) on CodePen.

type=”file”

アップロードするファイルを選択するためのボタンを表示します。

ボタンを押すとファイルを選択するダイアログが表示されます。

よく使用する属性

属性説明
accept選択できるファイルの種類を指定します。
multiple指定すると複数のファイルを選択できるようになります。

See the Pen file by mik20621 (@mik20621) on CodePen.

type=”password”

入力した文字が*で表示されるパスワード入力欄を表示します。

See the Pen Untitled by mik20621 (@mik20621) on CodePen.

type=”text”

type="text"とすると1行の入力欄が表示されます。

See the Pen Untitled by mik20621 (@mik20621) on CodePen.

type=”submit”

type="submit"でフォームの内容を送信するボタンを表示します。

See the Pen submit by mik20621 (@mik20621) on CodePen.

labelタグは入力項目の見出しを記述

labelタグは入力項目の見出しを書くのに使用します。

見出しとして表示する文字を<label></label>で囲みます。

属性
forlabelの文字のクリックでも入力項目が反応するようにinputタグなどのidを指定します。

See the Pen label by mik20621 (@mik20621) on CodePen.

buttonタグはボタンを表示する

buttonタグはボタンを表示します。

buttonタグとinput type=”button” との違い
  • buttonタグは :before :after 疑似要素が使用できるのでinput type="button"よりもさまざまな装飾ができますが、ボタンの機能に差はありません。

selectタグは選択リストを表示

selectタグはリストを表示します。

属性説明
size表示する項目数を指定します。指定しない場合size="1"と同じコンボボックス形式になります。
multiple指定すると複数選択できるようになります。WindowsではCtrlShift、MacではCommandShiftで複数の項目を選択できます。

See the Pen select by mik20621 (@mik20621) on CodePen.

textareaタグは複数行の入力欄を作成

textareaタグは、複数行の入力欄を表示するにはを使用します。

See the Pen textarea by mik20621 (@mik20621) on CodePen.

よかったらシェアしてね!
  • URLをコピーしました!
目次