生涯、学習していきたい

2018年はプログラミング学習に凝っています。

 ドットインストールでHTMLを学ぼう #19~#21

ドットインストールのおかげで少しずつHTMLがわかるようになってきて

調子に乗りつつあるぽんきちさんです。

あとできっと鼻をへし折られることと思いますががんばります。

今日も楽しく勉強だ!

 

f:id:ponnkichi:20171226222543p:plain

https://dotinstall.com/

 

 最初の画像にアイキャッチをつけたら、画像が中央に寄せられてしまい

どのようにして治したらいいか全くわかりません。

HTML編集モードにしても全くわかりません。

さっそく鼻がへし折られましたが続けましょう。

 

 #19 textarea、buttonタグを使ってみよう

おお!textareaは、progateでも学びました。

ponnkichi.hatenablog.com

きっと覚えているはず!(フラグ)さあ、やってみましょう。

 

前回、#17#18で習った入力タグは、1行の文を入力することが想定されていました。

 textareaは、複数の行を入力できるようにするものです。

inputタグと違い、閉じタグが必要です。

textarea

<textarea></textarea> 

 このようにタグで囲んだ部分に入力することになります。

f:id:ponnkichi:20180120142900p:plain

name

name属性は、データを送信した時の名前になります。

cols、rows

cols属性はサイズや幅を、rows属性は高さを指定します。

#18で学んだように、maxlengthやplaceholderを使うこともできます。

 

texeareaの中に初期値を入れておくと、最初から表示されるようになります。

f:id:ponnkichi:20180120143304p:plain

「コメント」と中に書いておくと、

f:id:ponnkichi:20180120143334p:plain

最初から「コメント」と書かれていますね!

 

button

#17#18で学んだように、input type="submit"

以外にも、buttonタグでもボタンを表現することができます。

むしろ「ボタン」でわかりやすい。^皿^

buttonタグには、閉じタグが必要です。

<button></button>

このように使います。

f:id:ponnkichi:20180120143756p:plain

bottonも、inputと同じようにtype="submit"と書くのですね。

そして、buttonタグで囲まれたところの文字が出てきます。

inputと違って、中にさらにタグが入れられるので

strongで強調することもできるのですね。

 

また、bottonのtypeには

submitのほかにbottonというものもあって、

f:id:ponnkichi:20180120144016p:plain

フォームを送信しないけれど何らかの処理をするボタンをつくることができます。

これは、Java Scriptを使うそうなので私はまだわかりませんね^^;

 

さて、実際にどのように見えるのかを見てみましょう。

f:id:ponnkichi:20180120144222p:plain

一番上の「送信!」が、strongで強調されたbottonタグ。

二番目の「処理をする!」が、先ほどのまだ私には使えないbottonタグ。

三番目の「送信!」が、inputタグで作ったものです。

 

disabled

disabledという属性は、入力部品を無効化するものだそうです。

これを入れると、何かが入力されないと送信できないようにしたりできるそうです。

f:id:ponnkichi:20180120144606p:plain

f:id:ponnkichi:20180120144609p:plain

こうすると、この欄は何も入力できなくなるし、

ボタンも押せなくなるそうです。

これはのちにJava Scriptを学んだときに見直そうと思います。

(なので、今は覚えなくてもいいと思い込んでいるぽんきちさんでした)

#20 checkbox、radio、labelを使ってみよう

アンケートをとっていると、複数の選択肢から複数を選んだり、一つだけ選んだりという項目を作ることがありますよね。

checkbox

 checkboxは、複数を選べるようにするものです。

f:id:ponnkichi:20180120145103p:plain

今回は、「どんな電話をもってるの?」という質問とします。

inputタグの中のtype属性が"checkbox"、名前が"phone"、valueがそれぞれ"Android"、"iphone"です。

f:id:ponnkichi:20180120145253p:plain

ブラウザで確認すると、ちゃんとチェックボックスが入っていますね!

(押した後なので、チェックが入っています)

 

ちなみに、最初からチェックを入れておきたいときにはcheckdとしておきます。

f:id:ponnkichi:20180120145405p:plain

 すると、ブラウザで確認するとこうなっています。

f:id:ponnkichi:20180120145458p:plain

おお、最初からチェックが入っていますね!

radio

それに対し、一つだけチェックして欲しい時にはradioを使います。

f:id:ponnkichi:20180120145637p:plain

このようにすると、赤か青かどちらかしか選べないということになります。

さきほどと同じように、checkedを入れておくと

最初からチェックが入った状態になります。

ブラウザで見るとこのようになっています。

f:id:ponnkichi:20180120145749p:plain

よく見る、一つしかチェックできないボタンですね^^

これはradioというのですね。へー!

なんでラジオなんだろ?

 

ちゃんと最初からredにチェックが入っていることが確認できます。

やはり、目に見えて確認できるものはわかりやすいですし楽しいですね♪

label

 続いて、labelです。

チェックボックスラジオボタンに設置しておくと便利なものです。

やりかたは2つ。

f:id:ponnkichi:20180120150100p:plain

1つ目は、labelタグで囲うこと。

<label></label> 

 

f:id:ponnkichi:20180120150225p:plain

2つ目は、フォーム部品とラベルが離れているときに関連づける方法です。

<label for="" ><label>

 で囲み、

違うところで

id="" 

 と指定します。

 

…これも、やっていくうちにわかるようになるのかなあ(白目)

#21 selectタグでセレクトボックスを作ろう

 

セレクトボックスを作ります。

f:id:ponnkichi:20180120150926p:plain

まずは、セレクトボックスを作るためにselectタグで囲います。

<select></select>

そして、その中にoptionで選択肢を作っていきます。

送信する値をvalue属性で書きます。

<option value="tokyo"></option>

タグの中には、見える選択肢を書き入れます。

ブラウザで見ると、このようになっています。

f:id:ponnkichi:20180120151227p:plain

すごい!こういうの、生年月日の「年」「月」「日」を入力する時とかによく見ますね(>▽<)

 

最初から選んでおきたいものがあれば、selectedを書いておきます。

f:id:ponnkichi:20180120151351p:plain

こうすれば、「Osaka」が最初から選ばれています。

f:id:ponnkichi:20180120151442p:plain

生年月日で言えば、「月」は最初から「1」が出ているのと同じような感じですね。

 

multiple

最初から選択肢を複数表示するときには、multipleです。

f:id:ponnkichi:20180120151726p:plain

selectタグの中に書きます。

<select name="" multiple>

すると、このように最初から4箇所表示されます。

デフォルト状態で4つまでだそうです。

f:id:ponnkichi:20180120151833p:plain

size

「いや、最初が4つなんでいやだよ!最初から5個表示したい!」という場合には、

multipleの横に

f:id:ponnkichi:20180120152036p:plain

size="5"

と、書き入れます。

ブラウザで見るとこのようになっています。

f:id:ponnkichi:20180120152152p:plain

最初から5つ表示されますね♪

また、selectedを指定してある大阪は、最初から選択されている形になります。

 

楽しかった!

 

ここまでやってきて、

「目で見てわかるもの」にはテンションが上がり

「目で見てもわからないもの」「他の言語を覚えていないと使えないもの」には

眠くなるという法則を発見しました。(いまさら?)

しかし、きっと後から

「ああ、そういうわけだったんだ!」となる日がくると信じて勉強していきたいと思います^皿^