<!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″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC” crossorigin=”anonymous”>
<title>自動見積もりフォーム2022.11.6</title>
</head>
<body>
<div id=”app”>
<div class=”container bg-dark text-white p-5″>
<h2 class=”text-center border-bottom border-white pb-3 mb-5″>
自動見積フォーム
</h2>
<form>
<div class=”form-group row”>
<label class=”col-md-3 col-form-label pt-0″>制作したいムービ
<span class=”badge bg-danger”>必須</span>
</label>
<div class=”col-md-9″>
<div class=”row”>
<!– ムービーの種類 –>
<!– 余興ムービー –>
<div class=”col-md-5″>
<div class=”form-check form-check-inline”>
<input class=”form-check-input” type=”radio” name=”movie_type” id=”type1″ value=”余興ムービー” checked>
<label class=”form-check-label” for=”type1″>余興ムービー</label>
</div>
</div>
<!– サプライズムービー –>
<div class=”col-md-5″>
<div class=”form-check form-check-inline”>
<input class=”form-check-input” type=”radio” name=”movie_type” id=”type2″ value=”サプライズムービー” >
<label class=”form-check-label” for=”type2″>サプライズムービー</label>
</div>
</div>
<!– 生い立ちムービー –>
<div class=”col-md-5″>
<div class=”form-check form-check-inline”>
<input class=”form-check-input” type=”radio” name=”movie_type” id=”type2″ value=”生い立ちムービー” >
<label class=”form-check-label” for=”type2″>生い立ちムービー</label>
</div>
</div>
<!– オープニングムービー –>
<div class=”col-md-5″>
<div class=”form-check form-check-inline”>
<input class=”form-check-input” type=”radio” name=”movie_type” id=”type3″ value=”オープニングムービー” >
<label class=”form-check-label” for=”type3″>オープニングムービー</label>
</div>
</div>
</div><!–row–>
</div><!–class=”col-md-9–>
</div><!–form-group row–>
<!– 挙式日 –>
<div class=”form-group row”>
<label class=”col-md-3 col-form-label pt-0″ for=”wedding_date”>挙式日
<span class=”badge bg-danger”>必須</span>
</label>
<div class=”col-md-9″>
<input class=”form-control” type=”date” id=”wedding_date” placeholder=”日付をお選びください”>
<small class=”form-text”>結婚式のお日にちを選択してください</small>
</div><!–col-md-9–>
</div><!–form-group row–>
<!–DVD仕上がり予定–>
<div class=”form-group row”>
<label class=”col-md-3 col-form-label pt-0″ for=”delivery_date”>DVD仕上がり予定日
<span class=”badge bg-danger”>必須</span>
</label>
<div class=”col-md-9″>
<input class=”form-control” type=”date” id=”delivery_date” placeholder=”日付をお選びください”>
<small class=”form-text”>挙式日の1週間前までにDVDが必要な場合が多いため、仕上がり予定を挙式日の1週間前に設定しております。</small>
</div><!–col-md-9–>
</div><!–form-group row–>
<!– 小計；基本料金 –>
<div class=”form-group row”>
<label class=”col-md-3 col-form-label pt-0″ >基本料金（税込）</label>
<div class=”col-md-9″>
<input type=”text” class=”form-control text-right” id=”sum_base” value=”32,400″ readonly>
</div><!–col-md-9–>
</div><!–form-group row–>
<!– オプションメニュー –>
<div class=”form-group row”>
<label class=”col-md-3 col-form-label pt-0″>オプションメニュー
<span class=”badge bg-info”>任意</span>
</label>
<!– BGM手配 –>
<div class=”col-md-9″>
<div class=”form-check mb-3″>
<input class=”form-check-input” type=”checkbox” id=”opt1″>
<label class=”form-check-label” for=”opt1″>BGM手配 +5,400円</label>
<small class=”form-text”>当社で曲を手配する場合は、1曲あたり5,400円（税込み）がかかります。</small>
</div>
<!– 撮影手配 –>
<div class=”form-check mb-3″>
<input class=”form-check-input” type=”checkbox” id=”opt2″>
<label class=”form-check-label” for=”opt2″>撮影 +5,400円</label>
<small class=”form-text”>当社に撮影を依頼する場合の料金です（税込み）</small>
</div>
<!– DVF盤面印刷 –>
<div class=”form-check mb-3″>
<input class=”form-check-input” type=”checkbox” id=”opt3″>
<label class=”form-check-label” for=”opt3″>DVD盤面印刷 +5,400円</label>
<small class=”form-text”>DVD盤面をデザインさせて頂き場合は、5,400円（税込み）がかかります。</small>
</div>
<!– 写真スキャニング –>
<div class=”form-row mb-3 align-items-center”>
<div class=”col-auto”>
<label class=”form-check-label” for=”opt4″>写真スキャニング +540円</label>
</div>
<div class=”col-auto”>
<div class=”input-group”>
<input class=”form-control” type=”number” id=”opt4″ value=”0″ min=”0″ max=”30″>
<div class=”input^group-append”>
<label class=”input-group-text” for=”opt4″>枚</label>
</div>
</div>
</div>
<small class=”form-text” >プリントアウトした写真のスキャニングをご希望の方は、1枚当たり540円にて承ります。</small>
</div><!–form-row mb-3 align-items-center–>
</div><!–col-md-9–>
</div><!–form-group row–>
<!– 小計、オプション料金 –>
<div class=”form-group row”>
<label class=”col-md-3 col-form-label pt-0″>オプション料金（税込）</label>
<div class=”col-md-9″>
<div class=”input-group”>
<input type=”text” class=”form-control text-right” id=”sum_opt” value=”0″ readonly>
<div class=”input-group-append”>
<label class=”input-group-text”>円</label>
</div>
</div><!–input-group–>
</div><!–col-md-9–>
</div><!–form-group row–>
<!– 合計：基本料金＋オプション料金 –>
<div class=”form-group row”>
<label class=”col-md-3 col-form-label pt-0″>合計（税込）</label>
<div class=”col-md-9″>
<div class=”input-group”>
<input type=”text” class=”form-control text-right ” id=”sum_total” value=”32,400″ readonly>
<div class=”input-group-append”>
<label class=”input-group-text “>円</label>
</div>
</div><!–input-group–>
</div><!–col-md-9–>
</div><!–form-group row–>
</form>
</div><!–container–>
</div><!–app–>
<script></script>
</body>
</html>
昨日に引き続きJavaScriptの復習をしようと始めました。まずはHTML、CSS、bootstrapだけで静的なページを作成しました。いよいよJavaScriptで自動計算処理を実装していきたいと思います。下記の教本から参考に学んでいます。チャレンジしてみては？詳しいが解説あるのでわかりやすいですよ。
