report.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>営業日報</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/clipboard@1/dist/clipboard.min.js"></script>
    <style>
        .btn {
            margin-top: 2px;
            margin-bottom: 2px;
        }

        body {
            background: #e5e5e5;
        }

        input[type=date] {
            border: 1px solid #c4c4c4;
            border-radius: 5px;
            background-color: #fff;
            padding: 3px 5px;
            box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.1);
        }

        textarea[name=report] {
            white-space: pre;
            overflow-wrap: normal;
            overflow-x: scroll;
        }

        .row {
            padding-left: 16px;
            padding-right: 16px;
        }
    </style>
</head>
<body>
<form class="container-fluid" method="post">
    <h4 class="text-center">営業日報 【@name@】</h4>
    <div class="row">
        <input type="date" name="date" value="@date@">
        <button name="show" class="btn btn-primary">
            <span class="glyphicon glyphicon-search"></span>
            表示
        </button>
    </div>
    <div class="row">
            <span class="btn btn-primary" id="copy" data-clipboard-target="#report">
                <span class="glyphicon glyphicon-copy"></span>
                コピー
            </span>
        <button name="send" class="btn btn-danger pull-right" disabled id="send">
            <span class="glyphicon glyphicon-envelope"></span>
            メール送信
        </button>
    </div>
    <label>Cyberメールユーザ: @from@</label>
    <label>パスワード<input type="password" class="pull-right" name="password"
                       oninput="$('#send').attr('disabled', !this.value)"></label>
    <input type="text" class="form-control" name="subject" value="@subject@">
    <textarea name="report" id="report" class="form-control" rows="12">@report@</textarea>
    <label>TO</label><input type="text" class="form-control" name="to" value="@to@">
    <label>CC</label><input type="text" class="form-control" name="cc" value="@cc@">
</form>
<script>
  console.log(new Clipboard('#copy'));
</script>
</body>
</html>