自主学習1-4「お問い合わせフォームをつくろう」

2020年7月25日 2020年9月14日

鷹の目ゴミコ

前回「自主学習1-3」ではHTML/CSSの基本構造を復習しました。今回は課題である「お問い合わせフォームの設置」について学習していきます。

contents

1 フォームとは？
- - 1.0.1 参考にしたい企業のお問合せフォーム
2 お問合せフォームの設置方法
3 自主学習1-4について、講師の評価

フォームとは？

WEBページにおけるフォームとは、入力欄と送信ボタンの設置されたページを指します。入力された値は送信ボタンを押すことでサーバ側に送られます。

フォームの事例

問い合わせ
アンケート
資料請求
会員登録
予約

などなど、入力内容によって様々なフォームを作ることが出来ます。

参考にしたい企業のお問合せフォーム

ゴミコ

実際に企業のホームページを見て、問い合わせフォームなどの作りを見てみよう。

コーポレートページは完成度が非常に高く、見ているだけで勉強になります。ユーザーが入力しやすいように記入例を提示したり、必須項目と任意項目で色分けしたり、随所に工夫が見受けられます。

ゴミコ

自分のサイトにも取り入れられる要素があれば、取り入れていこう。

お問合せフォームの設置方法

1.問い合わせ項目を書き出そう

まずは、お問い合わせページの表示部分（ユーザーがブラウザで閲覧する部分）をHTMLで作成します。body部にお問い合わせフォームで必要な項目を書き出していきます。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="./style.css">
		<meta charset="utf-8">
		<title>お問い合わせフォーム</title>
	</head>

	<body>
		<h1>お問い合わせフォーム</h1>
		<p>氏名（必須）</p>
		<p>ふりがな（必須）</p>
		<p>メールアドレス（必須）</p>
		<p>メールアドレス確認用（必須）</p>
		<p>年齢（任意）</p>
		<p>性別（任意）</p>
		<p>郵便番号7桁（任意）</p>
		<p>住所（任意）</p>
		<p>電話番号（任意）</p>
		<p>※半角英数</p>
		<p>お問い合わせの種類（必須）</p>
		<p>お問い合わせの内容（必須）</p>
		<p>タイトルに戻る</p>
	</body>

この段階でブラウザ表示させると以下のようになります。

<link rel="stylesheet" href="./style.css">

ゴミコ

前回のCSSファイルを今回のファイルにもlinkタグで指定しているので、下線と背景色が問い合わせフォームにも反映されているわね。

2.formタグをHTMLに記述し、inputタグで入力欄を設置しよう

お問い合わせフォームの各項目の入力欄は、formタグをHTMLファイルのbody部に記述し、さらにfromタグ内にinputタグで各入力欄を指定することで設置できます。フォームの入力欄でユーザーが入力し送信したデータはサイト側で受け取ることができます。

フォームの作成手順

formタグ1つ記述することでフォームが1つ設置される。
フォームの中にinputタグ、selectタグ、textareaタグなど、フォーム部品を配置して入力欄を設置していく。

<body>
		<form action="kakuninpage.html" method="post">
			<h1>お問い合わせフォーム</h1>
				<label for="name">
				<p>氏名（必須）</p>
				</label>
				<p><input id="name" type="text" name="yourname"placeholder="例）山田太郎">
				</p>
		 </form>
</body>

formタグ（2行目）を記述して、その中にinputタグ（7行目）を記述して入力欄を設置しました。入力欄はpタグで改行してから設置しています。

使用タグ

formタグ入力・送信フォームを作成する際に使用する要素。

action属性…実行された時の動作を指定する。
method属性…サーバにデータを送る形式をGETまたはPOSTで指定。

inputタグformタグで作成したフォームの中でテキスト入力欄やボタンなどの部品を作成する要素。input要素に入力された情報は、データとしてサーバに送信される。

type属性…部品の形式を指定。
type属性の値…text/password/radio/checkbox/file/hidden/submit/image/reset/button/がある。
placeholder属性…入力欄に初期表示する内容を指定。
id…この部品の名前。
name…入力された値をphpに送信する際に使用する名前。

