このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

web帳

記事詳細

2011.03.29

MySQL ブラウザから操作するページ作成02 HTML作成

前回の

MySQL ブラウザから操作するページ作成01 データベース作成

続きで今回はHTMLの準備を行います。

webブラウザ上で、データの参照(全件)、データの検索、データの追加、データの更新、

データの削除 を行えるようにフォームの用意を行います。

ファイル名はcommand.html とします。

(doctype,title,css等は省かせて頂きます。)

では、コマンドページっぽくh1でタイトル表記

[code]<h1>MySQLコマンドページ</h1>[/code]



テーブルの用意。

[code]<table cellpadding="0" cellspacing="0"></table>[/code]

それぞれのコマンドの用意を行います。

テーブルの中身にフォームを設定。

データの参照

[code]
<form action="#" method="post">
<tr>
<td><input type="submit" value="データの参照" /></td>
<td>全件表示</td>
</tr>
</form>[/code]

データの検索

[code]<form action="#" method="post">
<tr>
<td><input type="submit" value="データの検索" /></td>
<td>ID : <input type="text" name="id" size="4" />
店名: <input type="text" name="name" size="40" />
住所: <input type="text" name="add" size="40" />
</td>
</tr>
</form>[/code]

データの追加

[code]<form action="#" method="post">
<tr>
<td><input type="submit" value="データの追加" /></td>
<td>
店名: <input type="text" name="name" size="40" />
住所: <input type="text" name="add" size="40" />
</td>
</tr>
</form>[/code]

データの更新

[code]<form action="#" method="post">
<tr>
<td><input type="submit" value="データの更新" /></td>
<td>ID: <input type="text" name="id" size="3" /></td>
</tr>
</form>[/code]

データの削除

[code]<form action="#" method="post">
<tr>
<td><input type="submit" value="データの削除" /></td>
<td>ID: <input type="text" name="id" size="3" /></td>
</tr>
</form>[/code]

それぞれ用意します。

css等での調整は各自でよろしくお願い致します。

これでコマンドページのHTMLは終了。

 

つづきはこちら
MySQL ブラウザから操作するページ作成03 PHPファイル作成

  • RSSを登録する

  • follow us in feedly

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、港区六本木で活動中。

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。