Embed Size (px)
Citation preview
ＨＴＭＬ演習 ＨＴＭＬ５版
別冊
確認問題解答
演習問題解答
1-1A ⒸShogo Nakajima 2017
- 2 -
＊この【確認問題解答／演習問題解答】は，書籍『ＨＴＭＬ演習 ＨＴＭＬ５版』（発行：株式会社ＳＣＣ）の、
ダウンロード用［別冊］として，当該書籍の読者に限定して提供しています。
- 3 -
確認問題解答／演習問題解答
第１章
■確認問題 1.1 (1) ②
HTTP による通信で、ブラウザから Web サーバに対して Web ページを要求する
ことを「リクエスト」、その要求に応えて Webサーバが返信することを「レスポ
ンス」と呼びます。したがって、正解は「②リクエスト」です。
■確認問題 1.1 (2) ③
Web サーバから送信されてくる「レスポンス」は、HTMLデータです。この HTML
をブラウザが解釈して画面を合成することを「レンダリング」と呼びます。し
たがって、正解は「③ レンダリング」です。
■確認問題 1.1 (3) ④
ブラウザからのリクエストに対して、すでに用意された HTMLファイルをレスポ
ンスする場合を「静的な Web ページ」と呼びます。これに対して、Web アプリ
ケーションなどでは、リクエストに添加されたデータによって CGI プログラム
が HTML を新たに生成します。このような HTML を「動的な Web ページ」と呼び
ます。したがって、正解は「④ 動的 Web ページ」です。
■確認問題 1.2 (1) ①
HTML では「<タグ名> ～ </タグ名>」で文章を囲い、文章に意味や役割を設
定します。したがって、正解は「① タグ」です。
- 4 -
■確認問題 1.2 (2) ②④
HTML5 の特徴は、「CSS3」や「JavaScript の API」を仕様に含めたところにあ
るので①は間違いです。また、バックグラウンド処理もできる仕様になってい
るため③も間違いです。したがって、正しいのは「② 同じページのまま Web サ
ーバと通信できる。」と「④ マルチメディア再生ができる。」です。
■確認問題 1.2 (3) ①
CSS は、HTMLファイル内にも、外部ファイルとしても記述できます。そのため、
②と③は間違いです。また「table タグ」は、HTMLです。CSSではありません。
したがって、正しいのは「① CSS は、Web ページの文章とデザインを分離する。」
です。
■確認問題 1.2 (4) ④
Web サーバ側で動作するプログラムを作成する言語を「サーバーサイドスクリ
プト言語」と呼び、クライアントであるブラウザ側で動作するプログラミング
言語は「クライアントサイドスクリプト言語」と呼びます。したがって、正解
は「④ クライアントサイドスクリプト言語」です。
■確認問題 1.3 (1) ③
HTML ファイルを作成するには、テキストエディタが必要です。ブラウザやメ
ールソフトによっては、HTMLファイルを作る機能があるかもしれませんが、こ
の中で最も適しているものは「③ テキストエディタ」になります。
■確認問題 1.3 (2) ①イ②エ③ウ④ア
HTML のタグは、最初に「 開始タグ 」、「 情報を追加する文章 」、「 終了タ
グ」の順で記述します。この「開始タグ 」から「終了タグ 」までの部分を「要
素 」と呼びます。
- 5 -
■確認問題 1.3 (3) ①イ②エ③ウ
HTML のタグには、「属性」のあるものがあります。属性とは、タグに追加す
る補足情報です。
属性は「 属性名 」と「 属性値 」で構成されます。
属性の書き方は、属性名を記述し、「=」と属性値を記述します。属性値は「ダ
ブルクォーテーション」で囲みます。
■確認問題 1.4 (1) ①
HTML5 のコンテンツ・モデルでは、title 要素は「メタデータ・コンテンツ」
です。したがって、正しいのは「①メタデータ・コンテンツ」です。
■確認問題 1.4 (2) ③
HTML5 のセクションは、見出しとその内容を含む文章をまとめたものであり、
新たなセクションが開始されると、アウトラインのレベルが 1つ下ります。し
たがって、正しいのは「③ 見出しとその内容を含む文章をまとめたもの」です。
■確認問題 1.4 (3) ③
HTML5では、要素の内容が記事であることを表す「article」という要素が追
加されました。したがって、正しいのは「③ article 要素」です。
- 6 -
■演習問題 1 解答例
exercises01.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5演習</title>
</head>
<body>
<h1>コンピュータ</h1>
<h2>ソフトウェア</h2>
<h3>オペレーティングシステム</h3>
<h3>アプリケーション</h3>
<h2>ハードウェア</h2>
<h3>CPU</h3>
<h3>メモリ</h3>
<h3>入力装置</h3>
<h3>出力装置</h3>
</body>
</html>
- 7 -
第２章
■確認問題 2.1 (1) ②④
em 要素は、テキストを強調するために使用します。mark 要素は、テキストを
ハイライトして目立たせ位置をわかりやすくします。b 要素は、文書内のキー
ワードや専用語句など、他の文章と区別したいときに使用します。i 要素は、
音声や想像、専門用語など他と区別してイタリック体で表示するために使用し
ます。したがって、間違っているのは「② mark 要素は、音声や想像、専門用
語などを、他のテキストと区別するために使用します。」「④ i 要素は、テキス
トをハイライトして目立たせ、他の文章から参照する際に位置を判りやすくし
ます。」です。
■確認問題 2.1 (2) ③
免責、警告、法的規制、著作権（コピーライト）などの注釈や細目を表現する
ときに使用するのは「③ small 要素」です。
■確認問題 2.1 (3) ③④
http://www.scc-kk.co.jpのルートにある、sample02.html を絶対パスで記述す
ると、「http://www.scc-kk.co.jp/sample02.html」です。同じルートにある場
合、相対パスはファイル名だけです。そのため、正しいのは、
「③<a href="sample02.html">リンク</a>」と
「④<a href="http://www.scc-kk.co.jp/sample02.html">リンク</a>」です。
■確認問題 2.2 (1) ④
GIF は、256 色までしか扱えないため写真には向きません。したがって①は間
違いです。PNG には、アニメーション機能はないので②は間違いです。JPEGは、
非可逆圧縮で圧縮比率を上げると画質が下がるため③は間違いです。したがっ
て、正しいのは「④ SVG は、画像を線や面の集合で表現する「ベクター画像」
によるフォーマット。画像を拡大縮小しても、画像が粗くなりにくい。」のみです。
- 8 -
■確認問題 2.2 (2) ①
img要素で画像を表示する際、横は width属性、縦は height属性に指定します。
また、コメントは alt 属性で指定します。したがって、正しいのは「① <img
src="img/cat01.jpg" width="200" height="100" alt="ニャン太郎の写真">」
になります。
■確認問題 2.3 (1) ②
サウンドファイルを再生するときに利用する、HTML5 の要素は「② audio 要素」
です。
■確認問題 2.3 (2) ④
HTML5 では、属性値に属性名と同じ名前を値として指定するとき、属性名のみ
を記述すればよくなりました。したがって、正解は「④ autoplay」です。
■確認問題 2.3 (3) ④
動画ファイルを再生するときに利用する、HTML5 の要素は「④ video 要素」で
す。
■確認問題 2.4 (1) ②
canvas 要素に図を描くには、 canvas 要素をオブジェクトとして扱う
JavaScriptが必要です。したがって必要なのは、「② script 要素に記述した、
もしくはファイルとして用意した JavaScript」です。
■確認問題 2.4 (2) ①
すべての要素にある属性のことを「① グローバル属性」といいます。
- 9 -
■確認問題 2.4 (3) ④
canvas の領域を指定するには、横幅をcanvas 要素のwidth属性、縦幅をheight
属性に指定します。したがって正しいのは「④ <canvas id="myc" width="200"
height="100"> ～ </canvas>」です。
■演習問題 2 解答例
exercises02_1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5演習</title>
</head>
<body>
<h1>吾輩は猫である</h1>
<p><a href="exercises02_2.html"><img src="img/cat02.jpg"
width="100" height="80" alt="猫の写真"></a></p>
</body>
</html>
exercises02_2.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5演習</title>
</head>
<body>
- 10 -
<h1>吾輩は猫である</h1>
<p>夏目漱石 (<time>1867年 2月 9日</time>－<time>1916年 12月 9
日</time>）</p>
<p><ruby>吾輩<rp>(</rp><rt>わがはい</rt><rp>)</rp></ruby>は
<i>猫</i>である。<strong>名前はまだ無い</strong>。</p>
</body>
</html>
- 11 -
第３章
■確認問題 3.1 (1) ①
並列順序型リストを作るには、ul 要素の内容として、項目を li 要素で記述し
ます。したがって、正解は「①ul 要素の内容として、項目を li 要素で記述す
る。」です。
■確認問題 3.1 (2) ③
順序付きリストを作るには、ol 要素の内容として、項目を li 要素で記述しま
す。したがって、正解は「③ol 要素の内容として、項目を li 要素で記述する。」
です。
■確認問題 3.1 (3) ④
定義型リストを作るには、dl 要素の内容として、dt 要素で語句を、dd 要素で
語句の説明を記述します。したがって、正解は「④dl 要素の内容として、dt 要
素の内容に語句を、dd 要素の内容にその説明を記述する。」です。
■確認問題 3.1 (4) ①
並列順序型リストのマーカーを変更するには、style 属性で CSSを指定します。
CSS で、並列順序型リストのマーカーを非表示にするには、「list-style-type:
none 」 を style 属 性 に 指 定 し ま す 。 し た が っ て 正 解 は 「 ①
style="list-style-type: none"」です。
■確認問題 3.2 (1) ②③
table 要素は、内容として caption 要素、thead 要素、tbody 要素などを含み
ます。しかし tbody 要素は、内容として th 要素、tr 要素、td 要素などを含
むので②は間違いです。また、caption 要素は、テーブルにキャプション(表の
タイトルや説明)を付けるもので、ヘッダー行は、thead 要素で表現します。し
たがって③も間違いです。「④ tr 要素はテーブルの行を表し、その内容として
- 12 -
td 要素でセルを構成します。」は、正しい説明です。その結果、間違っている
のは、②と③です。
■確認問題 3.2 (2) ④
caption 要素は、table 要素の内容として先頭に記述するため①は正しいです。
tbody 要素は、caption 要素や colgroup 要素、thead 要素よりも後ろに記述
するので②も正しいです。
thead 要素は、tbody 要素、tfoot 要素よりも前に配置するため③は正しいで
す。
tbody 要素は、table 要素の行グループとして複数登場してもかまいませんが、
thead要素と tfoot 要素は、テーブルに 1 つだけなので、④のみが間違いです。
■確認問題 3.2 (3) ①
横に並ぶ 3 つのセルを結合するには、th 要素、td 要素の colspan 属性で指定
します。したがって、正解は「① <td colspan="3">3 つのセルを接合して表示
します。</td>」です。
■演習問題 3 (1) 解答例
exercises03_1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5演習</title>
</head>
<body>
<h1>オムライスの作り方</h1>
<p>1人分の材料</p>
- 13 -
<ul>
<li>ご飯・・・200g</li>
<li>卵・・・1個(溶いておく)</li>
<li>タマネギ・・・1/4個(みじん切り)</li>
<li>挽肉・・・50g</li>
<li>ケチャップ・・・大さじ 1</li>
</ul>
<p>作り方</p>
<ol>
<li>フライパンでタマネギと挽肉を炒める。</li>
<li>ご飯とケチャップを入れ、炒めてから皿に移す。</li>
<li>フライパンに卵を薄く引く。</li>
<li>少し固まったところに、先ほどのご飯を入れる。</li>
<li>形を整えながら皿に盛る。</li>
</ol>
</body>
</html>
■演習問題 3 (2) 解答例
exercises03_2.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5演習</title>
<style type="text/css">
table, tr, td, th {
border: 2px solid;
- 14 -
border-collapse: collapse;
padding: 5px;
}
</style>
</head>
<body>
<h1>スマートフォン料金プラン</h1>
<table>
<caption>データプランでは、音声通話はできません。</caption>
<thead>
<tr>
<th colspan="2"></th>
<th>ベーシックプラン</th>
<th>データプラン</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan=2>基本料金</th>
<th>高速 100M</th>
<td>6,000円/月</td>
<td>4,500円/月</td>
</tr>
<tr>
<th>低速 12M</th>
<td>5,500円/月</td>
<td>3,500円/月</td>
</tr>
<tr>
- 15 -
<th colspan="2">プロバイダ料金</th>
<td>300円/月</td>
<td>500円/月</td>
</tr>
</tbody>
</table>
</body>
</html>
- 16 -
第４章
■確認問題 4.1 (1) ①エ②ウ③イ④ア
フォームは、ブラウザに「コントロール」を表示します。ユーザーは「コント
ロール」を使いテキストを入力したり項目を選択したりすることができます。
ユーザーが入力した情報は「submit ボタン」をクリックすることで「Web サー
バ」に送信できます。「Web サーバ」は、取得した情報を「CGI プログラム」な
どに渡してデータベース検索などを行えます。
■確認問題 4.1 (2) ①
フォームに入力した情報は、リクエスト情報として Web サーバに渡されます。
このWebサーバや起動するプログラムの場所を示すURL は、form 要素のaction
属性で指定します。したがって、正解は「① form 要素の action 属性で指定
する。」です。
■確認問題 4.1 (3) ③
label 要素は、コントロールなどのキャプションやタイトルを表現します。
label 要素の for 属性と、コントロールの id 属性の値を同じにすることで、
どのコントロールのキャプションかを表現できます。したがって、正解は「③
label 要素の for 属性と、コントロールの id 属性の値を同じにする。」です。
■確認問題 4.2 (1) ①
input要素の type属性に「password」を指定すると、入力したテキストが「*」
や「●」で表示されます。したがって、正解は「① <input type="password"
name="password">」です。
■確認問題 4.2 (2) ②
ラジオボタンは、同じ name 属性値のボタン同士が同じグループになります。し
たがって、正解は「② ラジオボタン２とラジオボタン３」です。
- 17 -
■確認問題 4.3 (1) ③
正しい説明は以下になります。
フォームに入力したデータは、Web サーバに渡されるため①は間違いです。ま
た、②は「CGI プログラムが Web サーバとして機能して」の部分が明らかに間
違いです。④は「Web サーバを経由せずに CGI プログラムへ渡されます。」の
部分がすでに間違っています。したがって、正しいのは③です。
■演習問題 4 解答例
exercises04.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5演習</title>
</head>
<body>
<h1>お問い合わせ</h1>
<form action="cgi/sample1.php" method="post">
<p><label>お名前：<input type="text" name="uname"
size="20"></label></p>
<p>
<label for="ken">お住まいの都道府県：</label>
<select id="ken" name="pref_name">
<option value="" selected>都道府県
<option value="北海道">北海道
<option value="青森県">青森県
<option value="岩手県">岩手県
<option value="宮城県">宮城県
<option value="秋田県">秋田県
- 18 -
<option value="山形県">山形県
<option value="福島県">福島県
<option value="茨城県">茨城県
<option value="栃木県">栃木県
<option value="群馬県">群馬県
<option value="埼玉県">埼玉県
<option value="千葉県">千葉県
<option value="東京都">東京都
<option value="神奈川県">神奈川県
<option value="新潟県">新潟県
<option value="富山県">富山県
<option value="石川県">石川県
<option value="福井県">福井県
<option value="山梨県">山梨県
<option value="長野県">長野県
<option value="岐阜県">岐阜県
<option value="静岡県">静岡県
<option value="愛知県">愛知県
<option value="三重県">三重県
<option value="滋賀県">滋賀県
<option value="京都府">京都府
<option value="大阪府">大阪府
<option value="兵庫県">兵庫県
<option value="奈良県">奈良県
<option value="和歌山県">和歌山県
<option value="鳥取県">鳥取県
<option value="島根県">島根県
<option value="岡山県">岡山県
<option value="広島県">広島県
- 19 -
<option value="山口県">山口県
<option value="徳島県">徳島県
<option value="香川県">香川県
<option value="愛媛県">愛媛県
<option value="高知県">高知県
<option value="福岡県">福岡県
<option value="佐賀県">佐賀県
<option value="長崎県">長崎県
<option value="熊本県">熊本県
<option value="大分県">大分県
<option value="宮崎県">宮崎県
<option value="鹿児島県">鹿児島県
<option value="沖縄県">沖縄県
</select>
</p>
<fieldset><legend>性別</legend>
<input type="radio" name="male" id="male"><label
for="male">男性</label>
<input type="radio" name="female" id="female"><label
for="female">女性</label>
</fieldset>
<p><label>メールアドレス：<input type="email" name="email"
size="20"></label></p>
<p><label for="demand">お問い合わせ内容を以下に記入してくださ
い：</label><br>
<textarea id="demand" name="demand" cols="40" rows="4"
maxlength="20">
</textarea>
</p>
- 20 -
<p><input type="submit" value="送信"></p>
</form>
</body>
</html>
- 21 -
第５章
■確認問題 5.1 (1) ④
CSS の構文は「セレクタ { プロパティ: 値 }」と記述するため、正解は「④ Ａ・
セレクタ Ｂ・プロパティ Ｃ・値」になります。
■確認問題 5.1 (2) ②
CSS ファイルを外部参照するには「② link 要素」を使います。
■確認問題 5.1 (3) ④
要素の子要素、さらにその子要素(孫要素)すべてに対してスタイルが適用され
るのは「子孫セレクタ」です。したがって、正解は「④ (E は親、Fは子要素)
E, F { ... }」です。
■確認問題 5.2 (1) ②
文字の位置を行の中央に表示するには、text-align プロパティに center を指
定します。したがって、正解は「② text‐align」です。
■確認問題 5.2 (2) ①
長さの指定で 1文字分長さを指定するときの単位は「em」です。したがって、3
文字分の横幅を指定するときは「① 3em」と記述します。
■確認問題 5.2 (3) ③
文字に影を付けるには、「text-shadowプロパティ」を使います。
■確認問題 5.3 (1) ④
ボックスの横幅は「内容の横幅＋、左右の余白（padding）＋左右の境界線(border）
の幅」になります。したがって、300＋20＋20＋10＋10 で「④ 390px」になり
ます。
- 22 -
■確認問題 5.3 (2) ③
①の text-align は、行揃えの位置や均等割付を指定します。②の
vertical-alignは、行のなかでのテキストや画像の縦方向の位置を指定します。
④の positionは、要素の配置方式を指定します。テキストや画像の回り込みを
指定するプロパティは「③ float」です。
■確認問題 5.3 (3) ④
要素に対して絶対的な配置を決めるには、position プロパティに absolute を
指定します。したがって正解は「④ position プロパティに、absolute を指定
する」です。
■確認問題 5.3 (4) ③④
①は、上下左右のマージンが auto になるので、左右はセンタリングされます。
②は、最初の値が上下、次の値が左右のマージンです。左右が autoなので、セン
タリングされます。③は、上(auto)、左右(5px)、下(auto)の順で指定しているのでセンタ
リングされません。④は、上(auto)、右(5px)、下(auto)、左(5px)の順なので、センタリ
ングされません。したがって、ブラウザの中央に表示されないものは③④です。
■演習問題 5
exercises05.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css"
href="css/exercises05.css">
<title>HTML5演習</title>
</head>
- 23 -
<body>
<div id="site">
<header>ヘッダー</header>
<div id="wrapper">
<nav>メニュー</nav>
<section>コンテンツ</section>
</div>
<aside>サイドバー</aside>
<footer>フッター</footer>
</div>
</body>
</html>
exercises05.css
@charset "utf-8";
body {
background-image: url("../img/position.jpg");
}
header, nav, section, aside, footer {
border:1px solid #999999;
border-radius:8px;
padding: 10px 10px 10px 10px;
background:#ffffff;
}
#site {
margin: 20px auto;
width : 800px;
height: 600px;
}
- 24 -
header {
margin: 0px 0px 0px 0px;
height: 80px;
width: 778px;
}
#wrapper {
margin: 10px 0px 10px 0px;
float: left;
height: 380px;
width: 646px;
}
nav {
margin: 0px 0px 0px 0px;
float: left;
height: 380px;
width: 120px;
}
section {
margin: 0px 0px 0px 0px;
float: right;
height: 380px;
width: 470px;
}
aside {
margin: 10px 0px 10px 0px;
float: right;
height: 380px;
width: 120px;
}
- 25 -
footer {
margin: 0px 0px 0px 0px;
clear: both;
height: 54px;
width: 778px;
}
- 26 -
第６章
■確認問題 6.1 (1) ②
オブジェクト指向プログラミングでは、オブジェクトのプロパティをデータと
して、メソッドを機能として利用しプログラムしていきます。したがって、正
解は「② データとしてプロパティを、機能としてメソッドを使いプログラミン
グする。」です。
■確認問題 6.1 (2) ③
JavaScriptでは、数字と数値の足し算は、文字同士の連結になります。つまり、
「"3" + 4」は、文字 3と文字 4の連結になります。したがって、正解は「③ 34」
です。
■確認問題 6.1 (3) ①var ②docment ③write ④"3 + 4 = "
<script>
var a = 3;
var b = 4;
document.write("3 + 4 = ", a + b);
</script>
■確認問題 6.2 (1) ②
変数 iは 10 で初期化されているため、if文の条件式「i != 10」は falseにな
ります。条件式が falseなので、else 文のステートメントブロックが実行され
ます。したがって、正解は「②「i は 10 ではありません。」と表示される。」
です。
- 27 -
■確認問題 6.2 (2) ③
for 文の変数 iは 1に初期化されて条件判断「i < 3」へ進みます。結果は true
なので、ステートメントブロックへ進み、画面には「1回目」と表示されます。
次に「++i」により i は 2、条件判断は true になります。その結果、画面には
「2 回目」が表示されます。再び「++i」で iは 3になりますが、条件判断の「i
< 3」は falseになるため処理は終了します。したがって、正解は「③「1 回目」
の下に「2 回目」と表示される。」です。
■確認問題 6.3 (1) ②
オリジナル関数の宣言で、関数名に使用できる文字は、半角英数字と「$(ダラ
ー)」、「_(アンダースコア)」です。また、数字から始まる関数名は使えません。
したがって、間違っているのは「② function 2test(){ alert("HTML5"); }」
です。
■確認問題 6.3 (2) ④
関数は呼び出して実行した後、戻り値を return文で返すことができます。その
戻り値は、代入演算子を使って変数に代入できます。代入とは、左側の値を右
側の変数にコピーすることです。したがって、正しいのは「④var a = add(3,4);」
です。
■確認問題 6.3 (3) ③
JavaScript では、Web ページを Window オブジェクトとして扱います。この
Window オブジェクトが、Web ページを操作するときの親オブジェクトになりま
す。したがって正しいのは「③window オブジェクト」です。
■確認問題 6.4 (1) ②
マウスで左クリックしたときに発生するイベントは、「② onClick イベント」
です。
- 28 -
■確認問題 6.4 (2) ②
Web ページが読み込まれたときに発生するイベントは「② onLoad イベント」
です。
■確認問題 6.4 (3) ②
form コントロールの入力値を取得したいときは、フォームのオブジェクト→コ
ントロールのオブジェクト→value プロパティの順に参照します。したがって
正解は「② フォームコントロールオブジェクトの value プロパティを参照す
る。」です。
■確認問題 6.4 (3) ①④
5項目のセレクタのオブジェクト名は全て「tselect」です。そのため、チェッ
クされているかどうかを調べるには、配列で「tselect[0].selected」～
「tselect[4].selected」が true かどうかを調べます。また、値は valueプロパ
ティに格納されているので「 document.question.tselect[0].value」～
「document.question.tselect[4].value」の値が、"30"かどうかを調べます。
配列の各要素へは変数 i の値を番号としてアクセスします。for 文では、最初
に変数 i でその番号を作り出しています。ただし、②は変数 i が 0、1、2、3
までしか変化せず、5番目の要素にアクセスしていません。③は 1、2、3、4ま
でしか変化しないので 1 番目の要素にアクセスしていません。①と④は、正し
く全てのセレクタをチェックしています。したがって、正しいのは①④です。
■演習問題 6
exercises06.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
- 29 -
<script>
function check() {
var message = "";
var i;
if(!
document.question.email.value.match(/^¥S+@¥S+¥.¥S+$/)) {
message += "メールアドレスが正しくありません¥n";
}
if(document.question.sex[0].checked == false &&
question.sex[1].checked == false) {
message += "性別が選択されていません¥n";
}
for(i = 1; i < 5; ++i){
if(document.question.age[i].selected == true) {
break;
}
}
if(i == 5) {
message += "年齢が選択されていません";
}
if(message != "") {
alert(message);
return false;
}
alert("送信します。");
return true;
}
</script>
<title>HTML5演習</title>
- 30 -
</head>
<body>
<form name="question" action="sample1.php" method="post"
onSubmit="return check();">
<p><label>eメール：<input type="email"
name="email"></label></p>
<p><label>性別：<input type="radio" name="sex" value="男性">
男性
<input type="radio" name="sex" value="女性"></label>女性
</p>
<p><label for="age">年齢：</label>
<select id="age" name="age">
<option selected value="0">選択してください</option>
<option value="1">1 ～ 19歳</option>
<option value="2">20 ～ 39歳</option>
<option value="3">40 ～ 59歳</option>
<option value="4">60歳 ～ </option>
</select>
<p><input type="submit" value="送信"></p>
</form>
</body>
</html>
![隣接する を整え、⼤⼈も⼦どもも安全に⾃然 ... - Sankai ...sankai-pro.com/wp-content/uploads/2020/06/RB_CloudFan...[1] 隣接する5,000平 の森に、 も どもも安全に](https://img.pdfslide.tips/doc/110x75/6002b1574da74f553f51228b/e-aaaafc-sankai-sankai-procomwp-contentuploads202006rbcloudfan.jpg)
