From d9b562d3493c30baf88cf4a776c4c3237d782636 Mon Sep 17 00:00:00 2001
From: devfzn <dev_fzn@proton.me>
Date: Tue, 11 Apr 2023 18:00:26 -0400
Subject: [PATCH] HTML5 y CSS3 pt. 3: Formularios y Tablas 02
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 +
 004_primeras_paginas/README.md                | 11 ++++++++
 .../html_css_parte3/contacto.html             | 13 +++++++++-
 .../html_css_parte3/style.css                 | 25 ++++++++++++++++++-
 4 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/.gitignore b/.gitignore
index a136337..14654a3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
 *.pdf
+test/
diff --git a/004_primeras_paginas/README.md b/004_primeras_paginas/README.md
index 4900746..5b17880 100644
--- a/004_primeras_paginas/README.md
+++ b/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`.
 
diff --git a/004_primeras_paginas/html_css_parte3/contacto.html b/004_primeras_paginas/html_css_parte3/contacto.html
index 3a13490..7018152 100644
--- a/004_primeras_paginas/html_css_parte3/contacto.html
+++ b/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">
diff --git a/004_primeras_paginas/html_css_parte3/style.css b/004_primeras_paginas/html_css_parte3/style.css
index 8655990..f934cf5 100644
--- a/004_primeras_paginas/html_css_parte3/style.css
+++ b/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%;
+}