HTMLで「お問い合わせ」を作って遊んでみる。(見た目を作って遊ぶだけ。作動はしません)

Webページでよく見る「お問い合わせフォーム」。こんなやつ。





これは見た目だけ作っています。 ↑ 「送信」ボタンを押しても作動しません(作動させるには、HTMLではない他のプログラミング言語が必要です)。

今回は、WordPressやAtomエディターで作ることができるので、遊んでみました。コードを貼っておくのでよかったら試してみてください。

結論、全体としてこんな感じのコード。

<label for="name">氏名</label>
<input type="text" id="name" placeholder="本名を入力してください"><label for="message"メッセージ></label>
<textarea id="message" placeholder="140文字以内でお願いします。"></textarea>
<button>送信</button>

記事内で手順を解説します。

WordPressは、コードエディターで遊べます。

コードエディターを使う
Atomエディターは、Plain Textを「html」に設定してコードを作成後、保存してから、Google Chromeにドラック&ドロップ

ドットインストールのHTML基礎文法入門を参考にされてもいいです。(参考:AtomエディターはPCに導入する必要があります。【入門】プログラミング(HTML)の学習環境を作る。無料Google chromeなどでカンタン

Atomエディターを使うにはHTMLへ

本記事では、「氏名」「メッセージ」「送信」フォームを作ります(動作しない、見た目だけのやつです)。

✔️本記事の内容

  • 「お問い合わせ」に氏名を書くやつ
  • 「お問い合わせ」にメッセージを書くやつ
  • 送信ボタン

これは、ドットインストール#20〜#22で学んだ内容です。よかったらドットインストールを見てみてください。

「お問い合わせ」に氏名を書くやつ


これですね。

「お問い合わせ」には、氏名を入力する欄があります。

これを作るには、コードはこれ。

<label for="name">氏名</label>
<input type="text" id="name" placeholder="本名を入力してください">

以下、作る手順です。

「お問い合わせ」に氏名を書くやつ:手順①ラベル

ラベルを作ります。

<label for="name">氏名</label>

labelタグに、for属性で”name”という属性の値として、紐付けの準備。

「お問い合わせ」氏名を書くやつ:手順②type属性でテキスト、id属性で紐付け、placeholder属性でガイド作成

記入するフォームを作ります。inputタグを使います(inputタグは「空要素」というものなので、</>のような閉じタグはいりません)。

<input type="text" id="name" placeholder="本名を入力してください">

type属性でテキストを作成し、入力するやつを作る。id属性で、ラベルで書いたfor属性と紐づくよう値を”name”にする。placeholder属性でガイドを作成し、何を書けばいいか表示されるようにする。

「お問い合わせ」にメッセージを書くやつ


次は、これ。「お問い合わせ」にメッセージを書く欄。

作るには、コードはこれ。

<label for="message">メッセージ</label>
<textarea id="message" placeholder="140文字以内でお願いします"></textarea>

以下、作る手順です。

「お問い合わせ」にメッセージを書くやつ:手順①ラベル

ラベルを作ります。

<label for="message">氏名</label>

labelタグに、for属性で属性の値を”message”として、紐付けの準備。

「お問い合わせ」メッセージを書くやつ:手順②textareaタグの作成、id属性で紐付け、placeholder属性でガイド作成

記入するフォームを作ります。

<textarea id="message" placeholder="140文字以内でお願いします"></textarea>

textareaタグを作成し、入力するやつを作る。

id属性で、ラベルで書いたfor属性と紐づくよう属性の値を”message”にする。placeholder属性でガイドを作成すると、何を書けばいいかが表示されるようにする。

送信ボタン

こんなやつですね。

カンタンです。

<button>送信</button>

buttonタグでコンテンツを挟むだけ。

以上となります。

動作させるにはPHPなど他の言語を使う必要がありますが、まずはHTMLで「お問い合わせフォーム」を作って遊んでみると「お、、自分でできてる」という感じを得られました笑

ドットインストール#20〜#22で学んだ内容です。よかったらやってみてください。では!