未経験からでもWEBエンジニアになれるブログ(さぼり気味)

可能な限り楽して生きていきたい。好きなものだけ食べて痩せたい。控えめに行っても玉の輿乗りたい。ほんとはプライベートブログにしたい。何もしてないのに尊敬されたい。家から出たくない。

HTML/CSS-5日目

むっちゃ暑い。
蒸し鶏になりたい。
鶏肉食べたい。

 

 

さっき目次を作ることを覚えました。

ブログ生活が充実しますね。知らんけど。

 

 

今日の内容は〜〜こちらっ( ◠‿◠ )

 

 

 

  

-------------------------------------------------

 

 

その前に、
先日の補足になりますが、

<section><article>の理想的な使い方

<section>は章や節を表す
<article>は独立した自己完結した記事をあらわす

 


<article>

 

<section>
<h1>見出し</h1>
<p>本文</p>
</section>

 

<section>
<h1>見出し</h1>
<p>本文</p>
</section>

 

</article>

 

 

こういう風に作ると検索にひっかり易くなるので、SEO対策に有利です。

 

はいじゃあ行ってみよう〜

 


----------------------------------------

 


フォームを作成する

 

HTMLの授業も終盤へ入ってまいりました。
たぶん今日で終わりです。だいぶできるようになったんじゃない?知らんけども。

 

フォームって名前とか住所とか、お問い合わせとか入れるやつです。
この記事読むだけでフォーム作れるようになるのでしかとご覧あれ!!!!!!( ◠‿◠ )!!!

 

 

で、

 

 

これですね。

 

f:id:mocha0426:20170720233534p:plain

 

今日はこれを作っていきます。

 

 

<form>〜</form>

 

このタグにパーツをぶち込むことで作成していきます。このタグはユーザから入力されたデータをメールとして送信する設定をwebページに記述するものです。

 


ちなみにいろいろぶち込んでも、<form>タグの外に漏れちゃったりすると一切動作しませんのでご注意!

 


アクセシビリティの観点にも注意して作成します。

アクセシビリティとは近づきやすさや利用しやすさ、つまりちょっとした便利さに配慮して作りましょうということ。

 

f:id:mocha0426:20170720233614p:plain


これでいうと、赤い枠だけでなく青い枠部分もクリックして入力可能、ということですね。

 


さて、

<form> には属性が二つあります。

 

<form action="○" method="○">

 

actionの値にはCGIプログラムのファイル名、methodの値には基本的にはpostを入れます。

 

<form>のパーツはすべてフレージングコンテンツなので、<p>タグで縛っておいてあげます。

 では、みていきましょう。

 

 

 名前を入力する

 

 

まず名前。一行分のテキストエリアをつくります。

 

<input type="text" name="name" id="name">

 

この<input type="text">というタグでテキストボックスが簡単に作成できます。

 

ただ、まだこの時点ではアクセシビリティ設定はされてないので、テキストボックスをクリックしないと入力は不可能です。

 

f:id:mocha0426:20170720233820p:plain

 

このようにlabelタグでくくって、

 

f:id:mocha0426:20170720233838p:plain

 

このオレンジ下線部の内容が同じになるように記述すると、勝手に関連付けてくれます。これも先日やったidと同じ、完全一致が条件になります。

 

これを書くことで、最初に言った赤枠青枠の話が改善されるわけです。
つまり、ちょっと使いやすくなった。

 

f:id:mocha0426:20170720233855p:plain

 

この青い下線部に関しては、データを送信したときに受信側がどの項目として受け取るか、その内容の名前という意味。


たとえば、山田太郎と入力されていたとき、受信者に、
「この山田太郎というのは、nameというフォームに入力されたものなので、お客様の名前です」
と伝えてくれる的な?なんかわかりづらいな?


結局受信側のデータベースに登録するときにちょっとやさしいみたいなやつです。

 

 

 

パスワードを入力する

 


次、ログインパスワード用のフォーム。

f:id:mocha0426:20170720233924p:plain

オレンジの下線部で関連付けし、
青い下線部で「パスワードとして入力されたデータです」と伝える。

 

 

<input type="password">

 

f:id:mocha0426:20170720233944p:plain

 

この記述で、入力文字列が黒丸になるようなボックスが作成されました。

 

 

 

 ラジオボタンを作成する

 

はい、次、ラジオボタン


ラジオボタンは、ひとつしか選択できないときのためのボタンです。性別とか。

ここでも性別のときに使われてます。


○男性 ○女性
の部分です。

 

<input type="radio">

これでラジオボタンは発生しますが、、

 

f:id:mocha0426:20170720234041p:plain


新しい属性が出てきました。

 

ラジオボタンはひとつを選択して文字データを送信します。
この選択されたときに送信する文字データを入力しておくのが、valueです。

 

要するに、表向きが男性/女性のラジオボタンでも、
valueの値を犬とか猫とかにしとくと、ユーザーは男性を選んでつもりなのに
届いた内容は犬になってるみたいな感じ。いたずら心が働きます。


選択するボタンは「男性」より前に発生させたいので、コードの書き始めの位置に気をつけましょう。

 

ちなみに、

f:id:mocha0426:20170720234107p:plain

この緑の下線部統一してないと、二つ以上選択可能になるので注意。

 

f:id:mocha0426:20170720234121p:plain

 

もう全体の半分出来上がりました。

 

 

 

 

プルダウンメニューを作成する

次、年齢。

<select>タグで仕上げましょう。

f:id:mocha0426:20170720234202p:plain

緑のわくのvalueが実際に送信される内容。
青の下線部が送信される名目。

<select>でプルダウンメニューを作成し、
このタグは子要素として<option>を持つことができますので、<option>で選択肢を作ってあげましょう。

 

f:id:mocha0426:20170720234236p:plain

このようにプルダウンで完成されます。

 

 

 

 

 

チェックボックスを作成する 

 

つぎのチェックボックスがなんかめんどい。

f:id:mocha0426:20170720235554p:plain


書くこと多いけど、やってることは変わりません。

 

<input type="checkbox">


これで複数選択可能なチェックボックスが発生します。

 

f:id:mocha0426:20170720235642p:plain

 

完成です。

 

f:id:mocha0426:20170720235653p:plain

 

 

 

 

 

 テキストボックス(でかい)を作成する


じゃあつぎ、テキストエリア。

 

これは空タグではありません。閉じタグ必須です。

属性がいろいろあるので、見ていきましょう。

 

 

f:id:mocha0426:20170720235717p:plain


colsでフィールド幅、rowsで行数を指定できます。


colsに関してはブラウザの文字サイズに依存することが多いので、あんまり当てになりません。CSSで指定しましょう。

 

f:id:mocha0426:20170720235755p:plain

 

 

 

このタグにはほかにも属性があります。

 


size="フィールドの幅(文字数)"


value="デフォルトで表示するテキスト"


maxlength="入力可能な文字数"

 

などなど。

 

 

 

 

送信ボタンを作成する 

 

 

最後、ボタン作ります。

 

<input type="submit">で送信ボタン、
<input type="reset" >でリセットボタンができます。

 

簡単。これはラベルによる関連付けも必要ありません。

 

f:id:mocha0426:20170721000818p:plain

 

 

ただこの場合におけるvalueは、
ボタン内の表示テキストをあらわしています。ややこしいかよ。

 

 

はい、完成しました。

 

f:id:mocha0426:20170721000837p:plain

 

このくらいできればいいでしょうとのことで、HTML講座は終了しました。

次回より、CSSに入ります。

 

 

 

 

 

人のお金で焼肉に行く

 

長年の夢です。

 

 

 

 

 


アディオス