Help us understand the problem. What is going on with this article?

Formを送信する

はじめに

formを送信することがたまにあるのですが、実際ぼんやりとしかわかっていませんでした。
送信ボタン押したらサーバ側で色々やってくれる、という認識でしかありませんでした。
この機会に、送信ボタンを押すことで入力したデータがどうなっているのか、
また、入力するための各タグや属性はなんの意味があるのか改めて調べましたので、その備忘録です。
もし、間違っていることがありましたら、指摘いただけると嬉しいです。

formを送信(submit)すると起きていること

①formタグに囲まれた必要な属性のパーツがsubmitボタンを押すことで送信される。
②送られてきたデータに応じて返す。
form_submit.jpg

その際に、method属性を用いてサーバから返してもらうものを指定する。

GET

サーバにリソースを送ってもらうよう要求する。
そのための目印としてパラメータにサーバが必要としているデータをつけて送る。

POST

サーバに送ったデータを元に結果を返してもらうよう要求する。
そのために指定された形で必要なデータを送る。

サーバ側が必要としているデータの形でデータを送るために、formタグやinputタグの中身に属性等を指定することでデータの形や数を制限したりしている。

formタグ

入力、送信フォームを作ることができる。
中に<input> <select></select> <textarea></textarea>タグを使って
ラジオボタン
チェックボックス
テキスト入力ができるエリア
submitボタン
など、フォームに必要なパーツを置ける。
(今回記述する属性はよく使うものだけにします。)

action属性

フォームに入力されたデータをsubmitで送信できる。(submitの詳細は後述)
formタグのactionに記載したurlへデータが送られる。
<form action="hoge.php"></form>

method属性

送信方法を指定することができる。
GET:送信内容がurlのパラメータにくっつく形で送信される
POST:本文として送信される
<form action="hoge.php" method="POST"></form>
※特に指定しない場合はGET
※urlの長さには制限があるため、ちょっとした識別番号等はGETでよいが、長文を送りたい場合はPOSTの方がよい
※inputやbuttonで作成するsubmitボタンにformmethod属性をつけている場合は、formタグのmethodの方が優先される

enctype属性

送信するデータの形式を指定することができる。

  • application/x-www-form-urlencoded:key=valueを&で繋ぐ形式
  • multipart/form-data:ファイルを含むデータ(画像のアップロード等)
  • text/plain:テキストのみ

※特に指定しない場合はapplication/x-www-form-urlencoded

name属性

フォームに名前をつけることができる。
重複しないようにわかりやすい名前をつけるとよい。

target属性

送信結果をどのフレームに表示するか指定することができる。
_blank:新規ウィンドウへ表示
_self:現在のウィンドウへ表示
_parent:親フレームに表示
_top:フレーム分割を解除してウィンドウ全体に表示

inputタグ

フォームを構成する様々なデータを入力できる要素。
type属性をつけることによって、入力できるものを指定することができる。type属性のデフォルトはtext。
ここでは、よく使うtype属性を紹介する。

type属性

text

一行のテキストボックスを作れる。
データが送られる時、name属性と一組みになって送信される。

tel

電話番号入力欄を作れる。
とはいえ、入力形式が強制されているわけではなくtextと振る舞いは一緒。
telにすることで、スマホのキーボードを数字で最初から表示してくれるメリットはある。

password

パスワード入力欄を作れる。
入力すると、ブラウザ上では*に置き換えられて表示される。
ただ、入力データが暗号化されて送信されるわけではないので、取り扱いには気をつける。

file

サーバに送るファイルを選択するエリアを作れる。
ファイル名を入れる欄と参照ボタンが表示される。

submit

フォームの送信ボタンを作れる。

その他の属性

max

入力できる最大文字数を指定できる。

required

その項目を入力必須にできる。

おわりに

今回は私がよく使う属性だけを記載しましたが、この他にもまだまだたくさんの属性があります。
間違っていたり、補足等ありましたらコメントいただけると嬉しいです。

引用元

formタグについて
inputタグについて

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした