くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

[HTML]フォームの練習

フォームの目的は ユーザーの情報・意見の収集

 

フォームの問題点

  • 入力制限が必須 →悪意の内容(プログラム)を書き込まれる可能性あり
  • セキュリティーが一番重要 →プログラム、セキュリティ、目的などをよく考慮し
                  システムを組上げるべき

「お問い合わせフォーム」と「アンケート型フォーム」を分けて考える

 

htmlでのフォームの種類


 

<form>タグに必要な要素
  ・action属性  「どこに」データの送り先
  ・method属性 「どうやって」データの送信方法 postまたはget

post=封筒(差出人住所が見えない)
 get =葉書(差出人住所が見える)

<form action="#" method="post">ではじめる

 

マークアップの手順

①テーブル組みにする(tableにボーダーを付ける)

CSSでtableを整える
  ボーダーをCSSのtableに付ける(HTMLにつけたボーダーを取る)

テキスト型  用途:名前

<tr>    
<th>お名前</th><td><input type="text" name="name" size="38" maxlength="10" required autofocus></td>
</tr>

name属性

size="●●" 入力できるだいたいの半角文字数(正確ではない) 

maxlength="●●" Enterを押したときに入力できる全角の文字数

required 入力必須項目になる

autofocus 自動的にそのフォームにカーソルが置かれる

 

テキストエリア型 用途:問い合わせ内容

 <tr>    
<th>内容</th><td><textarea name="name" rows="5" cols="40" required placeholder="お問い合わせ内容"></textarea></td>
</tr>

<textarea>~</textarea>で囲む
rows="5" 行数
cols="40" 1行の文字数  標準はrows="5" cols="40" 文字数200
placeholder="●●" 初期に入力されている薄いグレー文字

 

※required、autofocus、placeholderはHTML5の新機能

ラジオボタン

<tr>
<th>性別</th><td><label><input type="radio" name="gender" value="male" checked>男性</label> <label><input type="radio" name="gender" value="female">女性</label></td>
 </tr>

 基本形
<input type="radio" name="●" value="●">●●

◎初期設定では、クリックできるのはボタンだけ。
<label>~<label>で囲むと、文字を含めてクリックできるようになる

checked 最初からチェックがついている状態になる

 

チェックボックス型  複数選択可能

<tr>
<th>スマートフォン</th><td><label><input type="checkbox" name="mobile" value="1" checked>iPhone</label> <label><input type="checkbox" name="mobile" value="2">Android</label>    <label><input type="checkbox" name="mobile" value="3">その他</label></td>    
</tr>

 

メニュー型

<tr>
<th>地域</th><td><select name="area"><option value="" selected>以下の中から選択</option><option value="1">北海道</option><option value="2">東北</option><option value="3">関東</option><option value="4">甲信</option><option value="5">北陸</option><option value="6">東海</option><option value="7">関西</option><option value="8">中四国</option><option value="9">九州・沖縄</option></select></td>    
</tr>

ボタン

 <input type="submit" name="送信">

name="●" ●の文字がボタンの文字になる

<table>タグ内でも外でもよい。下の例は、外に置いている


 

f:id:pleasure10501:20150314093317j:plain

<body>
<h1>お問い合わせフォーム</h1>    
<form action="#" method="post">
<table>
<tr>    
<th>お名前</th><td><input type="text" name="name" size="38" maxlength="10" required autofocus></td>
</tr>
<tr>    
<th>内容</th><td><textarea name="name" rows="5" cols="40" required placeholder="お問い合わせ内容"></textarea></td>
</tr>
<tr>
<th>性別</th><td><label><input type="radio" name="gender" value="male" checked>男性</label> <label><input type="radio" name="gender" value="female">女性</label></td>    
</tr>
<tr>
<th>スマートフォン</th><td><label><input type="checkbox" name="mobile" value="1" checked>iPhone</label> <label><input type="checkbox" name="mobile" value="2">Android</label>    <label><input type="checkbox" name="mobile" value="3">その他</label></td>    
</tr>
<tr>
<th>地域</th><td><select name="area"><option value="" selected>以下の中から選択</option><option value="1">北海道</option><option value="2">東北</option><option value="3">関東</option><option value="4">甲信</option><option value="5">北陸</option><option value="6">東海</option><option value="7">関西</option><option value="8">中四国</option><option value="9">九州・沖縄</option></select></td>    
    </tr>    
</table>
<input type="submit" name="送信">
</form>    
</body>

広告を非表示にする