devfzn/desafio_encriptador
devfzn/desafio_encriptador
1
0
Fork 0
Code Pull Requests Activity

HTML5 y CSS3 pt. 3: Formularios y Tablas 03

Browse Source 
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.
This commit is contained in:
devfzn 2023-04-11 19:38:42 -04:00
parent d9b562d349
commit d56594f7f4
Signed by: devfzn
GPG Key ID: E070ECF4A754FDB1
4 changed files with 177 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
004_primeras_paginas/README.md
View File

@ -195,3 +195,71 @@ Conexión del **input** () con su **label**.
Uso de `id` para el `input` asociado al atributo `for` del `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>

29
004_primeras_paginas/html_css_parte3/contacto.html
View File

@ -23,14 +23,37 @@
<main> <main>
<form> <form>
<label for="nombre_apellido">Nombre y Apellido</label> <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> <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> <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"/> <input type="submit" value="Enviar Formulario"/>
</form> </form>
</main> </main>

129
004_primeras_paginas/html_css_parte3/reset.css
View File

@ -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;
display: revert;
}
/* Preferred box-sizing value */ html, body, div, span, applet, object, iframe,
*, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
*::before, a, abbr, acronym, address, big, cite, code,
*::after { del, dfn, em, img, ins, kbd, q, s, samp,
box-sizing: border-box; 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 */
/* Reapply the pointer cursor for anchor tags */ article, aside, details, figcaption, figure,
a, button { footer, header, hgroup, menu, nav, section {
cursor: revert; display: block;
} }
body {
/* Remove list styles (bullets/numbers) */ line-height: 1;
ol, ul, menu { }
ol, ul {
list-style: none; 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 { 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;
} }

32
004_primeras_paginas/html_css_parte3/style.css
View File

@ -103,15 +103,43 @@ form {
margin: 50px 0%; margin: 50px 0%;
} }
form label{ form label, form p {
display: block; display: block;
font-size: 20px; font-size: 20px;
margin: 0 0 10px; margin: 0 0 10px;
} }
form input{ .input-padron {
display: block; display: block;
margin: 0 0 20px; margin: 0 0 20px;
padding: 10px 25px; padding: 10px 25px;
width: 50%; 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 */