labelタグフォームの中でフォームの項目名と構成部品（チェックボックス、ラジオボタンなど）を関連付けるためのタグ。関連付けを行うことにより、ブラウザでラベル部分をクリックした際にその構成部品をクリックした時と同じ動作が可能になる。

for属性…関連付けをする部品のID名を指定する。

これをブラウザで表示すると以下のようになります。

ゴミコ

入力欄が無事に設置されたわ。
labelタグの説明が文章だと分かりにくいかもしれないけれど…
マウスのカーソルを入力欄ではなく【氏名】のところを押した時にも「入力欄がアクティブになる」という処理を施したわ。

この様にHTMLファイルに必要なタグを記述していきます。今回タグの記述で参考にしたサイトがコチラ。

クロノドライブのHTML辞典
参考inputタグ解説ページ

ゴミコ

記述方法も詳しく教えてくれるので、めちゃくちゃ参考にさせていただきました。

他の項目も同じ要領で、idに名前を指定しながら記述を進めます。（idはCSSで装飾を施す際に必要になるので今のうちに付けていきます。）

※コード全文を確認される場合は＋を押すと表示されます

HTMLファイルを表示

HTMLファイルの記述全文

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="./style.css">
		<meta charset="utf-8">
		<title>お問い合わせフォーム</title>
	</head>

	<body>
		<form action="kakuninpage.html" method="post">
			<h1>お問い合わせフォーム</h1>
				<label for="name">
				<p>氏名（必須）</p>
				</label>
				<p><input id="name" type="text" name="yourname"placeholder="例）山田太郎">
				</p>
		<p>
				<label for="name2">ふりがな<span class="redname">（必須）</span>
				</label></p>
				<p><input id="name2" type="text" name="yourname"placeholder="例）やまだたろう">
			</p>
		</div>
			
		<div class="importentitem">
			<p>
				<label for="email">メールアドレス<span class="redname">（必須）</span>
				</label></p>
				<p><input type="email" id="email" name="youremail"placeholder="aaa@example.com">
			</p>

			<p>
				<label for="email2">メールアドレス確認用<span class="redname">（必須）</span>
				</label></p>
				<p><input type="email" id="email2" name="youremail" placeholder="例）aaa@example.com">
			</p>
		</div>

		<div class="item">	
			<p>
				<label for="age">年齢（任意）
				</label></p>

				<p><select size="1" name="age" value>
					<option value="age00">無回答</option>
					<option value="age10">10代</option>
					<option value="age20">20代</option>
					<option value="age30">30代</option>
					<option value="age40">40代</option>
					<option value="age50">50代</option>
					<option value="age60">60代以上</option>

				</select>
			</p>
			
			

			<p>
				性別（任意）
			</p>
				<input id="man" type="radio" name="sex" value="man">
				<label for="man">男性</label>
			

				<input id="woman" type="radio" name="sex" value="woman">
				<label for="woman">女性</label>
		</div>

        <div class="item">

			<p>〠郵便番号7桁（任意）</p>

			<p>
				<!-- ▼郵便番号入力フィールド(7桁) -->
<input type="text" name="zip11" size="10" maxlength="8" onKeyUp="AjaxZip3.zip2addr(this,'','addr11','addr11');"　placeholder="000-0000">
</p>


<p>住所（任意）</p>
<p>
<!-- ▼住所入力フィールド(都道府県+以降の住所) -->
<input type="text" name="addr11" size="60">
			</p>
		
			<p>
				<label for="telephonnumber">電話番号（任意）
				</label></p>
				<p><input type="tel" id="telephonnumber" name="telephonnumber" placeholder="例）0300000000"　pattern="^[0-9A-Za-z]+$"> ※半角英数
			</p>
		</div>

		<div class="importentitem">	
			<p>
				お問い合わせの種類<span class="redname">（必須）</span>
			</p>
				
					<input id="goods-shop" type="radio" value="goods-shop"name="type">
					<label for="goods-shop">
					商品や販売店についてのお問い合わせ</label>
					
				
					<input id="other" type="radio" value="other"name="type">
					<label for="other">
					その他についてのお問合せ</label>				
				

				

			<p>
				<label for="comment">お問い合わせの内容<span class="redname">（必須）</span>
				</label>
			</p>
				<textarea id="comment" name="comment" placeholder="自由にコメントください"></textarea>
		</div>

			<p>
				<input type="reset" value="内容をリセットする">
			</p>
			<p>
				<input type="submit" value="送信する">
			</p>
			 <p>
			 	<button><a href="index.html" >タイトルに戻る</a></button>
			 </p>


			
			
		
		</form>


	</body>

