【初心者向け】inputタグを作る３つのポイント

WEBアプリでサービスを作るにあたって
inputタグ、あるいはselectタグには何を設定すればよいかわからない方向けです。

データベースに登録する値をinputタグにすることでWEBアプリケーションは
その値を受け取ることができます。

しかし、実際のWEBアプリケーションでは、
登録するデータをすべてinputタグにする必要はありません。

むしろ、inputタグにしないほうがよい場面もあります。

プロジェクトの要件によってもinputタグを使う観点が
変わるかもしれませんが、

経験上、大体これは必要だったという
inputタグを作る３つのポイントを紹介していきます。

データベースにない情報はinputタグにする

データベースにない情報をデータベースに登録するとき
inputタグを使うことはとくに問題ないですね。

新規登録するときなどはデータベースに登録する値すべてを
inputタグで用意します。

他には、Amazonなんかで10000円の商品をN個買うときのN個は
inputタグにしてユーザーに入力してもらいましょう。

ユーザーが買いたい個数というのは
商品情報を新規登録するときに存在しないので必要になります。

こちらはデータベースのデータを取得するときに使うタイプのinputタグですね。

商品を絞る時に使う商品カテゴリーを選択させたり、
金額を検索するときの範囲をinputタグやselectタグにします。

また、ユーザーのログインの時にIDとパスワードを入力しますが、
この時データベースを検索してユーザー情報を取得します。

一見、ログインと検索とで使用している言葉が異なりますが、
データベースに対しては2つとも「データを所得するときに使う」
という点で一緒です。

商品を注文する画面を想像ください。
以下は商品マスタと注文時に登録されるデータの例です。

注文時にデータベースに登録したいデータが下記だったとします。

これらデータは商品マスタなのですでにデータベースに保存されていますが、
この中でinputタグにしてよいのは、
しなければならないのは「商品のID」だけです。

何故かというと、商品のIDがわかればほかの「商品の名前」「商品の料金」は
データベースから取得できるからです。

「どのみち同じデータを注文に登録するのだからinputにしてよい」と
思われる方もいらっしゃるかもしれません。

しかし、データベースに保存するためのデータを
データベースから取得するにはセキュリティのメリットがあります。

inputタグのデータを使う都合上、hiddenで隠していたとしても
ブラウザでデータが簡単に書き換えられてしまいます。

試しに、PCブラウザであればF12を押してみてください。
書き換えることのできるツールがすぐ起動します。

inputタグに金額があるならば金額が10000円だったものを
100円に書きかえることもできます。

データベースにすでにデータがあり、受け取る必要がないなら
inputタグは要りません。

そして、inputタグがブラウザにないなら、
書き換えようがないので安全になります。

以上がinputタグを使うときのポイントです。

WEBアプリケーションを初めてつくる時は、
データベースに登録する値はinputにしてしまいがちですので、
注意したいところです。