Javascript-DOM-in-Tamil/feedback.html at 47-handling-checkbox-input-elements · anburocky3/Javascript-DOM-in-Tamil · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<html lang="en">

<head>
    <title>Feedback - FoodCook Planner </title>
    <!-- Stylesheets -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
        integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />

    <link rel="stylesheet" href="./assets/css/style.css">
</head>

<body>
    <header>
        🍊 FoodCook Planner
        <a href="./index.html" style="padding:2px 10px;font-size:10px;">Back</a>
    </header>

    <main>
        <h4> <span id="nameGreet"></span> Feedback Form</h4>

        <style>
            form {
                margin-top: 20px;
                background-color: #FFF;
                padding: 20px;
                border-radius: 5px;
            }

            form * {
                margin: 5px;
                width: 100%;
            }

            form input,
            textarea {
                padding: 5px 10px;
                font-size: 10px;
                border: 1px solid gainsboro;
                border-radius: 5px;
            }

            form button {
                padding: 5px 10px;
                background-color: royalblue;
                border: none;
                color: #FFF;
                border-radius: 5px
            }

            form label {
                display: flex;
                align-items: center;
                font-size: 10px;
                color: gray;
                user-select: none;
            }

            form label input,
            form input[type='radio'] {
                width: auto;
            }

            .d-flex {
                display: flex;
            }
        </style>

        <form name="feedback">
            <div class="fullName">
                <input type="text" name="fullName" placeholder="Enter your Full Name" min="10" required>
            </div>
            <div class="d-flex" id="input-categories">
                <div class="d-flex">
                    <input type="radio" name="type" id="general-feedback" value="general-feedback">
                    <label for="general-feedback">General Feedback</label>
                </div>
                <div class="d-flex">
                    <input type="radio" name="type" id="technical-support" value="technical-support">
                    <label for="technical-support">Technical Support</label>
                </div>
                <div class="d-flex">
                    <input type="radio" name="type" id="contribution" value="contribution">
                    <label for="contribution">Contribution</label>
                </div>
            </div>
            <div>
                <input type="email" name="email" placeholder="you@awesome.com" required>
            </div>
            <div>
                <textarea name="description" placeholder="Enter your feedback briefly!" rows="4" required></textarea>
            </div>
            <div>
                <label for="terms">
                    <input type="checkbox" name="terms" id="terms" required />
                    I accept terms and conditions.
                </label>
            </div>
            <div>
                <button>Submit</button>
            </div>
            <div id="response"></div>
        </form>
    </main>

    <!-- For Learning purpose -->
    <script src="./assets/js/learning.js"></script>
</body>

</html>