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