HTML5 y CSS3 pt. 3: Formularios y Tablas 03

Uso de 'texarea', 'radio' y 'checkbox' inputs.
'inputs' dentro de 'labels'. Estilos css.
selector 'select' para elegír un item que representa
un 'option' de una lista desplegable.

004_primeras_paginas/README.md

@@ -195,3 +195,71 @@ Conexión del **input** () con su **label**.
 
 Uso de `id` para el `input` asociado al atributo `for` del `label`.
 
+Jerarquía en css, ejemplo.
+
+```txt
+    - Peso gráfico:
+       ___________________________
+      |                           |   ___________________
+      |          inline           |  |                   |   _____________
+      |                           |  |         ID        |  |             |   ________
+      |                           |  |                   |  |    class    |  |etiqueta|
+      |           1000            |  |         100       |  |      10     |  |____1___|
+      |                           |  |                   |  |_____________|
+      |                           |  |___________________|
+      |___________________________|
+
+    - Peso valores:
+
+      form p = 1+1 = 2
+      p = 1
+      .test = 10
+      p.test = 1+10 = 11
+      #test = 100
+```
+
+<details><summary markdown="span">html</summary>
+
+```html
+    ...
+    <form>
+        ...
+        <div>
+            <p class="test" id="test">Como prefieres que te contactemos?</p>
+
+            <label for="radio-email"><input type="radio" name="contacto"
+            value="email" id="radio-email"> Email</label>
+
+            <label for="radio-telefono"><input type="radio" name="contacto"
+            value="telefono" id="radio-telefono"> Teléfono</label>
+
+            <label for="radio-whatsap"><input type="radio" name="contacto"
+            value="whatsap" id="radio-whatsap"> Whatsapp</label>
+        </div>
+        ...
+    </form>
+    ...
+```
+
+</details></br>
+
+<details><summary markdown="span">css</summary>
+
+```css
+...
+
+form p { color: blue; }
+
+p { color: red; }
+
+.test { color: yellow; }
+
+p.test { color: magenta; }
+
+#test { color: cyan; }
+
+/* la configuración de estilo inline sobrescribe todo */
+```
+
+</details></br>
+

004_primeras_paginas/html_css_parte3/contacto.html

@@ -23,14 +23,37 @@
         <main>
             <form>
                 <label for="nombre_apellido">Nombre y Apellido</label>
-                <input type="text" id="nombre_apellido">
+                <input type="text" id="nombre_apellido" class="input-padron">
 
                 <label for⁼"email">Correo Eletrónico</label>
-                <input type="text" id="email"/>
+                <input type="text" id="email" class="input-padron"/>
 
                 <label for⁼"telefono">Teléfono</label>
-                <input type="text" id="telefono"/>
+                <input type="text" id="telefono" class="input-padron"/>
 
+                <label for="mensaje">Mensaje</label>
+                <textarea id="mensaje" cols="70" rows="10"class="input-padron"></textarea>
+                <div>
+                    <p>Como prefieres que te contactemos?</p>
+
+                    <label for="radio-email"><input type="radio" name="contacto"
+                    value="email" id="radio-email"> Email</label>
+
+                    <label for="radio-telefono"><input type="radio" name="contacto"
+                    value="telefono" id="radio-telefono"> Teléfono</label>
+
+                    <label for="radio-whatsap"><input type="radio" name="contacto"
+                    value="whatsap" id="radio-whatsap"> Whatsapp</label>
+                </div>
+                <div>
+                    <p>En que horario prefieres ser contactado?</p>
+                    <select>
+                        <option>Mañana</option>
+                        <option>Tarde</option>
+                        <option>Noche</option>
+                    </select>
+                </div>
+                <label class="checkbox"><input type="checkbox">Te interesa recibir novedades y ofertas?</label>
                 <input type="submit" value="Enviar Formulario"/>
             </form>
         </main>

004_primeras_paginas/html_css_parte3/reset.css

@@ -1,99 +1,52 @@
-/***
+/* http://meyerweb.com/eric/tools/css/reset/ 
-    The new CSS reset - version 1.8.4 (last updated 14.2.2023)
+   v2.0 | 20110126
-    GitHub page: https://github.com/elad2412/the-new-css-reset
+   License: none (public domain)
-***/
 
-/*
+   *PROBAR* version fork actual:
-    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
+   https://github.com/elad2412/the-new-css-reset
-    - The "symbol *" part is to solve Firefox SVG sprite bug
+   https://raw.githubusercontent.com/elad2412/the-new-css-reset/main/css/reset.css
- */
+*/
-*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
+
-    all: unset;
+html, body, div, span, applet, object, iframe,
-    display: revert;
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
 }
