8月25日の作業データ（お問合せフォーム）

今回の項目は

  • お名前（必須）
  • メールアドレス（必須）
  • お住いの地域（任意）
  • お問い合わせ項目（必須）
  • お問い合わせ内容（必須）


input.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>入力画面</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>入力画面</h1>
<form action="output.php" method="post">
<dl>
<dt>お名前<span>必須</span></dt>
<dd><input type="text" name="onamae" required placeholder="例:山田 太郎"></dd>
<dt>メールアドレス<span>必須</span></dt>
<dd><input type="email" name="email" required placeholder="例:aaa@example.com"></dd>
<dt>お住いの地域<span class="free">任意</span></dt>
<dd>
<select name="area">
<option value="">選択して下さい</option>
<option value="北海道">北海道</option>
<option value="東北">東北</option>
<option value="関東">関東</option>
<option value="中部">中部</option>
<option value="近畿">近畿</option>
<option value="中国">中国</option>
<option value="四国">四国</option>
<option value="九州・沖縄">九州・沖縄</option>
</select>
</dd>
<dt>お問い合わせ項目<span>必須</span></dt>
<dd class="radio">
<label for="item-1">
<input id="item-1" type="radio" name="item" value="商品について" required>商品について
</label>
<label for="item-2">
<input id="item-2" type="radio" name="item" value="採用について">採用について
</label>
<label for="item-3">
<input id="item-3" type="radio" name="item" value="資料請求">資料請求
</label>
</dd>
<dt>お問い合わせ内容<span>必須</span></dt>
<dd><textarea name="message" required placeholder="お問い合わせの内容をご入力下さい"></textarea></dd>
</dl>
<div class="form-btn">
<input type="submit" value="確認画面へ">
<input type="reset" value="リセット">
</div>
</form>

</body>
</html>


確認画面
output.php

<?php
$onamae = $_POST["onamae"];
$email = $_POST["email"];
$area = $_POST["area"];
$item = $_POST["item"];
$message = $_POST["message"];
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>確認画面</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>確認画面</h1>
<form action="#" method="post">
<dl>
<dt>お名前<span>必須</span></dt>
<dd><?php echo $onamae ?></dd>
<dt>メールアドレス<span>必須</span></dt>
<dd><?php echo $email ?></dd>
<dt>お住いの地域<span class="free">任意</span></dt>
<dd><?php echo $area ?></dd>
<dt>お問い合わせ項目<span>必須</span></dt>
<dd><?php echo $item ?></dd>
<dt>お問い合わせ内容<span>必須</span></dt>
<dd><?php echo $message ?></dd>
</dl>

<div class="form-btn">
<input type="submit" value="データを送信">
<input type="button" onclick="history.back();" value="入力画面に戻る">
</div>
</form>

</body>
</html>


スタイルシート

@charset "utf-8";

:root{
--main_color:#e4002b;
--color_2:#f2f2f2;
--color_3:#ff8710;
--color_4:#CCC;
--txt-color:#333;

}

html{box-sizing:border-box;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0;box-sizing:border-box;}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}img{border-style:none;vertical-align: bottom}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none;}a{text-decoration:none;}.wrapper{overflow:hidden;}body{overflow-y:scroll;}img{max-width: 100%;}

h1{
text-align: center;
padding: 50px 0 30px;
color: var(--main_color);
}
form{
width: 800px;
margin: 0 auto 100px;
color: var(--txt-color);
}
form>dl{
display: flex;
flex-wrap: wrap;
border: 1px solid var(--color_4);
margin-bottom: 50px;
}
form dt{
width: 30%;
background-color: var(--color_2);
padding: 30px;
border-right: 1px solid var(--color_4);
color: #000;
}
form dt>span{
display: block;
font-size: 13px;
background-color: var(--main_color);
color: #FFF;
width: 3em;
padding: 4px 6px;
margin-top: 5px;
}
form dt>span.free{
background-color: var(--color_3);
}
form dd{
width: 70%;
padding: 30px;
}
form dt:nth-of-type(n+2),form dd:nth-of-type(n+2){
border-top: 1px solid var(--color_4);
}
[type="text"],[type="email"]{
border: 1px solid var(--color_4);
padding: 6px;
width: 50%;
}
[type="text"]:focus-visible,[type="email"]:focus-visible{
outline:none;
}
select{
border: 1px solid var(--color_4);
padding: 6px;
-webkit-appearance:auto;
}
[type="radio"]{
transform: scale(2);
margin-right: 16px;
cursor: pointer;
accent-color: #646464;/* ある程度濃い色出ないとダメ */
}
.radio>label{
display: block;
margin-bottom: 16px;
cursor: pointer;
background-color: #f6b9c4;
}
textarea{
border: 1px solid var(--color_4);
padding: 6px;
width: 80%;
height: 160px;
}
[type="submit"]{
padding: 20px 70px;
background-color: var(--color_4);
margin-right: 30px;
}
[type="reset"],[type="button"]{
padding: 20px 30px;
background-color: #f6b9c4;
}