プレースホルダを設定するには、フィールドを構成する<input>や<textarea>にplaceholder属性を追加し、表示したい内容を指定します。
ファイル名：sample_c/sample_c.html
<!DOCTYPE html>
<html>
<head>
<meta charset="uft-8">
<title>森の工房 [Forest Studio] - お問い合わせ</title>
<meta name="viewport" content="width=device-width">
<link href='http://fonts.googleapis.com/css?family=Righteous' rel='stylesheet' type='text/css'>
<style>
body {font-family: 'メイリオ',
'Hiragino Kaku Gothic Pro', sans-serif;
background-color: #e5e5e5;
margin: 0}
a {color: #017acd}
/* コンテナ */
div#container {width: 900px;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
padding:0 40px;
-webkit-box-shadow: 0px 0px 50px #bbbbbb;
box-shadow: 0px 0px 10px #666666;
background-image: url(circle.png), url(circle-yellow.png);
background-repeat: no-repeat;
background-position: 15px 420px, 90px 500px;
background-size: 94px 94px, 30px 30px;
position: relative;
overflow: hidden}
/* ヘッダー */
header#pageheader {background:none;
padding: 15px 0 0}
header#pageheader h1 {margin: 0;
float: left;
font-size: 40px;
font-weight: normal;
font-family: 'Righteous', cursive}
header#pageheader h2 {color: #666666;
font-size: 0.75em;
margin: 0;
padding-top: 20px;
text-align: right;
font-weight: normal}
nav {clear: both}
/* メニュー */
nav ul {font-size: 0.75em;
margin-top: 0;
margin-bottom: 10px;
margin-left: 0;
padding-left: 0;
height: 30px;
background-color: #333333;
border-radius: 5px;
background: -webkit-gradient(linear, left top, left bottom, from(#777777), color-stop(50% #444444), color-stop(51% #333333), to(#555555));
background: -webkit-linear-gradient(#777777 0%, #444444 50%, #333333 51%, #555555 100%);
background: -moz-linear-gradient(#777777 0%, #444444 50%, #333333 51%, #555555 100%);
background: -o-linear-gradient(#777777 0%, #444444 50%, #333333 51%, #555555 100%);
background: -ms-linear-gradient(#777777 0%, #444444 50%, #333333 51%, #555555 100%)}
nav ul li {list-style-type: none;
float: left}
nav ul li a {display: block;
width: 120px;
line-height: 30px;
text-decoration: none;
text-align: center;
color: #ffffff;
border-right: solid 1px rgba(255,255,255,0.2)}
nav ul li a:hover {background-color: rgba(1,122,205,0.3)}
nav ul li:first-of-type a:hover
{border-radius: 5px 0 0 5px}
/* コンテンツ */
article {width: auto;
margin-left: auto;
margin-right: auto}
article header {border: solid 1px #aaaaaa;
margin: 20px 0 10px;
padding: 18px;
border-radius: 5px;
-webkit-box-shadow: 0px 2px 3px #cccccc,
0px 0px 4px 3px #ffffff inset;
box-shadow: 0px 2px 3px #cccccc,
0px 0px 4px 3px #ffffff inset;
background-color: rgba(255,255,255,0.5)}
article header h1 {background:none;
font-size: 28px;
color: #000000;
line-height: 45px;
padding-left: 0;
margin: 0;
font-weight:normal;
float: left}
article header p {font-size: 16px;
color: #444444;
margin-left: 300px}
article section {clear: both;
border: solid 1px #aaaaaa;
margin: 20px 0 10px;
padding: 18px;
border-radius: 5px;
overflow: hidden;
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#dfdfdf));
background: -webkit-linear-gradient(#ffffff 0%, #dfdfdf 100%);
background: -moz-linear-gradient(#ffffff 0%, #dfdfdf 100%);
background: -o-linear-gradient(#ffffff 0%, #dfdfdf 100%);
background: -ms-linear-gradient(#ffffff 0%, #dfdfdf 100%);
-webkit-box-shadow: 0px 2px 3px #cccccc,
0px 0px 4px 3px #ffffff inset;
box-shadow: 0px 2px 3px #cccccc,
0px 0px 4px 3px #ffffff inset}
article section h1 {background:none;
font-size: 24px;
font-weight: normal;
line-height: 22px;
padding-left: 0;
margin-top: 0;
margin-bottom: 20px;
margin-left: 0;
margin-right: 0}
article p {font-size: 0.75em;
line-height: 1.6;
margin-top: 10px;
margin-left: 0;
margin-right: 0}
/* フッター */
footer {color: #888888;
margin-top: 25px;
padding-top: 8px;
padding-bottom: 8px;
clear: both;
border-top: solid 1px #aaaaaa}
small {font-size: 10px;
font-style: normal;
text-align: left;
display: block}
small::before {content: 'GREEN LEAF';
display: block;
width: 200px;
padding: 10px 0;
background-color: #880000;
color: #ffffff;
font-family: 'Righteous', cursive;
font-size: 16px;
text-align: center;
position: absolute;
right: 0;
bottom: 0;
-webkit-transform: rotate(-45deg) translate(62px, 20px);
-moz-transform: rotate(-45deg) translate(62px, 20px);
-o-transform: rotate(-45deg) translate(62px, 20px);
-ms-transform: rotate(-45deg) translate(62px, 20px)}
/* 画像の配置 */
figure {margin: 0}
article section:nth-of-type(odd) figure
{float: right;
margin-left: 15px;
margin-bottom: 0}
article section:nth-of-type(even) figure
{float: left;
margin-right: 15px;
margin-bottom: 0}
article section figcaption {color: #666666;
font-size: 10px;
display: block}
article section:nth-of-type(odd) figcaption
{text-align: right}
/* フォーム */
form {max-width: 500px;
margin: 30px auto}
input, textarea {width: 100%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
border: solid 1px #aaaaaa;
border-radius: 0;
-webkit-appearance: none}
textarea {height:110px}
input[type="submit"] {width:200px;
background-color: #cef178}
input:required, input:invalid
{background-image: url(caution.png);
background-repeat: no-repeat;
background-position: right center}
input:valid {background-image: none}
label span {color: #ff0000}
/* ===== PC用の設定 ===== */
@media only screen and (min-width:900px){
/* 3段組み */
article div[itemprop="articleBody"]
{display: -webkit-box;
display: -moz-box;
display: -ms-box}
article section {width: 288px;
margin-right: 18px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
overflow: visible}
article section h1 {height: 48px;
line-height: 1.2}
article section:nth-of-type(1n) figure
{float: none;
margin: 0}
article section:nth-of-type(1n) figcaption
{text-align: center;
margin-bottom: 15px}
/* 3段組み IE8～9 & Opera */
article section {clear: none;
float: left;
position: relative}
article section + section + section {margin-right: 0}
}
/* ===== タブレット用の設定 ===== */
@media only screen and (min-width:600px) and (max-width:899px){
div#container {width: 100%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 0 10px;
background-position: -3px 380px, 100px 460px}
header#pageheader img {width: 100%;
height: auto}
nav ul {font-size: 10px}
nav ul li a {width: 100px}
}
/* ===== スマートフォン用の設定 ===== */
@media only screen and (max-width:599px){
div#container {width: 100%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 0 10px;
background-position: -3px 220px, 100px 280px}
header#pageheader img {width: 100%;
height: auto}
nav ul {font-size: 8px}
nav ul li a {width: auto;
display: inline-block;
padding: 0 3px}
header#pageheader h1 {font-size: 24px;
margin-right: 15px}
header#pageheader h2 {font-size: 10px;
text-align: left;
padding: 0}
article header h1 {float: none}
article header p {margin: 0}
article section:nth-of-type(1n) figure
{float: none;
margin: 0;
text-align:center;
display: block}
article section:nth-of-type(1n) figcaption
{text-align: center;
margin-bottom: 15px}
}
</style>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<style>
article section figure {float: right;
margin-left: 15px;
margin-bottom: 15px}
nav ul li a {border-right: solid 1px #ffffff}
nav ul li a:hover {background-color: #017acd}
/* 3段組み */
article div[itemprop="articleBody"]
{display: -webkit-box;
display: -moz-box;
display: -ms-box}
article section {width: 288px;
margin-right: 18px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
overflow: visible}
article section h1 {height: 48px;
line-height: 1.2}
article section:nth-of-type(1n) figure
{float: none;
margin: 0}
article section:nth-of-type(1n) figcaption
{text-align: center;
margin-bottom: 15px}
/* 3段組み IE8～9 & Opera */
article section {clear: none;
float: left;
position: relative}
article section + section + section {margin-right: 0}
</style>
<![endif]-->
<!--[if lt IE 10]>
<style>
nav ul
{filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#777777',endColorstr='#333333');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#777777',endColorstr='#333333')"}
article section
{filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff',endColorstr='#dfdfdf');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff',endColorstr='#dfdfdf')"}
</style>
<![endif]-->
<!--[if lt IE 8]>
<style>
article section {width: 250px}
article section figure {margin-left: 0}
</style>
<![endif]-->
</head>
<body>
<!-- コンテナ -->
<div id="container">
<!-- ヘッダー -->
<header id="pageheader">
<hgroup>
<h1>Green Leaf</h1>
<h2>生活を楽しくする情報をもっと身近にお届けします</h2>
</hgroup>
<!-- メニュー -->
<nav>
<ul>
<li><a href="index.html">トップ</a></li>
<li><a href="about.html">森の工房について</a></li>
<li><a href="event.html">季節のイベント</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
<li><a href="http://blog.xxx.xxx/">ブログ</a></li>
</ul>
</nav>
<img src="header.jpg" alt="">
</header>
<!-- コンテンツ -->
<article>
<header>
<h1>お問い合わせ</h1>
<p id="summary">ご意見、ご感想などがありましたら、以下の欄にご記入の上、送信してください。また、森の工房やイベントに関するご質問などもお気軽にお寄せください。<br>
（※送信後はトップページに戻ります。）</p>
</header>
<form action="https://www.rescuesolutions.net/form/mail.cgi" method="POST">
<input type="hidden" name="_uid" value="XXXXXXXX">
<input type="hidden" name="_done" value="http://www.www.www/">
<input type="hidden" name="_subject" value="FORM MAIL">
<p><label>名前<span>(必須)</span>：<br>
<input type="text" name="namae" size="40" required placeholder="名前を入力してください">
</label></p>
<p><label>メールアドレス<span>(必須)</span>：<br>
<input type="email" name="mail" size="40" required placeholder="メールアドレスを入力してください">
</label></p>
<p><label>URL：<br>
<input type="url" name="url" size="40" placeholder="ホームページのURLを入力してください">
</label></p>
<p><label>コメント：<br>
<textarea name="comment" cols="50" rows="8" placeholder="コメントなどを入力してください"></textarea>
</label></p>
<p id="button">
<input type="submit" value="送信">
</p>
</form>
</article>
<!-- フッター -->
<footer>
<small>Copyright (C) Green Leaf, All rights reserved.</small>
</footer>
</div>
</body>
</html>
フィールドに文字を入力すると、プレースホルダーは表示されなくなります。