webページのつくり方 | 学びの道

webページのつくり方、web制作、web作成、学びの道を歩み中！フェリカテクニカルアカデミー「東京・池袋」にてWeb作成を勉強中です。学んだ事をメモしていきます。

HTML　form　問合せフォームの基本構造

ｈｔｍｌ

今回は、↓　の問合せフォームを作成していきます。

f:id:kaoru01-05:20140314044949g:plain

 

問合せフォームについてあれこれ

  • 　個人情報入力する側に、何かメリットが無ければ入力動作までに結びつかない。
  • 　HP自体が信頼されなければ入力まで結びつかない。
  • 取り消しボタンは現在あまり使われない。（→取り消しボタンを押すと、入力した内容が全て消えるため、入力者にいやだなと感じさせてしまう。）
  • 現在無料サーバーだとセキュリティの観点からPHP（言語）を使用してほしいと指定が入る事が多い。

 

 

では本題に入っていきましょう。

 

 

HTML（form）とは何か？

入力されたデータ（値）を運ぶ器　のこと。　

 

各部説明

  • 　テキスト型　→　一行のみ（インプット）
  • 　ラジオボタン　→　唯一の情報を取得する
  • 　チェックボックス　→　複数の情報を取得する
  • 　メニュー型
  • 　テキストエリア　→2行以上

f:id:kaoru01-05:20140314050548g:plain

 
【フォームの基本構成】
 
※input type="" に指定する要素

 

プルダウンメニュー

 

テキストの文字数指定

例）<input type="text" name="name" size="30" maxlength="10">

  • name=""（エリアの名前）
  • size="30" （半角で30文字の意。→上記例は全角で15文字）
  • maxlength="10" （これ以上受け取らないの意。→上記例は10文字まで入力可能。）
 
【その他】

f:id:kaoru01-05:20140314064951g:plain選びやすくなる

<label><input type="radio" name="color" value="red">赤</label>label
 ラベルで囲むと、囲まれた全体をクリック出来る.

f:id:kaoru01-05:20140314065658g:plain

 

f:id:kaoru01-05:20140314064951g:plainデータを送る際の形式に注意

※form要素にmethod＝”　”　を追加すると、データの送信形式が指定可能となりますが、指定の仕方に御注意

<form method="post" action="#" id="myform">　→　個人情報をいれても大丈夫

<form method="gett" action="#" id="myform">　→　個人情報はいれたら×

（データがURLに記載されてしまう為、追跡可能となり危険。　但し、逆に考えると検索されたい内容の場合はこちらが有効となる。）

 

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

1】　フォーム

f:id:kaoru01-05:20140314051307g:plain

HTML

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>フォームの練習 問い合わせ</title>
</head>

<body>

<form method="post" action="#">
<p>名前：<input type="text" name="name" size="30" maxlength="10"></p>
<p>メールアドレス：<input type="text" name="email" size="30"></p>
<p>好きな色：
<label><input type="radio" name="color" value="red">赤</label>
<label><input type="radio" name="color" value="blur">青</label>
<label><input type="radio" name="color" value="gleen">緑</label>
</p>
<p>趣味：<input type="checkbox" name="hobby" value="music">音楽
<input type="checkbox" nama="hobby" value="sports"> スポーツ
<input type="checkbox" name="hobby" value="travel">旅行
<input type="checkbox" name="hobby" value="cooking">料理
<input type="checkbox" name="hobbt" value="reading">読書
</p>
<p>
<select name="district">
<option value="">以下の地域から選択してください</option>
<option value="hokkaido">北海道</option>
<option value="tohoku">東北</option>
<option value="kanto">関東</option>
<option value="tokai">東海</option>
<option value="kinki">近畿</option>
<option value="chugoku">中国</option>
<option value="sikoku">四国</option>
<option value="kyusyu">九州</option>
<option value="okinawa">沖縄</option>
</select>
<p>メモ：<textarea name="memo" rows="5" cols="40"></textarea></p>
<p><input type="submit" value="送信"></p>
</form>
</body>
</html>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

2】　フォーム

 

value：チェックボックスの場合、区別がつかないのでvalueで属性値に任意の値や文字列等のラベルをつける。 ただし、文字だとデータを運びにくい為、数字を使用する場合が多い。

 

f:id:kaoru01-05:20140314044949g:plain

 

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>フォームの練習</title>
<style>
#myform table {
  width: 600px;
  border: 1px solid #333;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #CCC;
  padding: 10px;
}
th {
  background: #F4FFDD;
  text-align: right;
}
</style>
</head>
<body>
<form method="post" action="#" id="myform">
<table>
<tr><th>名前</th><td><input type="text" name="name" size="30" maxlength="10"></td></tr>
<tr><th>メールアドレス</th><td><input type="text" name="email" size="30"></td></tr>
<tr><th>性別</th><td>
<label><input type="radio" name="sex" value="male" checked>男性</label>
<label><input type="radio" name="sex" value="female">女性</label>
</td></tr>
<tr><th>好きな色</th><td>
<label><input type="radio" name="color" value="red">赤</label>
<label><input type="radio" name="color" value="blue">青</label>
<label><input type="radio" name="color" value="green">緑</label>
</td></tr>
<tr><th>趣味</th><td>
<label><input type="checkbox" name="hobby" value="1">音楽</label>
<label><input type="checkbox" name="hobby" value="2">スポーツ</label>
<label><input type="checkbox" name="hobby" value="3">旅行</label>
<label><input type="checkbox" name="hobby" value="4">料理</label>
<label><input type="checkbox" name="hobby" value="5" checked>読書</label>
</td></tr>
<tr><th>お住まいの地域</th><td>
<select name="district">
<option value="">以下の地域から選択してください</option>
<option value="hokkaido">北海道</option>
<option value="tohoku">東北</option>
<option value="kanto">関東</option>
<option value="tokai">東海</option>
<option value="kinki">近畿</option>
<option value="chugoku">中国</option>
<option value="sikoku">四国</option>
<option value="kyusyu">九州</option>
<option value="okinawa">沖縄</option>
</select>
</td></tr>
<tr><th>メモ</th><td><textarea name="memo" rows="5" cols="20"></textarea></td></tr>
<tr><th></th><td><input type="submit" value="送信"></td></tr>
</table>
</form>
</body>
</html>