HTMLでコメントボックスを作成する方法

2024-02-09 23:49 HTML コメントボックス フォーム

まず、HTMLファイルを作成し、以下のコードを追加します。

<!DOCTYPE html>
<html>
<head>
<style>
.comment-box {
  width: 300px;
  height: 100px;
  border: 1px solid #ccc;
  padding: 10px;
}
</style>
</head>
<body>
<h2>コメントボックス</h2>
<form>
  <textarea class="comment-box" name="comment" placeholder="コメントを入力してください"></textarea><br><br>
  <input type="submit" value="コメントを投稿">
</form>
</body>
</html>

上記のコードでは、<textarea>要素を使用してコメントボックスを作成しています。class="comment-box"というクラスを指定して、CSSでコメントボックスのスタイルを設定しています。name="comment"という属性を追加して、コメントボックスの値をサーバーに送信する際の識別子とします。

<form>要素内にコメントボックスと投稿ボタンを配置しました。コメントボックスにはplaceholder属性を指定して、初期表示時にヒントテキストを表示しています。

フォームを送信するためのボタンには、<input>要素を使用しました。type="submit"を指定して、フォームのデータを送信します。

このコードを実行すると、コメントボックスと投稿ボタンが表示されるはずです。ユーザーはコメントボックスにテキストを入力し、投稿ボタンをクリックすることでコメントを送信できます。