このファイルをブラウザで表示すると以下のようになります。

ゴミコ

お問合せフォームっぽくなってきたわ。
…この下線の主張が強すぎるので、CSSを修正していくわ。

3.CSSを記述しよう

CSSの記述は前回も参考にしたコチラのサイトをコピペしながら書き進めました。

HTMLクイックリファレンス
参考スタイルシートリファレンス

※コード全文を確認される場合は＋を押すと表示されます

CSSファイルを表示

CSSファイルの記述全文

@charset="UTF-8";

/* ヘッダー */
.header
{	
	text-align: center ;				/* テキスト、画像の真ん中寄せ */
	margin: 10px;
　padding : 20px;				/* 他のブロックとのスペース */
	background: powderblue ;				/* 背景色(確認用) */
}

body {color: midnightblue;background-color: powderblue;
margin: 0 ;				/* スペース */
padding: 0 ;			/* 余白 */
font-size: 15px ;		/* 文字サイズ */
line-height: 1.618 ;	/* 行の高さ */
}

h1 {
	border-bottom:solid 2px darkturquoise;
	border-width: thick;
	font-size: 30px
}

/* 全体(デスクトップPCとスマホ)に適用するCSS */

.redname
{
	color: red;
}



input[type="text"],
textarea {
  outline: none;
  border: 6px double #008BBB;
  -webkit-transition: all .3s;
  transition: all .3s;
}

input[type="text"]:focus,
textarea:focus {
  box-shadow: 3 3 3px #1abc9c;
  border: 6px solid #1abc9c;
}

input[type="email"],
textarea {
  outline: none;
  border: 6px double #008BBB;
  -webkit-transition: all .3s;
  transition: all .3s;
}

input[type="email"]:focus,
textarea:focus {
  box-shadow: 3 3 3px #1abc9c;
  border: 6px solid #1abc9c;
}

input[type="tel"],
textarea{
  outline: none;
  border: 6px double #008BBB;
  -webkit-transition: all .3s;
  transition: all .3s;
}

input[type="tel"]:focus,
textarea:focus {
  box-shadow: 3 3 3px #1abc9c;
  border: 6px solid #1abc9c;
}

.item
{
  margin: 10px;
  border-radius: 5px;
  background: lightcyan;
  color: midnightblue;
  display: block;
  padding: 15px;
  text-decoration: none;
}

.importentitem
{
  margin: 10px;
  border-radius: 5px;
  background: lightcyan;
  color: midnightblue;
  display: block;
  padding: 15px;
  text-decoration: none;
}

.main
{	
  border-radius: 5px;
  background: lightcyan;
  color: midnightblue;
  display: block;  
  text-decoration: none;
  text-align:center;
　margin: 10px;
　padding : 20px;
　justify-content:center;
}

.newlist
{	
  border-radius: 5px;
  background: lightcyan;
  color: midnightblue;
  display: block;  
  text-decoration: none;
  text-align:center;
  margin: 10px;
  padding : 20px;
}

.button-wrapper
{
text-align : center ;
display: block;
margin: 10px;
padding : 20px;
justify-content:center;
}

/* フッター */
.footer
{	
	text-align: center ;				/* テキスト、画像の真ん中寄せ */
	margin: 10px;					/* 他のブロックとのスペース */
	padding : 20px;					/* 上下の余白 */
	background: powderblue ;
}

これをブラウザで表示させると以下のようになります。