HTML/CSS-5日目
むっちゃ暑い。
蒸し鶏になりたい。
鶏肉食べたい。
さっき目次を作ることを覚えました。
ブログ生活が充実しますね。知らんけど。
今日の内容は〜〜こちらっ( ◠‿◠ )
-------------------------------------------------
その前に、
先日の補足になりますが、
<section>と<article>の理想的な使い方
<section>は章や節を表す
<article>は独立した自己完結した記事をあらわす
<article>
<section>
<h1>見出し</h1>
<p>本文</p>
</section>
<section>
<h1>見出し</h1>
<p>本文</p>
</section>
</article>
こういう風に作ると検索にひっかり易くなるので、SEO対策に有利です。
はいじゃあ行ってみよう〜
----------------------------------------
フォームを作成する
HTMLの授業も終盤へ入ってまいりました。
たぶん今日で終わりです。だいぶできるようになったんじゃない?知らんけども。
フォームって名前とか住所とか、お問い合わせとか入れるやつです。
この記事読むだけでフォーム作れるようになるのでしかとご覧あれ!!!!!!( ◠‿◠ )!!!
で、
これですね。
今日はこれを作っていきます。
<form>〜</form>
このタグにパーツをぶち込むことで作成していきます。このタグはユーザから入力されたデータをメールとして送信する設定をwebページに記述するものです。
ちなみにいろいろぶち込んでも、<form>タグの外に漏れちゃったりすると一切動作しませんのでご注意!
アクセシビリティの観点にも注意して作成します。
アクセシビリティとは近づきやすさや利用しやすさ、つまりちょっとした便利さに配慮して作りましょうということ。
これでいうと、赤い枠だけでなく青い枠部分もクリックして入力可能、ということですね。
さて、
<form> には属性が二つあります。
<form action="○" method="○">
actionの値にはCGIプログラムのファイル名、methodの値には基本的にはpostを入れます。
<form>のパーツはすべてフレージングコンテンツなので、<p>タグで縛っておいてあげます。
では、みていきましょう。
名前を入力する
まず名前。一行分のテキストエリアをつくります。
<input type="text" name="name" id="name">
この<input type="text">というタグでテキストボックスが簡単に作成できます。
ただ、まだこの時点ではアクセシビリティ設定はされてないので、テキストボックスをクリックしないと入力は不可能です。
このようにlabelタグでくくって、
このオレンジ下線部の内容が同じになるように記述すると、勝手に関連付けてくれます。これも先日やったidと同じ、完全一致が条件になります。
これを書くことで、最初に言った赤枠青枠の話が改善されるわけです。
つまり、ちょっと使いやすくなった。
この青い下線部に関しては、データを送信したときに受信側がどの項目として受け取るか、その内容の名前という意味。
たとえば、山田太郎と入力されていたとき、受信者に、
「この山田太郎というのは、nameというフォームに入力されたものなので、お客様の名前です」
と伝えてくれる的な?なんかわかりづらいな?
結局受信側のデータベースに登録するときにちょっとやさしいみたいなやつです。
パスワードを入力する
次、ログインパスワード用のフォーム。
オレンジの下線部で関連付けし、
青い下線部で「パスワードとして入力されたデータです」と伝える。
<input type="password">
この記述で、入力文字列が黒丸になるようなボックスが作成されました。
ラジオボタンを作成する
はい、次、ラジオボタン。
ラジオボタンは、ひとつしか選択できないときのためのボタンです。性別とか。
ここでも性別のときに使われてます。
○男性 ○女性
の部分です。
<input type="radio">
これでラジオボタンは発生しますが、、
新しい属性が出てきました。
ラジオボタンはひとつを選択して文字データを送信します。
この選択されたときに送信する文字データを入力しておくのが、valueです。
要するに、表向きが男性/女性のラジオボタンでも、
valueの値を犬とか猫とかにしとくと、ユーザーは男性を選んでつもりなのに
届いた内容は犬になってるみたいな感じ。いたずら心が働きます。
選択するボタンは「男性」より前に発生させたいので、コードの書き始めの位置に気をつけましょう。
ちなみに、
この緑の下線部統一してないと、二つ以上選択可能になるので注意。
もう全体の半分出来上がりました。
プルダウンメニューを作成する
次、年齢。
<select>タグで仕上げましょう。
緑のわくのvalueが実際に送信される内容。
青の下線部が送信される名目。
<select>でプルダウンメニューを作成し、
このタグは子要素として<option>を持つことができますので、<option>で選択肢を作ってあげましょう。
このようにプルダウンで完成されます。
チェックボックスを作成する
つぎのチェックボックスがなんかめんどい。
書くこと多いけど、やってることは変わりません。
<input type="checkbox">
これで複数選択可能なチェックボックスが発生します。
完成です。
テキストボックス(でかい)を作成する
じゃあつぎ、テキストエリア。
これは空タグではありません。閉じタグ必須です。
属性がいろいろあるので、見ていきましょう。
colsでフィールド幅、rowsで行数を指定できます。
colsに関してはブラウザの文字サイズに依存することが多いので、あんまり当てになりません。CSSで指定しましょう。
このタグにはほかにも属性があります。
size="フィールドの幅(文字数)"
value="デフォルトで表示するテキスト"
maxlength="入力可能な文字数"
などなど。
送信ボタンを作成する
最後、ボタン作ります。
<input type="submit">で送信ボタン、
<input type="reset" >でリセットボタンができます。
簡単。これはラベルによる関連付けも必要ありません。
ただこの場合におけるvalueは、
ボタン内の表示テキストをあらわしています。ややこしいかよ。
はい、完成しました。
このくらいできればいいでしょうとのことで、HTML講座は終了しました。
次回より、CSSに入ります。
人のお金で焼肉に行く
長年の夢です。
アディオス