けいが文章を書く場所

けいが文章を書く場所

推敲なんぞ、せん。(タブン)

けいがプログラミングの勉強を始めたようです。#2【フォーム系の続き】

 

プログラミング独学スタートして3日目です。けいです。

大量の情報が頭に入ってきて、早くもパンクしそうですが、頑張っております。

そして、記事を書く時間が奪われております。笑

 

 

プログラミングは、打ち込んだら、それに伴ってすぐにサイトの見た目が変化するので、モチベが保ちやすいですね。

 

 

そんなわけで、今日やったことを少しだけ、練習兼ねて記しときます。

 

 

HTMLでフォームを作る Part2

昨日で終わったと思ってた「フォーム」作成ですが、なんかフォームの動画だけで8コもあったんですよね。笑

ドットインストールさんありがとうございます。ペコリ。

 

 

今日使ったのは、

textareaタグ

複数行に渡るテキストフォーム

1行のテキストフォームの場合は、input type="text"

  • cols属性:エリアの幅
  • rows属性:エリアの高さを
  • maxlength属性:文字数の上限を指定できる
  • placeholder属性:空白の時に、薄くテキストを表示させる

 

buttonタグ

そのまんま、ボタンを作れるタグ。

input type="submit"でもボタンは作れるが、データ送信しかできない。

type="button"で、ボタンに表示するテキストを装飾したり、色々な処理ができる。

 

inputタグ

フォームの入力欄や送信ボタンを作るタグ。

type属性に使える属性値が多すぎたので、ここでは割愛しまふ。

 

selectタグ

「こっからここまでセレクトボックスでっせ」のサイン。

  • selected属性:デフォルトの選択を指定する
  • multiple属性:複数選択可能にする

 

 実践1 テキストボックス

じゃァ実践しましょ。

まずはtextareaタグを使った「テキストボックス」

 ↓↓↓

 

コメントをどうぞ・・・

 

 ↑↑↑

maxlength="10"で指定したので、11文字以上は書けないようになってます。

これがHTMLのご様子。

f:id:kei-T:20170625183500p:plain

 

 

たったこれだけの記述で、フォームは作れます〜

もちろん、formタグの中にこれを記述しないと何の効果もありません。。

 

ハイ次。

 

 

実践2 チェックボックス

チェックボックスです。

アンケートなんかでよく見るね。

ここでは、1個のみ回答可能なものと、複数個回答可能なものの両方を作ります。

↓↓↓

 

Q1.どの酒を愛してますか??(複数回答可)

びあ

はいぼ

なんかおしゃれげなやつ

ポティーン

 

 

Q2.あなたの性別は?

おとこのこ

おんなのこ

性別の向こう側

 

 ↑↑↑

こんな感じっす。

Q1は複数選択できて、Q2ではできないようになってますよね。

あと、label属性を使って、テキスト部分をクリックしてもボックスに反応するようにもしています。

→と思ったんですが、label属性を使うと問題が発生しやがったので、

 ボックスだけに反応するようにしました。。

 

 

あと、type属性の属性値に、"email"とか"number"、"date"を入れとくと、

入力項目の妥当性を判断してくれるようになります。

「input type="email"」にすれば、明らかにメアドではない文字列は弾かれます)

 

 

ハイ次。

 

実践3 セレクトボックス

最後に、セレクトボックスを作っていきます。

↓↓↓

 

将来の夢はなんだい?

 

↑↑↑

HTMLは、

f:id:kei-T:20170625192042p:plain

って感じ。

これは1つしか選択できないようにしときました。

 

****

 

現時点では、まだ、フォームの送信先がないので、「カタチだけ作れるようになった」

ってゆーレベルです。

 

 

どっとインストールはまだまだ動画があるので、ガツガツおべんきょしてこうと思います。

ドットインストールどんなんか見てみる?

 

 

おしまい。