omachizura

ホームページの基本的なことからスタートし、WEBアプリの開発までできるスキルを紹介します。


htmlで入力したデータをサーバ側に送信する方法 その1

下記のような画面で、商品名と単価を入力して登録ボタンを押したら、データベースにデータが登録されるような処理の実装例を紹介します。

商品マスタ
商品コード商品名単価
1ペン100
2ノート200
商品名: 単価:

商品マスタを出力する処理は サーバ処理の基本 で紹介した通りです。商品名や単価のテキストボックスを出力をするhtmlは下記のようになります。

商品名:<input type="text">
単価:<input type="text">
<input type="button" value="登録">

クライアントからサーバへデータを送信(submit/サブミット)する

クライアントからサーバへデータを送信することをsubmitと呼びます。

データを送信できるもの

送信できるものは基本的にユーザが入力・変更できるものです。例えば<input>(テキストボックスなど)、<select><textarea>があります。

ユーザに変更させず、サーバ処理での制御用に隠し項目のような感じで送信したい項目は<input type="hidden">を使用することが多いです。

ただし、隠し項目とはいえ、htmlとして出力されているため、画面には表示されませんが、出力されたソースを見るとユーザはこの値を見ることができるので、パスワードなどをhiddenに持たせるのはやめましょう。

hiddenに限らず、秘密にしたい情報はクライアント側に出力しないように注意が必要です。

フォーム(form)の基本的な使い方

サーバに送信するときは、コントロールを1つ1つ送信するのではなく、送信したいコントロールをformタグで囲んで、formを送信します

formという箱にコントロールを詰め込んで送信するというイメージです。なので送信したいコントロールをformタグで囲みます

<form>の属性にaction="submit先のURL"(省略時は現在のページ)を指定します。

<form>の属性にmethod="post"を指定します。postに関しては GETとPOSTの違い で詳しく説明します。

フォームを組み込んだhtmlは下記のようになります。

<!-- 今回は遷移先画面を同じページ(ファイル)にしたいので、action属性の値はセットしません-->
<form action="" method="post">
  商品名:<input type="text">
  単価:<input type="text">
  <input type="button" value="登録">
</form>




前へ
1

  • ホームページの仕組み・基本

    ホームページとWEBアプリケーションの違いは、ホームページとは基本的に作成者が一方的に情報を公開するサイトのことを差します。


  • WEBアプリの仕組み・基本

    WEBアプリの基本的な仕組みを説明します。まずは、WEBアプリで頻繁に登場する用語の説明を交えながら、ホームページの仕組みについて復習します。


  • サーバ処理の基本

    サーバ処理でhtmlファイルをそのまま出力している場合は、データが変わるごとに、htmlファイルを書き換えなければなりません。


  • aspの基本的な文法

    aspの基本的な文法について説明します。サーバ処理以外の箇所は普通のhtmlと同じように、そのまま出力されます。サーバ処理で変数などを出力したい場合はresponse.write(出力する変数など)を...


  • htmlで入力したデータをサーバ側に送信する方法 その1

    classic aspでhtmlで入力したデータをサーバ側に送信する方法ついて説明します。下記のような画面で、商品名と単価を入力して登録ボタンを押したら、データベースにデータが登録されるような処理の実...


  • htmlで入力したデータをサーバ側に送信する方法 その2

    classic aspでhtmlで入力したデータをサーバ側に送信する方法ついて説明します。サーバ側ではコントロールのname属性をキーに値を取得するので、それぞれのコントロールにname属性を指定しま...


  • GETとPOSTの違い

    GETとPOSTの違いについて説明します。formのmethod属性には、GETとPOSTの2種類があります。method属性では送信(リクエスト)の方法を指定しています。何も指定しない場合はGETで...


  • サーバ処理でクライアントからの情報を取得する方法

    classic aspでサーバ処理でクライアントからの情報を取得する方法について説明します。クライアント側からサーバ側への送信処理は実装できたので、次はサーバ側でデータの登録を行う処理を実装します。


  • 登録時にデータの入力チェックを行う方法

    classic aspで登録時にクライアントとサーバでデータの入力チェックを行う方法について説明します。誤って不正なデータを登録してしまうのを防ぐために、ユーザが入力した内容をチェックする処理を実装し...


  • 入力エラー時にテキストボックスの値を保持する

    classic aspで入力エラー時にテキストボックスの値を保持する方法について説明します。現状では、入力チェックでエラーになった場合、ユーザがテキストボックスに入力した値がクリアされてしまいます。入...


前へ
1