HTML5 y CSS3 pt. 3: Formularios y Tablas 02

Creación de formulario HTML, tags 'form', 'input' para entradas de
usuario, 'label' para etiqueta. Conexión de input con label.
input text y submit.

.gitignore

@@ -1 +1,2 @@
 *.pdf
+test/

004_primeras_paginas/README.md

@@ -183,4 +183,15 @@ Final curso HTML5 y CSS parte 2
 
 #### Parte 3 - Formularios y Tablas
 
+Nueva página, [contacto.html](./html_css_parte3/contacto.html).
+
+Se renombraron los estilos css: productos.css como [style.css](./html_css_parte3/style.css),
+y style.css como [style_home](./html_css_parte3/style_home.css).
+
+Creación de formulario HTML, tags `<form>`', `<input>` (text y submit)
+para entradas de usuario. Tag `<label>` como etiqueta.
+
+Conexión del **input** () con su **label**.
+
+Uso de `id` para el `input` asociado al atributo `for` del `label`.
 

004_primeras_paginas/html_css_parte3/contacto.html

@@ -21,7 +21,18 @@
             </div>
         </header>
         <main>
-            test
+            <form>
+                <label for="nombre_apellido">Nombre y Apellido</label>
+                <input type="text" id="nombre_apellido">
+
+                <label for⁼"email">Correo Eletrónico</label>
+                <input type="text" id="email"/>
+
+                <label for⁼"telefono">Teléfono</label>
+                <input type="text" id="telefono"/>
+
+                <input type="submit" value="Enviar Formulario"/>
+            </form>
         </main>
         <footer>
             <img src="./imagenes/logo-blanco.png">

004_primeras_paginas/html_css_parte3/style.css

@@ -46,7 +46,8 @@ nav a:hover{
     vertical-align: top;
     /*background: #cd4f39; <- se usó para visualizar modificaciones */
     margin: 0 1.5%;
-    padding: 30px 20px;
+    /*padding: 30px 20px;*/
+    padding: 5% 2%;
     box-sizing: border-box;
     /*border-width: 2px;   <- estas 3 propiedades se
     border-style: solid;   <- pueden reemplazar con la
@@ -92,3 +93,25 @@ footer {
     color: #6f6f6f;
     font-size: 14px;
 }
+
+main {
+    width: 80%;
+    margin: 0 auto;
+}
+
+form {
+    margin: 50px 0%;
+}
+
+form label{
+    display: block;
+    font-size: 20px;
+    margin: 0 0 10px;
+}
+
+form input{
+    display: block;
+    margin: 0 0 20px;
+    padding: 10px 25px;
+    width: 50%;
+}