プログラミング独学day60の学習で、得たことや気づきを教えて！
今日は
・【HTML】基本のお問い合わせフォームを作る
をアウトプットします！
こんにちは。プログラミングでweb制作ができるようになりたいharuです。
2歳0歳の育児をしながら、22時〜1時に独学しています！
→プログラミング学習day60、もりけん塾day15
わかったことや、気付きをログに残します。
同じく初学者の人が、これをみてインプットや復習ができるように書いていきます。
【HTML】基本のお問い合わせフォームを作る
今日は、模写でお問い合わせフォームを作ったのでアウトプットです。
（Evernoteにメモする話）
お問い合わせフォームは、Progate初級編でやったはずだけど、理解が浅かったのでググりました。
Progateやって終わりじゃなくて、自分で理解→メモして検索できるようにした方がいいですね。
わたしは、jQueryやってるあたりでそれに気づいて、途中からはEvernoteに集約するようにしています。あとで検索したり、追記したりして理解が深まります。
まとめ直さなくても、ググったサイトを貼ったり、後からググる手間を減らせるように工夫してます。
完成物
模写は、クリ★スタさん(@cresta_design)のコーディング課題初級より。
シンプルなお問い合わせフォームです。
テキストフィールド（一行）
名前や電話番号など、１行で記入するものは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;
}
あとがき
Thanks：師匠「もりけんさん」(@terrace_tec)
もりけんさんのHPはこちら
