WebDevCourse-HTML-Newspaper-exercise/Contacto.html at 466309564ca7df96985cb035eb924772503e03d1 · ActoSoft/WebDevCourse-HTML-Newspaper-exercise · 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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NoticiOSO  -  Contactanos</title>
    <link rel="stylesheet" href="/css/index.css">
</head>
<body>
    <header class="Header-general">
        <section>
            <div class="Menu-container">
                <img
                    src="/images/Logo_trasnparente.png"
                    alt="Logo"
                    class="photo-logo"
                >
                <img
                    src="/images/Nombre_trasnparente.png"
                    alt="Nombre periodico"
                >
                <p class="Titulos">C o n t a c t a n o s</p>
                <nav>
                    <a href="index.html" class="nav-botones">Inicio</a>
                    <a href="Deportes.html" class="nav-botones">Deportes</a>
                    <a href="Internacional.html" class="nav-botones">Internacional</a>
                    <a href="Contacto.html" class="nav-botones">Contactanos</a>
                </nav>

            </div>
        </section>

    </header>
    <main class="Body-general">
        <h1 class="Subtitulos">Ponte en contacto con nosotros</h1>
        <!-- enctype="multipart/form-data Sirve para poder enviar varios tipos de datos, no solo texto-->
        <form action="#" method="GET" enctype="multipart/form-data">
        <dt>
            <dt>Nombre</dt>
            <dd>
                <Input
                    type="Text"
                    name="Nombre"
                    id="Nombre"
                    placeholder="Teclee su Nombre"
                    maxlength="50"
                    minlength="4"
                >
            </dd>
            <br>
            <dt>Edad</dt>
            <dd>
                <input
                    type="number"
                    name="age"
                    id="age"
                    max="99"
                    min="2"
                >
            </dd>
            <br>
            <dt>Genero</dt>
            <dd>
                <select name="gender" id="gender">
                    <option value="male">Masculino</option>
                    <option value="female">Femenino</option>
                    <option value="other">Otro</option>
                </select>
            </dd>
            <br>
            <dt>Profesión</dt>
            <dd>
                <Input
                    type="Text"
                    name="Profesion"
                    id="Profesion"
                    placeholder="Teclee su Profesion"
                    maxlength="80"
                    minlength="4"
                >
            </dd>
            <br>
            <dt>Elige los temas de tu preferencia</dt>
            <dd>
                <label for="Futbol">Futbol</label>
                <input type="checkbox" name="deportes" id="Futbol">
                <label for="Basquetbol">Basquetbol</label>
                <input type="checkbox" name="Basquetbol" id="Basquetbol">
                <label for="EU">Estados Unidos</label>
                <input type="checkbox" name="EU" id="EU">
                <label for="Europa">Europa</label>
                <input type="checkbox" name="Europa" id="Europa">
                <label for="Otro">Otro. Especifique</label>
                <input type="checkbox" name="Otro" id="Otro">
                <Input
                    type="Text"
                    name="Especifico"
                    id="Especifico"
                    placeholder="Agregue sus preferencias"
                    maxlength="200"
                    minlength="4"
                >
            </dd>
            <br>
            <dt>Tu opinión nos ayuda a mejorar este espacio, agradecemos tus comentarios</dt>
            <dd>
                <textarea name="Opinion" id="Opinion" cols="50" rows="10"></textarea>
            </dd>
            <br>
            <dt>E mail</dt>
            <dd>
                <input
                    type="email"
                    name="mail"
                    id="mail"
                >
            </dd>
        </dt>
        <br>
        <br>
        <input type="submit" value="Enviar datos" >
        <input type="reset" value="Reiniciar el formulario" >
        <br>
        </form>
    </main>
    <footer class="footer">
        <img
        src="/images/Logo_trasnparente.png"
        alt="Logo"
        class="photo-logo"
        >
        <p>Derechos reservados Omar Osorio 2020</p>

    </footer>
</body>
</html>