-
+/* HTML5 display-role reset for older browsers */
-/* Preferred box-sizing value */
+article, aside, details, figcaption, figure, 
-*,
+footer, header, hgroup, menu, nav, section {
-*::before,
+	display: block;
-*::after {
-    box-sizing: border-box;
 }
-
+body {
-/* Reapply the pointer cursor for anchor tags */
+	line-height: 1;
-a, button {
-    cursor: revert;
 }
-
+ol, ul {
-/* Remove list styles (bullets/numbers) */
+	list-style: none;
-ol, ul, menu {
-    list-style: none;
 }
-
+blockquote, q {
-/* For images to not be able to exceed their container */
+	quotes: none;
-img {
+}
-    max-inline-size: 100%;
+blockquote:before, blockquote:after,
-    max-block-size: 100%;
+q:before, q:after {
+	content: '';
+	content: none;
 }
-
-/* removes spacing between cells in tables */
 table {
-    border-collapse: collapse;
+	border-collapse: collapse;
+	border-spacing: 0;
 }
-
-/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
-input, textarea {
-    -webkit-user-select: auto;
-}
-
-/* revert the 'white-space' property for textarea elements on Safari */
-textarea {
-    white-space: revert;
-}
-
-/* minimum style to allow to style meter element */
-meter {
-    -webkit-appearance: revert;
-    appearance: revert;
-}
-
-/* preformatted text - use only for this feature */
-:where(pre) {
-    all: revert;
-}
-
-/* reset default text opacity of input placeholder */
-::placeholder {
-    color: unset;
-}
-
-/* remove default dot (•) sign */
-::marker {
-    content: initial;
-}
-
-/* fix the feature of 'hidden' attribute.
-   display:revert; revert to element instead of attribute */
-:where([hidden]) {
-    display: none;
-}
-
-/* revert for bug in Chromium browsers
-   - fix for the content editable attribute will work properly.
-   - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
-:where([contenteditable]:not([contenteditable="false"])) {
-    -moz-user-modify: read-write;
-    -webkit-user-modify: read-write;
-    overflow-wrap: break-word;
-    -webkit-line-break: after-white-space;
-    -webkit-user-select: auto;
-}
-
-/* apply back the draggable feature - exist only in Chromium and Safari */
-:where([draggable="true"]) {
-    -webkit-user-drag: element;
-}
-
-/* Revert Modal native behavior */
-:where(dialog:modal) {
-    all: revert;
-}

004_primeras_paginas/html_css_parte3/style.css

@@ -15,12 +15,12 @@ nav {
     right: 0px;
 }
 
-nav li{
+nav li {
     display: inline;
     margin: 0 0 0 15px;
 }
 
-nav a{
+nav a {
     text-transform: uppercase;
     color: #000000;
     font-weight: bold;
@@ -28,18 +28,18 @@ nav a{
     text-decoration: none;
 }
 
-nav a:hover{
+nav a:hover {
     color: #cd4f39;
     text-decoration: underline;
 }
 
-.productos{
+.productos {
     width: 80%;
     margin: 0 auto;
     padding: 30px;
 }
 
-.productos li{
+.productos li {
     display: inline-block;
     text-align: center;
     width: 30%;
@@ -56,20 +56,20 @@ nav a:hover{
     border-radius: 10px;
 }
 
-.productos li:hover{
+.productos li:hover {
     border-color: #046dfc;
 }
 
-.productos li:active{
+.productos li:active {
     border-color: #088C19;
 }
 
-.productos h2{
+.productos h2 {
     font-size: 26px;
     font-weight: bold;
 }
 
-.productos li:hover h2{
+.productos li:hover h2 {
     font-size: 32px;
 }
 
@@ -103,15 +103,43 @@ form {
     margin: 50px 0%;
 }
 
-form label{
+form label, form p {
     display: block;
     font-size: 20px;
     margin: 0 0 10px;
 }
 
-form input{
+.input-padron {
     display: block;
     margin: 0 0 20px;
     padding: 10px 25px;
     width: 50%;
 }
+
+.checkbox {
+    margin: 20px 0;
+}
+
+/* Usados para observar Jerarquía en CSS
+form p {
+    color: blue;
+}
+
+p {
+    color: red;
+}
+
+.test {
+    color: yellow;
+}
+
+p.test {
+    color: magenta;
+}
+
+#test {
+    color: cyan;
+} */
+
+/* la configuración de stilo inline sobrescribe todo */
+