formをつくってみた。

お問い合わせフォームとかのあれ。
しっかり理解していなかった。
いつもコピペで対応してた。
そうフォームは難易度が高いのだ。

ので

しっかり理解するために学校で用意してもらってる動画を見ながら勉強。
片っ端から不明点をググる。とにかくググる。
人が作ったフォームボタンを検証する。
cssどうやってるのかわからんやつもあったけど、書き方と属性やタグは理解できたと思うのでまとめます。

・formタグ

フォーム全体を囲むタグ。閉じタグ要。このフォームタグの中に項目（タイトルみたいな感じ）
と入力項目を入れて行きます。
【書き方】
<form action=“○○” method=“○○”></form>

・action属性

formタグの後に続く属性。フォームの送信ボタンを押したあとに送信されるデータの送信先のURLを○○の中に入力する。システムのお話になるのでちょっと難しい。

・method属性

formタグの後に続く属性。フォームの入力内容のデータを送信するときの転送方法。
postとgetがある。○○の中にgetかpostを入力する。
問い合わせフォームの場合はpostにするのが一般的。

・Inputで入力フォームをつくる

作成するには<input type=“○○” name="〇〇>と記述。閉じタグなし。

・type属性（必須）

type=“○○”の中には表示されるテキストフィールドの種類を書く。
例）text, email,tel,radio,checkboxなど

・name属性（ほぼ必須）

name="〇〇はなくてもエラーにはならないがほとんどの場合記入。name属性は入力項目の内容をプログラミング言語で操作するときに使用する。
入力項目を管理する目的があり、class名やid名のようなものらしい。半角英数字で入力項目に関連する自由につけることができる。
例）名前　name=”youename”

・labelタグ

これ１番ややこしかった。
使ってるとこと使ってないとこがあっていつ使うねん！と思ってたタグ。

項目と入力のフィールドを連動させるタグ。
これだけ書いたらはぁ？ってなる。
名前のテキスト（項目）の横に入力フィールドがあって
項目をlabelタグで囲んでおくと
名前のテキストを押しても入力状態にできるということ。
めちゃくちゃ理解！！

li aのタグがあって
liにpaddingつけてしもたらaタグの部分しかリンク領域にならない感じとにてるなと思ったけど、ちょっとちゃうか。。。？
【書き方】
<label for=" ○○”>名前</label>
<input type="text" name="yourname" id=“〇〇” >

labelのあとfor=" ○○と　inputの中の id=“〇〇” は同じ名前（半角英数字）を書く。
これで項目とフォームを連動させる！
理解！めちゃくちゃ理解！！

・textareaタグ

お問い合わせフォームなどの文字数の多い入力項目に使用するタグ。input type-“〇〇”ではなく単独のタグ
【書き方】
<textarea></textarea>と記述する。タグの中にはなにも書かなくてOK。閉じタグが必要。

・placeholder属性

入力項目にあらかじめうすーい文字でサンプルの書き方などが入ってるあれの設定に使用する属性。
Inputの中に書く。placeholder属性を書かなければ何も表示されない。
【書き方】
<input type="text" name="yourname" placeholder="岡本太郎">

・selectでセレクトボックスをつくる

ボタンをクリックするとプルダウンで選択できるセレクトボックス。
Optionタグをselectタグで囲います。全部閉じタグ必要。
【書き方】
<select>
<option value=“ringo”>りんご</option>
<option value=“gollira”>ゴリラ</option>
<option value=“lunchpack”>ランチパック</option>
</select>
value=“〇〇”はあとで書きます。

・ラジオボタンをつくる

type=“○○”の中をradioと記述。
複数の選択肢から１つだけ選択できるのがラジオボタンの特徴。
他のものを選択すると、もともとチェックの入ったいたものは外れる。labelタグでfor、inputタグでidを設定すると項目とチェックボタンを連動できる。
複数項目があるのでそれぞれの項目ごとにforとidは違う名前にしておかないといけない。idは１回のみしか使えないのと同じ。
最初からどれかにチェックを入れておきたい場合はinputタグの中にcheck=”checked”と記述する。
【書き方】
<input id="male" type="radio" name=“seibetu” value="male"><label for="male">男性</label>
<input id="female" type="radio" name="seibetu" value="female"><label for="female">女性</label>

・チェックボックスをつくる

type=“○○”の中をcheckboxと記述。
選択肢の中から複数チェックが可能。
ライオボタンと同じようにlabelタグでfor、inputタグでidを設定すると項目とチェックボタンを連動できる。
<input id=“apple” type="checkbox" name=“food” value=“りんご”><label for="apple">りんご</label>
<input id=“orange” type="checkbox" name="food" value=“みかん”><label for="orange">みかん</label>
<input id=“udon” type="checkbox" name="food" value=“うどん”><label for=“udon”>うどん</label>

・セレクトボタン、ラジオボタン、チェックボックスのvalue属性について

optionタグ、inputタグに書くvalue=“〇〇”は「値」と呼び
どの項目が選択されたかをプログラム側で判断するためのもの。送受信の際に必要。これまた難しい内容だけど、
セレクトボタン、ラジオボタン、チェックボックスの時には必ず記述する必要。項目の英数字で自由な名前でOK。

・name属性でグループ化

上に書いたチェックボックスのname属性は全部、「food」になってます。
その下に別のグループを追加した際に、name属性をfood以外の別のnameをつければ
別グループと認識される。ラジオボタンでもチェックボックスでも同じ。

・submitで送信ボタン、resetでリセットボタンを作る

送信ボタン　<input type=“submit” value=“〇〇”>
リセットボタン　<input type=“reset” value=“〇〇”>
value=“〇〇”のところにボタンに入れたい文字入れるだけ！

・余談

<form>
名前<input type=“text” name=“name”>
</form>
で書いていっても文字と入力項目は縦に並んで行きますので、
<div>や<p>で囲むこと！普通にクラス名とかつけないと装飾できませんねん。
細かい装飾はもちろんCSSでやるのですが、またこれが一癖も二癖もありそうなのでまた次回まとめたいと思います。

本来はこれが作りたいんです。