#4-5表とフォームの作成(HTML Tables and Forms)

What I learned today ー今日の学びの復習（目標執筆時間：15min/lesson）
#4 How to insert table
・表を作るのに使うのは<table></table>
セルの幅はwidth で調整
表に格子を付ける場合はborder ="1"（ただしCSSで書いた方が見やすいのでこの書き方はおすすめではないとのこと。CSS学習がまだの人向け。）
ex)
<table border="1" width="300px">

tr : Table Row. To define a row inside a table
　<tr></tr>までで1行。
th : Table Head.
td : Table Data
<tr></tr>で<th></th>や<td></td>を挟む。
デフォルトでは、<th></th>で挟んだelementはボールドで中央寄せに、
<td></td>で挟んだelementは太字にはならず左寄せになる。

・表内に複数のthやtdを入力する場合、th*nやtd*n(n=必要な要素の数)のように入力しtabないしenterを押すと、n行分のth やtdを自動で出力してくれる。

・表内のグループ化
thead : group the contents.
→表の1行目など、その表が示す項目の一覧を入力する行を
<thead></thead>で括り、グループ化する。
t body :  group the contents.
→表の中身をグループ化する。thead同様、<tbody></tbody>で括り、グループ化する。

・How to merge the multiple cells
1. 結合したいセルの部分も合わせて表内のelement（thやtd）を入力。elementは空（blank）にしておく。
2. blanlのelementを<!-- -->でコメントにするか、（もしくは削除）
3. 列の結合の場合は colspan="結合するcellの数"、行の結合の場合は"rowspan="結合するcellの数" を入力。
ex) 
<th colspan="2">Contact Numbers</th>
<th rowspan="2">Contact Numbers</th>

note) もし空のelementを削除orコメント化しなければ、そのセルの分のスペース分が表の外に押し出されてしまう。

（ここまでの執筆に20分かかった。。）

#5 How to create Forms
・Formを作るsyntaxは次の通り
<form action=""></form>
actionはaubmitされたデータがどこに行くかを決めるのに必要
PHPの学習を始めたらより理にかなっているsyntaxだと分かるようになるらしい。

・入力内容を示すのに使うのは<label></label>
<label for="input-id">Label Name</label>
forの入力内容は<input>に入力するidと同じでなければいけない。
<label></label>は何を入力するか示すもの、<input>は実際にそれが何かを定義するもの、と考えたら分かりやすいかな。

<label for="input-id">の""内はlower caseで入力するのが原則。

・今日練習したフォームの入力内容
＊Text Input
＊Password Input
＊Number Input: 入力できる数値の大きさを限定できるが、それは後日のレッスンで
＊Date: パソコンの設定によって（年/月/日の順やdate/month/yearになったりする。PHPで直せる）
＊Text Area: 大きさはブラウザ上でドラッグして変えることもできる。<input>ではなく<textarea>と入力すると、
<textarea name="" id="" >という風に必要な内容が自動で出力される。この<>内にcols=""とrows=""を加え、コメント欄の大きさを調整する。
＊Radio Button: 選択式回答を作るのに使う。その場合、input typeで"radio"を指定。ブラウザ上で選択した○が選択肢のvalueであることを定義する必要があるので、value=""の入力が必須。
具体的なsyntaxの例は次の通り。
<input type="radio" name="tech_company"
id="microsoft" value="microsoft">

ここで、name="tech_company"は、tech_companyというグループを作る役割を果たしている。選択肢は全て同一のnameでなければいけない。
もし違うnameが与えられた場合（ex. name="techCompany"）、それは違うグループになってしまうので、一択式のフォームなのに、複数選択肢が選べるようになってしまう。

note) HTMLはweb pageの骨格作り。デザインはCSS。

（ここまでの執筆で13分。2コマの復習には33分かかりました。投稿まですると、合計40分かかります。言語化して復習すると、そのsyntaxの意味が理解できるので、この時間は削りたくないところ。）