ぴろこの日常

既婚、社会人、気まぐれな30過ぎの日常ブログ

フォームの練習 3.13

FORMの練習

誰でも見たことのある、「お問い合わせフォーム」

f:id:piroko0729:20140314123644j:plain

<!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="blue">青</label>
<label><input type="radio" name="color" value="green">緑</label>
</p>
<p>趣味:
<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>
</p>
<p>
<select name="district">
<option value="">以下の地域から選択してください</option>
<option value="hokkaodo">北海道</option>
<option value="tohoku">東北</option>
<option value="kanto">関東</option>
<option value="tokai">東海</option>
<option value="kinki">近畿</option>
<option value="chugoku">中国</option>
<option value="shikoku">中国</option>
<option value="kyushu">九州</option>
<option value="okinawa">沖縄</option>
</select>
</p>
<p>メモ:<textarea name="memo" rows="5" cols="40"></textarea></p>
<p><input type="submit" value="送信"></p>

</form>
</body>
</html>

 

size="30":

半角で30文字ということ。全角では15文字。

maxlength="10":

全角で10文字まで打てますということ。(いたずら防止でもある)

label:

選択フォームを作る際は必ずつけること。

input type="radio":

選択する際、どれか一つしかチェックできません。(※性別の選択等で使用)

input type="checkbox":

選択する際、何個でもチェックできます。(↑上の逆のパターン)

select name="district":

選択するものが閉まわれています。(選択種類が沢山あるときにはこれを使用)

input type="submit":

入力されたデーターを送信します。(⇔<botton>送信</botton>データの送信をしないときはこちらを使用)

 

 

 

@pirokoとwebと・・・人生と