PHPで作るチャット(1) 投稿用フォームを作る

2016年8月13日(更新: 2017年12月9日)

PHPの入門として、テキストファイルをログとするデータベースが不要な簡単なチャットを作ってみましょう。

今回は、PHPを書く前にHTMLでチャット画面の骨格を作ります。

動作確認環境

以下の環境で動作を確認しています。

  • Mac OS X El Capitan 10.11.5
  • PHP 7.0.4

投稿用フォームのHTML

HTMLって何? という方はまずホームページの作り方をご覧ください。

これ以降、HTMLに関しては基本的な理解があるとみなして解説を行います。

chat.php

<!-- chat.php -->

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>1行メッセージ</title>
</head>

<body>

  <h1>1行メッセージ</h1>

  <form method="post" action="chat.php">
    <div>
      <b>おなまえ</b>
      <input name="name" type="text" size="20" maxlength="10">
    </div>
    <div>
      <b>コメント</b>
      <input name="message" type="text" size="100" maxlength="50" required>
    </div>
    <button name="submit" type="submit">送信</button>
  </form>

  <section>
  <!-- 投稿されたメッセージを後ほどここで表示する -->
  </section>

</body>
</html>

名前を最大10文字、メッセージは最大50文字としていますが、この部分は自由に変えてOKです。

結果

これで以下の様なフォームができます。

チャットのフォーム

次回から実際にメッセージを送信するためのPHPを書いていきます。

PHPで作るチャット(1) 投稿用フォームを作る」への2件のフィードバック

  1. ピンバック: PHPで作るチャット(2) ログファイルのチェックおよび作成 | JoyPlotドキュメント

  2. ピンバック: PHPで作るチャット(4) HTMLのフォームから送信されたデータを受け取る | JoyPlotドキュメント

コメントを残す

メールアドレスが公開されることはありません。