web制作 | 夜間飛行 備忘録

web制作講座で教わったあれこれを書き留めていきます

15日目

本日は…

一日フォームの話

午前はフォームの書き方、午後はGoogleフォームの作り方、運用の仕方

 

・フォームはおおまかにお問い合わせ、アンケートと分類可能

 :お問い合わせはtextareaで作ることが多いが、悪意あるコードなどを送られる可能性を考慮して制限をかけることは必須→セキュリティーの問題

 ::アンケートはテキストフィールド、ラジオボタンチェックボックス、リストなどからなる

・アンケートの主要目的は利用者からの情報収集

・お問い合わせフォームの目的はユーザーからのリクエストなど

■作り方

<form></form>で囲んで作る

action”どこに送る?”(#…つまりリンク先)

method”どうやって?”

 →getは検索ツールバーなどで使う。いれた文字の中身がアドレスバーなどに出る(はがきに似ている)

 →postはプライバシー性のあるもの、登録フォームなどに使う。文字の中身は見えない(封書に似る)

 

textの場合 

●<input type="text" name="name" size="" maxlength="">

 …type="text"で一行のテキストボックスを作れる

 …nameはどんなデータか、データに名前をつける。sizeは何文字分(半角)の幅にするか、maxlengthは最高で入る文字数(半角全角問わず

 

●<textarea name="" rows="" cols="">●●●●●</textarea>

 …囲まれた文字●●がデフォルトで表示される

 …nameはデータ名、rowsはテーブルと同じで、横行のこと。colsも同じ縦に何文字か

 ※デフォルトの文字を、カーソルがあうと消える仕様にしたい場合は、間に書くのではなく、cols の後ろあたりにplaceholder="●●●"で書き込んでやればいい←これはHTML5!←ブラウザチェックが必要!!

 ※※ページが開くとすでに一つ目の項目にマウスカーソルがあっていて欲しい…

 →autofocusといれておくだけHTML5

 ※※※必須項目の設定… →requiredを入れるだけHTML5

 

 他に、<input type="password" name="password">入力すると●●●になる、というのもある

 

ラジオボタン

 <label><input type="radio" name="" value=""></label>...

 …項目の数だけこれを書いていく。デフォルトにしたいものには checked をつける

 ※<label></label>でかこんでやると、テキストをクリックしてもチェックを付けられるようになる

 

チェックボックス

 <label><input type="checkbox" name="" value="数字"></label>

 …以下、ラジオボタンとほぼ同じ。ただし何個でもチェックできる

●セレクトボックス

 <select name=""><option="" value="数字が多い"><option…><…></select>

 …デフォルトみたいなものを作るなら、value="0"などとして一つ目に表示してselectedを付けておけばいい

 

googleフォーム…項目追加していける

 →登録して新規でその他から選ぶだけ…。インライフレームといて埋め込むことも可能

 →結果はグラフとして表示される。エクセルデータのようにもなる。印刷も可能

 

■jimdoの使いカ…

 →記事を項目ごとに作るのではなく、ナビゲーションごとにタグを設定して、ひとつのブログを更新することで、タグごとに仕分けて表示されるようにして使う

 ex)サイト百選を作るときも、カテゴリごとに表示されるようにしておくべき