My Web道

WEB制作科 受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

3/13 [HTML] 入力Form作成

[HTML] 入力フォーム作成

  1. [HTML5] 入力フォーム作成
  2. Google Formによる入力フォーム作成(午後の実習)
HTML(form)

formとは?

  • 入力されたデータ(値)を運ぶ器
  • Webの仕事の半分は form 絡み


参考:
基本的なフォーム -- ごく簡単なHTMLの説明

フォーム作成に利用される言語
  • PHP
  • CGI(Perl), Pyson, ruby ←セキュリティ的に禁止されていることが多い(以前は主流)


form要素の構造

<form method="post" aciton="CGIのURI">
(この中に入力フィールドやボタンを配置)
</form>

データ送信のメソッド

  • post : 個人情報を送る時はこちら URL非表示
  • get : URLに表示

この処理を例えると、 「封筒で個人情報を送る」ようなもの

  • get : 宛先(住所)明示
  • post:中身を暗号化


入力フィールド作成
(例)テキストフィールド

<p>名前:<input type="text" name="name" size="60" max length="10"> 

max length="10" --- 全角10文字分しか受け取らないという意

※限界値を設定し、それ以上入力ができないうようにする 
⇒悪意のある余計な入り口防ぐ


buttonとsubmitの違い

■ button
※buttonの場合、クイックイベントを取得

<button></button>


■ submit
※入力されたデータを送信

<input type="submit">


参照:
<input>-HTML5タグリファレンス :
http://www.htmq.com/html5/input.shtml

HTMLタグ/フォームタグ/入力フォームを作る - TAG index Webサイト
http://www.tagindex.com/html_tag/form/form.html





講師コメント(ちょっと脱線)

< 脳の活性化方法 >

  • 右利き:左利きの人のようにしてみる (手を組んだ時左手が上になるように)
  • 触る:感触 そこから多くの情報を得る

→ 今の子供が切れやすい理由: 体験が少ないから


午後の実習

Googleドライブのフォームでアンケートフォームを作ってみる

参照:
Google フォームでアンケートを作成する - ドキュメント エディタ ヘルプ
https://support.google.com/docs/answer/87809?hl=ja