自動見積フォーム 2022.11.5

自動見積もりフォーム2022.11.5

自動見積フォーム

<!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.5</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–>

            </form>

        </div><!–container–>

    </div><!–app–>

    <script></script>

</body>

</html>

JavaScriptの復習をしようと始めました。まずはHTML、CSS、bootstrapだけで静的なページを作成したいと思います。下記の教本から参考に学んでいます。