html-tutorial/form.html at master · DkSanjed/html-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
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
111
112
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="robots" content="index,noodp">
        <meta name="description" content="This is the exercise of SEO basic pushdev-code">
        <meta name="og:title" property="og:title" content="SEO Basics">
        <meta name="twitter:card" content="summary">
        <link rel="alternate" hreflang="es" href="https://pushdev.co/">
        <title>SEO BASICS</title>
    </head>
    <body>
        <header>
            <h1>Semantic Exercise HTML </h1>
            <h2>Raúl Valencia</h2>
            <nav>
            <ul>
                <li>Home</li>
                <li>Profile</li>
                <li>About of</li>
                <li>Proyects</li>
                <li>Contatc</li>
            </ul>
            </nav>
        </header>
        <main>
            <article>
                <header>
                    <h3>Main</h3>
                    <blockquote>
                        "Everybody in this country should learn how to program a computer...
                        because it teaches you how to think."
                         - from
                        <cite>
                            The Lost Interview
                        </cite>
                        by Steve Jobs
                    </blockquote>
                </header>
                <section>
                    <h6>Forms</h6>
                    <form>
                        <fieldset>
                            <legend><strong>Please enter your contact details</strong></legend>
                            <div>
                                <label for="name"><strong>Your name (required):</strong> </label>
                                <input type="text" id="name" name="user_name" aria-label="required" required>
                                <abbr title="required"></abbr>
                            </div>
                            <div>
                                <label for="email"><strong>E-Mail address (required):</strong> </label>
                                <input type="email" id="email" name="user_email" aria-label="required" required>
                                <abbr title="required"></abbr>
                            </div>
                            <div>
                                <label for="number"><strong>Phone number (+57) (optional):</strong> </label>
                                <input type="number" id="number" name="user_number">
                            </div>
                        </fieldset>
                        <fieldset>
                            <legend><strong>Please select the courses that you are interested in (required)</strong></legend>
                            <div>
                                <input type="checkbox" id="webDeveloper" name="course1" value="Web Developer">
                                <label for="webDeveloper"> <strong>Web Developer</strong></label>
                            </div>
                            <div>
                                <input type="checkbox" id="reactDeveloper" name="course2" value="React Developer">
                                <label for="reactDeveloper"> <strong>React Developer</strong></label>
                            </div>
                            <div>
                                <input type="checkbox" id="fullStack" name="course3" value="Fullstack Developer">
                                <label for="fullStack"> <strong>Fullstack Developer</strong></label>
                            </div>
                            <div>
                                <input type="checkbox" id="other" name="course4" value="other">
                                <label for="other"> <strong>Other</strong></label>
                            </div>
                        </fieldset>
                        <div>
                            <label for="textArea"><strong>Please enter a message (optional):</strong></label>
                        </div>
                        <div>
                            <textarea name="text" id="textArea" cols="50" rows="10"></textarea>
                        </div>
                        <button>Send message</button>
                        <button type="reset">Reset form</button>
                    </form>
                    <div><iframe width="640" height="360" src="https://www.youtube.com/embed/fo9610Cj3k4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
                </section>
            </article>
        </main>
        <aside>
            <h4>“The Tale of Johnny Town-Mouse” by Beatrix Potter</h4>
            <p>Timmie Willie is a country mouse who is accidentally transported to a city in a vegetable basket. When he wakes up, he finds himself in a party and makes a friend. When he is unable to bear the city life, he returns to his home but invites his friend to the village. When his friend visits him, something similar happens.
                What Is Great About It: Humans have been living without cities or villages for most of history. That means that both village and city life are recent inventions. And just like every other invention, we need to decide their costs and benefits.
                The story is precisely about this debate. It is divided into short paragraphs and has illustrations for each scene. This is best for beginners who want to start reading immediately.</p>
        </aside>
        <footer>
            <p>This example was created <time datetime="2020-04-21 21:33">at 9:33 PM</time></p>
            <p><a href="https://pushdev.co/" title="this is the title" rel="nofollow">The link is here</a> go to page push</p>
            <p><img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/ponyo-2-1556098712.png?crop=0.710xw:0.945xh;0.163xw,0.0290xh&resize=640:*" alt="movie anime ponyo" title="anime"></p>
            <nav>
                <ul>
                    <li>Number Contact</li>
                    <li>More informationt</li>
                    <li>Others pages</li>
                </ul>
            </nav>
        </footer>
    </body>
</html>