読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

ゲストブック作成 - データ追加機能

PHP+MySQL

データ追加機能を作る

  • 追加画面(index.php
  • 追加確認画面(confirm.php
  • 追加完了画面(submit.php

追加画面の基本構造

f:id:webmaster-web:20160613011734p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ゲストブック</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>ゲストブック</h1>
<form method="post" action="confirm.php">
<table>
<tr>
<th>名前</th>
<td><input type="text" name="m_name" class="msg"></td>
</tr>
<tr>
<th>メールアドレス</th>
<td><input type="text" name="m_mail" class="msg"></td>
</tr>
<tr>
<th>メッセージ</th>
<td>
<textarea rows="5"name="m_message" class="msg"></textarea>
</td>
</tr>
</table>
<input type="submit" value="確認する">
</form>
</body>
</html>


《style.css

@charset "UTF-8";

#container {
  width: 580px;
  margin: 50px auto;
}
table {
  border: 1px solid #AAA;
  border-collapse: collapse;
  margin-bottom: 10px;
}
th, td {
  border: 1px solid #AAA;
  padding: 10px;
}
th {
  text-align: left;
  background: #EDEDED;
}
input, textarea {
  font-size: 16px;
}
.msg {
  width: 400px;
}