ドットインストールでHTMLを学ぼう #19~#21
ドットインストールのおかげで少しずつHTMLがわかるようになってきて
調子に乗りつつあるぽんきちさんです。
あとできっと鼻をへし折られることと思いますががんばります。
今日も楽しく勉強だ！
最初の画像にアイキャッチをつけたら、画像が中央に寄せられてしまい
どのようにして治したらいいか全くわかりません。
HTML編集モードにしても全くわかりません。
さっそく鼻がへし折られましたが続けましょう。
#19 textarea、buttonタグを使ってみよう
おお！textareaは、progateでも学びました。
きっと覚えているはず！（フラグ）さあ、やってみましょう。
前回、#17、#18で習った入力タグは、1行の文を入力することが想定されていました。
textareaは、複数の行を入力できるようにするものです。
inputタグと違い、閉じタグが必要です。
textarea
<textarea></textarea>
このようにタグで囲んだ部分に入力することになります。
name
name属性は、データを送信した時の名前になります。
cols、rows
cols属性はサイズや幅を、rows属性は高さを指定します。
#18で学んだように、maxlengthやplaceholderを使うこともできます。
texeareaの中に初期値を入れておくと、最初から表示されるようになります。
「コメント」と中に書いておくと、
最初から「コメント」と書かれていますね！
button
#17、#18で学んだように、input type="submit"
以外にも、buttonタグでもボタンを表現することができます。
むしろ「ボタン」でわかりやすい。＾皿＾
buttonタグには、閉じタグが必要です。
<button></button>
このように使います。
bottonも、inputと同じようにtype="submit"と書くのですね。
そして、buttonタグで囲まれたところの文字が出てきます。
inputと違って、中にさらにタグが入れられるので
strongで強調することもできるのですね。
また、bottonのtypeには
submitのほかにbottonというものもあって、
フォームを送信しないけれど何らかの処理をするボタンをつくることができます。
これは、Java Scriptを使うそうなので私はまだわかりませんね＾＾；
さて、実際にどのように見えるのかを見てみましょう。
一番上の「送信！」が、strongで強調されたbottonタグ。
二番目の「処理をする！」が、先ほどのまだ私には使えないbottonタグ。
三番目の「送信！」が、inputタグで作ったものです。
disabled
disabledという属性は、入力部品を無効化するものだそうです。
これを入れると、何かが入力されないと送信できないようにしたりできるそうです。
こうすると、この欄は何も入力できなくなるし、
ボタンも押せなくなるそうです。
これはのちにJava Scriptを学んだときに見直そうと思います。
（なので、今は覚えなくてもいいと思い込んでいるぽんきちさんでした）
#20 checkbox、radio、labelを使ってみよう
アンケートをとっていると、複数の選択肢から複数を選んだり、一つだけ選んだりという項目を作ることがありますよね。
checkbox
checkboxは、複数を選べるようにするものです。
今回は、「どんな電話をもってるの？」という質問とします。
inputタグの中のtype属性が"checkbox"、名前が"phone"、valueがそれぞれ"Android"、"iphone"です。
ブラウザで確認すると、ちゃんとチェックボックスが入っていますね！
（押した後なので、チェックが入っています）
ちなみに、最初からチェックを入れておきたいときにはcheckdとしておきます。
すると、ブラウザで確認するとこうなっています。
おお、最初からチェックが入っていますね！
radio
それに対し、一つだけチェックして欲しい時にはradioを使います。
このようにすると、赤か青かどちらかしか選べないということになります。
さきほどと同じように、checkedを入れておくと
最初からチェックが入った状態になります。
ブラウザで見るとこのようになっています。
よく見る、一つしかチェックできないボタンですね＾＾
これはradioというのですね。へー！
なんでラジオなんだろ？
ちゃんと最初からredにチェックが入っていることが確認できます。
やはり、目に見えて確認できるものはわかりやすいですし楽しいですね♪
label
続いて、labelです。
チェックボックスやラジオボタンに設置しておくと便利なものです。
やりかたは2つ。
1つ目は、labelタグで囲うこと。
<label></label>
2つ目は、フォーム部品とラベルが離れているときに関連づける方法です。
<label for="" ><label>
で囲み、
違うところで
id=""
と指定します。
…これも、やっていくうちにわかるようになるのかなあ（白目）
#21 selectタグでセレクトボックスを作ろう
セレクトボックスを作ります。
まずは、セレクトボックスを作るためにselectタグで囲います。
<select></select>
そして、その中にoptionで選択肢を作っていきます。
送信する値をvalue属性で書きます。
<option value="tokyo"></option>
タグの中には、見える選択肢を書き入れます。
ブラウザで見ると、このようになっています。
すごい！こういうの、生年月日の「年」「月」「日」を入力する時とかによく見ますね（＞▽＜）
最初から選んでおきたいものがあれば、selectedを書いておきます。
こうすれば、「Osaka」が最初から選ばれています。
生年月日で言えば、「月」は最初から「１」が出ているのと同じような感じですね。
multiple
最初から選択肢を複数表示するときには、multipleです。
selectタグの中に書きます。
<select name="" multiple>
すると、このように最初から４箇所表示されます。
デフォルト状態で４つまでだそうです。
size
「いや、最初が4つなんでいやだよ！最初から５個表示したい！」という場合には、
multipleの横に
size="5"
と、書き入れます。
ブラウザで見るとこのようになっています。
最初から5つ表示されますね♪
また、selectedを指定してある大阪は、最初から選択されている形になります。
楽しかった！
ここまでやってきて、
「目で見てわかるもの」にはテンションが上がり
「目で見てもわからないもの」「他の言語を覚えていないと使えないもの」には
眠くなるという法則を発見しました。（いまさら？）
しかし、きっと後から
「ああ、そういうわけだったんだ！」となる日がくると信じて勉強していきたいと思います＾皿＾
