HTML: アセったときに読む【入力・送信フォーム】
さて今回は、Webアプリを作っていると出くわす、忘れがちな内容について書いていきます。
『いや、アプリ作ってたら忘れないでしょ』と思うかもしれませんが、チームでコーディングしていると、自分がやったことがない場面に出くわすことがあります。
または、使用頻度が少なかったり、その環境に依存した書き方だったりを多用していたりして、かなり根本から忘れがちです。
忘れているだけで、見たら思い出すのですが、いちいち探し出すのは面倒です。
という訳で、今回は事始めとして『入力・送信フォーム』について書いていきます。
スポンサードサーチ
入力・送信フォーム
入力された検索条件に応じたデータの取得や、編集ページでの保存確定時に必須の機能になります。
つまりは、『ある名前とその値をサーバー側に投げたい』という事ですね。
やっていることとしては、あるURLに『userIdという名前で、その値は1000のものを、サーバーに投げる』これだけです。
サーバー側で受け取る口があれば、userId = 1000として受け取ってくれます。このようにしてデータの送信を行います。
基本の覚え方は、
- まずは、formタグで囲う
- 入力フォームは、inputタグのnameとvalueを使う
- 最後は、buttonタグをsubmitにし、送信する
細かいことは気にせずに、とりあえず上記の3つを意識していただければ、さまざまな値をサーバーに送信するための枠組みは作れるようになります。
まずはformタグ
それぞれの詳細を説明しましょう。まずはformタグで囲いましょう。そしてのちに入るinputタグや、buttonタグもすべてここにぶち込みます。
想定としては、最後にsubmitのtypeを持つbuttonが押されることで、formタグ内のinputに書かれたnameとvalueのペアを、指定されたURLに送信します。
この感覚を覚えるようにしましょう。
実際にコードで見ていくと、
<form method="GET" action="User/Index">
</form>となります。
methodはHTMLのHTTPメソッドを指定するためです。
基本的に、データを取るだけならばメソッドはGET, データが変更される場合はPOSTで投げましょう。
actionは、送信したいURLになります。サイト名の部分は省略してもOKです。勝手に『今いるサイト』であるという事は認識してくれます(いわゆる、相対URLというやつです。古パスにしたら絶対URLと言います)。
そして、.net coreを使っている方なら、タグヘルパーを使って、formの部分は以下のようにもできます(UserControllerで、Indexのアクションに送りたいとする)。
<form method="get" asp-controller="User" asp-action="Index">
</form>少し表記が違いますが、惑わされないようにしましょう。
inputタグ(nameとvalue)について
そして次に、formタグの中でinputタグを定義します。
こちらが実際の入力フォームになりますので、サイトによってはめちゃめちゃ凝る部分になります。
しかし、こちらも覚えることは簡単で、基本はinputタグの中のname とvalueで決まります。nameはいわゆる変数名。そして、valueがユーザが入力した値が入ります。
また、最初からデフォルトで値を入れておきたいという場合にもvalueに値を設定します。
<form method="get" action="/User/Index">
<input asp-for="@UserId" placeholder="ユーザーID"/>
</form>
しかしながら、inputタグの入力フォームは、いくつか型があります。サーバーに送る値に応じてtypeを設定するようにしましょう。
例えば、文字列であればtype=”text”ですし、int型であれれば、type=”number”と指定しましょう。
<form method="get" action="/User/Index">
<input asp-for="@UserId" placeholder="ユーザーID"/>
</form>
他にもいろいろなタイプがあるので必要に応じて設定しましょう。しておいた方が後でハマる可能性は少なくなります。
>>inputタグのいろんなtypeについて
また、このinputタグだけですと、何の項目の入力なのか分かりません。
そこで、inputタグの前にlabelタグを指定することで、分かりやすくします。ここはlabelタグじゃなくてもいいかもしれませんが、ここではlabelタグを使用します。
<form method="get" action="/User/Index">
<label>ユーザーID：</label>
<input name="UserId" value="" type="number"/>
</form>
このようにして、入力フォームが何を入力すべきなのかユーザーに明示します。
また、labelが邪魔な時もあるでしょう。入力フォームに薄い字で『入力すべき項目』が書かれていれば良い。そういう時は、プレースフォルダという機能を使います。
<input name="UserId" value="" type="number" placeholder="ユーザーID"/>
以上がinputタグです。基本はnameとvalueを使って送信項目を作る、と覚えてください。
ちなみに.net coreで書くならば、
<form method="get" asp-controller="User" asp-action="Index">
<label asp-for="@UserId"></label>
<input asp-for="@UserId" placeholder="ユーザーID"/>
</form>というように『asp-for=”…”』とタグヘルパーを書くだけで簡単に書くことができます。
締めのbuttonタグにsubmit
最後になります。以下のように、buttonタグにsubmitを定義しましょう。
このボタンが押されることで、formタグ内のinputタグに入力されたデータが、指定されたURLに飛びます。
変数はUserId(name)で、値(value)は入力された値です。
<form method="get" action="User/Index">
<label>ユーザーID</label>
<input name="UserId" value="" type="number"/>
<button type="submit">検索</button>
</form>
submitの書き方は、buttonでもいいですし、inputでも良いみたいです。
参考に、『submitのinputとbuttonについて考えてみた』系の記事がありますので載せておきます。
>>【HTML】input type = “submit” と “button” の違いって・・・？
こちらの記事でも、よく分からないで終わっているそうですが、色々調べてみると、buttonタグにsubmitと書いたケースの方に軍配が上がっているような気がします。
まとめ
- まずは、formタグで囲う
- 入力フォームは、inputタグのnameとvalueを使う
- 最後は、buttonタグをsubmitにし、送信する
を意識してフォームの入力と送信を行いましょう。
これでしばらく忘れません。