【HTML】基本のお問い合わせフォームを作る【day60】

HTML/CSS

プログラミング独学day60の学習で、得たことや気づきを教えて!

今日は

・【HTML】基本のお問い合わせフォームを作る

をアウトプットします!

 

 

 

こんにちは。プログラミングでweb制作ができるようになりたいharuです。

2歳0歳の育児をしながら、22時〜1時に独学しています!

→プログラミング学習day60、もりけん塾day15

 

わかったことや、気付きをログに残します。

同じく初学者の人が、これをみてインプットや復習ができるように書いていきます。

 

【HTML】基本のお問い合わせフォームを作る

今日は、模写でお問い合わせフォームを作ったのでアウトプットです。

(Evernoteにメモする話)

お問い合わせフォームは、Progate初級編でやったはずだけど、理解が浅かったのでググりました。

Progateやって終わりじゃなくて、自分で理解→メモして検索できるようにした方がいいですね。

わたしは、jQueryやってるあたりでそれに気づいて、途中からはEvernoteに集約するようにしています。あとで検索したり、追記したりして理解が深まります。

まとめ直さなくても、ググったサイトを貼ったり、後からググる手間を減らせるように工夫してます。

完成物

模写は、クリ★スタさん(@cresta_design)のコーディング課題初級より。

シンプルなお問い合わせフォームです。

 

テキストフィールド(一行)

名前や電話番号など、1行で記入するものはinputタグを使います。

<input type="text" name="yourname">

 

type→テキストフィールドの種類を指定します。

  • type=“text”
  • type=“number” →半角英数字のみ
  • type=“email”   →メールアドレス以外を入力するとエラー文出る
  • type=“tel"

など。

name→入力の項目を管理するもの。自由につけて大丈夫だけど、入力内容を英語で書くのが一般的。

  • name=“yourname”
  • name=“tel”

など。

*id/classのようなもので、JavaScriptやPHPで記入してあるデータを扱うときに使う。けど、とりあえず書く。

 

・実際に作って見ます。

名前<input type="text" name="yourname">

名前

 

複数行のテキストフィールド

複数行にコメントを入れることのできるテキストフィールドは、textareaタグを使います。

<textarea name="comment"></textarea>

項目名をクリックしたら、連動してテキストフィールドが選択される

ちょっとわかりにくいタイトルですが;

完成物はこちら↓ ※「名前」をクリックしてください。


名前をクリックすることで、テキストフィールドが勝手に選択されます。
ユーザーにとって使いやすいフォームになります。

<label for="name">名前:</label> <input id="name" type="text" name="yourname">

①上記のように、labelタグを使って項目(今回は”名前”)をマークアップします。

②forとidを同じにすることで、labelとinputの連動ができます。
同じであれば入力はなんでもOK。今回はnameとしました。

番外編:フォーム内にサンプルテキストを表示

これは、WordPressテーマ「Write」を模写したときの復習です。

上記のように、フォームの中に薄いグレーの文字で「検索...」と表示することができます。(ユーザーが実際に文字を入力すると、例文は消えます。)

 

<input type="text" placeholder="検索...">

placeholder属性を使うことで、サンプルテキストを表示できます。

 

・ちなみにplaceholder内のテキストスタイル変更をする方法

font-size: 12px , color: redにしたいときは、CSSで以下のように記述します。

input::placeholder {
    font-size: 12px;
    color: red;
}

 

あとがき

復習メインになってしまいましたが、フォームの基本をしっかり理解できたのでよしとします。
次からはEvernoteで検索します。

 

ちなみに、今日で独学開始から丸2ヶ月!

積み上げがんばっていきます!
今日は以上です。

 

Thanks:師匠「もりけんさん」(@terrace_tec)

もりけんさんのHPはこちら

タイトルとURLをコピーしました