HTML8 〜フォーム〜
下記のWebページを作成してください。
引用タグと整形済みタグを利用して、下記のWebページを作成してください。
フォームの練習
※action属性、method属性、name属性、value属性などformの各属性は任意です。
※見出しはh1でもh2でも任意の見出しを使って構いません。また、名前、性別などの文章もpタグでもlabelタグでも構いません(フォーム関連タグがしっかり記述できていればOKです)。
設定手順
デスクトップ上にフォルダ「webst8」を作成します(すでに作成済みの場合は不要です)。
「webst8」フォルダ上に、「html-lesson8」フォルダを作成します。
「html-lesson8」フォルダ上にファイル名「lesson8.html」を新規作成してWebページを作成します。
ヒント
利用するタグは下記になります。
- フォームタグ form
- インプットタグ input
- セレクトタグ select
- テキストエリアタグ textarea
参考サイト：3-14. フォームタグform | 初心者がはじめに覚えておきたい HTML の基本とタグを紹介
こたえ
下記zipファイルに答えを格納しています。
ソースコード
下記は回答の一例です。action属性、method属性、name属性、value属性などformの各属性は回答と違っていても構いません。
name属性やvalue属性などは回答と違っていても構いません。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>はじめてのHTML</title> </head> <body> <h1>フォームの練習</h1> <form action="" method="post"> <p> 名前： <input type="text" name="yourname" placeholder="富士太郎" value=""> </p> <p> 性別： <input type="radio" name="sex" value="man">男 <input type="radio" name="sex" value="woman">女 </p> <p> 職業： <input type="checkbox" name="job" value="student">学生 <input type="checkbox" name="job" value="office-worker">会社員 <input type="checkbox" name="job" value="self-employed">自営業 <input type="checkbox" name="job" value="unemployed">無職 </p> <p> 生まれた年代： <select name="nendai"> <option value="1960s">1960年代</option> <option value="1970s">1970年代</option> <option value="1980s">1980年代</option> <option value="1990s">1990年代</option> <option value="2000s">2000年代</option> </select> </p> <p> 備考： <br> <textarea name="messege" style="width:100%" rows="8" cols="80" placeholder="なにかあればここに記載ください。"></textarea> </p> <p> <input type="submit" name="submit" value="送信する"> </p> </form> </body> </html> |