フロントエンド - HTML/HTML5 - HTMLタグ

[fr-sasaki]

■目的

HTMLのタグを理解し、実際に簡単なフォームを作成します。

■規約

• HTML5で作成
• 文字コードはUTF-8
• 改行コードはLF
• インデントはスペース2つ
• 意味を持って改行する
  • ブロック、リスト、テーブル要素は改行し、子要素にはインデントを挿入する
  • ヘッダ、フッタ、ナビ、その他機能が大きく分かれる部分は空行を入れる

例

<blockquote>
  <p><em>developers</em>, training.</p>
</blockquote>
<ul>
  <li>php</li>
  <li>ruby</li>
  <li>smalltalk</li>
</ul>

<footer>
  <p>training</p>
</footer>

■仕様

全体

• 見出しを付ける

  トップページ

• 次のフォーム画面へ遷移するリンク

　

フォーム画面

• 以下のフォーム項目
• 項目名にラベル
• 次の確認画面へ遷移するボタン

フォーム項目	フォームタイプ	備考
姓	テキストボックス
名	テキストボックス
性別	ラジオボタン(男性・女性)	リスト形式で表示
郵便番号	テキストボックス(3桁と4桁でテキストボックスを分ける)
都道府県	セレクトボックス(いくつかの都道府県を選択肢にし、1行目は--)
メールアドレス	テキストボックス
趣味	チェックボックス 設問:趣味はなんですか 選択肢:音楽鑑賞,映画鑑賞,その他(テキストボックスあり)
ご意見	テキストエリア

　

確認画面

• フォーム画面で入力した値を表形式で表示(今はあてでよい)
• フォーム画面へ戻るボタン
• 完了画面へ遷移するボタン

　

完了

• 「応募しました」という文言表示
• トップページへ遷移するリンク

研修サーバ情報にあるURLからブラウザで確認出来るようにして下さい。