javascript-tutorial/2-dom-manipulation/form.html at master · augusticor/javascript-tutorial · 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
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="author" content="augusticor">
        <link rel="stylesheet" href="form-styles.css">
        <title>Form validation using JS</title>
    </head>

    <body>
        <form class="form">
            <h1 class="site-main-title">Validate form with JS</h1>
            <fieldset class="fieldset-textfields">
                <legend>Please enter your contact details</legend>
                <label class="label-form" for="name">
                    Your name: <input type="text" name="name-txt" id="name" placeholder="your name" />
                    <abbr title="required name input" aria-label="required">*</abbr>
                    <p id="name-p-error" class="parag-error-msg name-error-msg">Error !</p>
                </label>

                <label class="label-form" for="email">
                    Email address: <input type="email" name="email-field" id="email" placeholder="youremail@example.com" pattern="([a-z0-9]+[_az0-9\.-]*[a-z0-9]+)@([a-z0-9-]+(?:\.[a-z0-9-]+)*\.[a-z]{2,4})" />
                    <abbr title="required email input" aria-label="required">*</abbr>
                    <p id="email-p-error" class="parag-error-msg email-error-msg">Error !</p>
                </label>

                <label class="label-form" for="phonen">
                    Phone number (+57): <input type="tel" name="phonenumber" id="phonen" placeholder="0123456789" aria-label="your phone number +57 extension" />
                    <p id="phone-p-error" class="parag-error-msg phone-error-msg">Error !</p>
                </label>
            </fieldset>

            <fieldset class="field-courses">
                <legend id="courses-legend">Please select the courses that you are interested in <abbr title="required" aria-labelledby="courses-legend">*</abbr></legend>

                <label class="label-form" for="wd">
                    <input type="checkbox" name="webdeveloper" id="wd" /> Web Developer
                </label>

                <label class="label-form" for="rd">
                    <input type="checkbox" name="reactdeveloper" id="rd" /> React Developer
                </label>

                <label class="label-form" for="fs">
                    <input type="checkbox" name="fullstack" id="fs" /> Fullstack Developer
                </label>

                <label class="label-form" for="other">
                    <input type="checkbox" name="other" id="other" /> Other
                </label>
            </fieldset>

            <label class="label-form" for="texta" class="paragraph-message-advice">Please enter a message</label> <br>
            <textarea name="textarea" id="texta" cols="60" rows="5" aria-label="optional message"></textarea>

            <div>
                <button class="buttons send">Send form</button>
                <button class="buttons reset" type="reset">Reset form</button>
            </div>

            <p class="information-p"></p>
            <p class="information-p"></p>
            <p class="information-p"></p>
            <p class="information-p"></p>
            <p class="information-p"></p>
        </form>

        <script src="form.js"></script>
    </body>
</html>