入力要素（form、input、select、textarea、button）の仕様と使い方

カテゴリ：HTML編

form要素

form要素はサーバに情報を送信する情報をグループ化します。
form要素内のsubmitボタンをクリックすると、そのform要素内のinput要素やselect要素、textarea要素で入力された値がサーバーに送信されます。

form要素にはaction属性とmethod属性を指定します。

action属性

action属性にはフォームの情報を送信する先のURLを指定します。

method属性

method属性にはHTTPリクエストのメソッド（GETもしくはPOST）を指定します。

GET

GETメソッドは送信する値がURLにパラメータとして追加されます。
そのため、URLで表示されても問題がない短いパラメータ、且つブックマークに登録されたり、リンクを貼られても問題がないパラメータのみを送信する場合に使用します。
※多数のパラメータや長いパラメータ値、個人情報や機密情報を含むパラメータを送信したい場合は、一般的にPOSTメソッドを指定し、SSL/TLSで暗号化する必要があります。
※検索エンジンはフォームを送信した際にパラメータが付与されたURLはインデックスしません。もしパラメータ付きのURLをインデックスさせたい場合は、フォーム以外に静的にリンクを記述する必要があります。

POST

POSTメソッドはURLではなく、リクエストのボディ部にパラメータを格納して送信します。
そのため、ユーザーはどのようなパラメータが送られたかは分かりません。
また、ボディ部で送信するため、長いパラメータ値であっても送信が可能です。
一般的に、ユーザー名とパスワードを含む場合や長いテキスト（コメントや記事の登録など）をサーバーに送信する場合に使用します。
※POSTメソッドであってもSSL/TLSで暗号化していなければ平文で送られるため、キャプチャされれば内容は分かってしまいます。
個人情報や機密情報を含む場合は、SSL/TLSで暗号化しなければなりません。

W3Cによるform要素の説明

form要素はフォーム関連要素の集合を表し、その一部は処理のためにサーバーに送信できる編集可能な値を表すことができます。

input要素

input要素は、ユーザーからの入力を求める場合に使用します。（hiddenは除く）
type属性に下記の入力形式を指定します。
※フォームの表示はWebブラウザの側の実装に依存するため、Webブラウザによって表示のされ方は若干異なります。

text

改行なし（1行）のテキスト入力ボックスを表示します。
※複数行での入力の場合はtextarea要素を使用します。

<input type="text">

search

改行なし（1行）の検索用のテキスト入力ボックスを表示します。

<input type="search">

tel

改行なし（1行）の電話番号用のテキスト入力ボックスを表示します。

<input type="tel">

url

改行なし（1行）のURL用のテキスト入力ボックスを表示します。

<input type="url">

email

改行なし（1行）の電子メールアドレス用のテキスト入力ボックスを表示します。

<input type="email">

password

改行なし（1行）のパスワード用のテキスト入力ボックスを表示します。
入力した文字は「・」で表示され視認できません。

<input type="password">

date

年月日を入力する際に使用します。
クリックすると一般的にはカレンダー形式の入力フォームが表示されます。

<input type="date">

month

年月を入力する際に使用します。

<input type="month">

week

年と週（第何週）を入力する際に使用します。

<input type="week">

time

時刻を入力する際に使用します。

<input type="time">

datetime-local

ローカルの日時を入力する際に使用します。

<input type="datetime-local">

number

数値を入力する際に使用します。

<input type="number">

range

正確な値は重要でないという特別な意味を持つ数値を入力する際に使用します。
一般的にはスライドバーが表示されます。

<input type="range">

color

色（カラーコード）を入力する際に使用します。
クリックすると一般的には色の選択ダイアログが表示されます。
色を選択すると、16進数表記のRGBカラーの値がパラメータ値として入力されます。

<input type="color">

checkbox

チェックボックスを表示します。

<input type="checkbox" value="1">選択肢1

radio

ラジオボタンを表示します。

<input type="radio" value="1">選択肢1

file

ファイルを参照して指定する場合に使用します。
クリックすると通常はローカルのファイルを参照するダイアログが表示されます。

<input type="file">

submit

フォームを送信するボタンを表示します。
クリックするとフォームに入力した内容がサーバーに送信されます。

<input type="submit">

image

画像ボタンを表示します。
src属性に画像ファイルのパスを指定します。

<input type="image" src="/image/button.png" alt="送信">

reset

入力した内容をリセット（消去）するボタンを表示します。

<input type="reset">

button

フォームの送信やリセット以外のボタンを表示します。

<input type="button" value="ボタン">

hidden

サーバーに送信したい隠しパラメータを指定します。
以下では、idという名前の123の値を持つパラメータを指定しています。

<input type="hidden" name="id" value="123">

select要素

選択ボックスを表示します。
子要素としてoption要素に選択項目を指定します。
初期状態で選択された状態にする項目にはselected属性を付与します。（属性値は省略可能）

<select>
<option value="1">悪い</option>
<option value="2" selected>普通</option>
<option value="3">良い</option>
</select>>

textarea要素

複数行のテキスト入力ボックスを表示します。

<textarea>ここに入力してください</textarea>

button要素

ボタンを表示します。
input要素のtypeでbuttonを指定した場合との違いとして、button要素の方が柔軟な使い方ができます。
input要素のボタンはテキストのvalue属性のみしか指定できませんが、button要素は値にHTML要素を持つことが可能です。
またその子要素にスタイルシートを適用する事も可能です。

<button style="background-color: greenyellow; border:solid 1px green;"><strong style="color: green;">ボタン</strong></button>

公開日時：2018年02月04日 13:19:56
最終更新日時：2022年03月12日 07:18:11