フォームの基本構造

作ってみた

フォーム

  • ブラウザの操作画面で、利用者からの入力を受け付ける要素(の集合)のこと
  • 目的は、利用者からの情報収集のため
<form>
<p><input type="種類"></p>
</form>

お問い合せフォーム





FirefoxとChromeでは、表示がかなり違うんですね。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>お問い合わせ</title>
</head>
<body>
<h1>お問い合わせフォーム</h1>
<form action="#" method="post">
<p>名前：<input type="text" name="name" size="20" maxlength="10" value="お名前"></p>
<p>内容：<textarea name="subject" rows="5" cols="40">お問い合せ内容</textarea></p>
<p><input type="submit" value="送信"></p>
</form>
</body>
</html>

チェックボックス



<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>チェックボックス</title>
</head>
<body>
<h1>チェックボックス</h1>
<form action="#" method="post">
<p>スマートフォン：
  <input type="checkbox" name="mobile" value="1" checked>iPhone
  <input type="checkbox" name="mobile" value="2">Android
  <input type="checkbox" name="mobile" value="3">その他
</p>
<p><input type="submit" value="送信"></p>
</form>
</body>
</html>

ラジオボタン



<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ラジオボタン</title>
</head>
<body>
<h1>ラジオボタン</h1>
<form action="#" method="post">
<p>性別：
  <input type="radio" name="sex" value="male" checked>男性
  <input type="radio" name="sex" value="female">女性
</p>
<p><input type="submit" value="送信"></p>
</form>
</body>
</html>

リスト



<!DOCTYPE html>
<html lang="ja">
<head>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>リスト</title>
</head>
<body>
<h1>リスト</h1>
<form action="#" method="post">
<p>言語：
<select name="language">
  <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>
</select>
</p>
<p><input type="submit" value="送信"></p>
</form>
</body>
</html>

ラベルを付ける



<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ラベルを付ける</title>
</head>
<body>
<h1>ラベルを付ける</h1>
<form action="#" method="post">
<p>スマートフォン：
  <label><input type="checkbox" name="mobile" value="1" checked>iPhone</label>
  <label><input type="checkbox" name="mobile" value="1">Android</label>
  <label><input type="checkbox" name="mobile" value="1">その他</label>
</p>
<p>性別：
  <input type="radio" name="sex" value="male" id="male" checked><label for="male">男性</label>
  <input type="radio" name="sex" value="female" id="female"><label for="female">女性</label>
</p>
<p><input type="submit" value="送信"></p>
</form>
</body>
</html>

パスワード



<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>パスワード</title>
</head>
<body>
<h1>パスワード入力</h1>
<form action="#" method="post">
<p>パスワード：<input type="password" name="password" size="10" maxlength="5"></p>
<p><input type="submit" value="送信"></p>
</form>
</body>
</html>

ファイルをアップロード



<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ファイルをアップロード</title>
</head>
<body>
<h1>写真をアップロード</h1>
<form action="#" method="post" enctype="multipart/form-data">
<p>写真：
  <input type="file" name="picture">
</p>
<p><input type="submit" value="送信"></p>
</form>
</body>
</html>

隠しデータの送信



<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>隠しデータの送信</title>
</head>
<body>
<h1>隠しデータの送信</h1>
<form action="#" method="post">
<p><input type="hidden" name="user_id" value="012345"></p>
<p><input type="submit" value="送信"></p>
</form>
</body>
</html>