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.
This commit is contained in:
parent
d9b562d349
commit
d56594f7f4
GPG Key ID:
E070ECF4A754FDB1
@ -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>
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -1,99 +1,52 @@
|
||||
/***
|
||||
The new CSS reset - version 1.8.4 (last updated 14.2.2023)
|
||||
GitHub page: https://github.com/elad2412/the-new-css-reset
|
||||
***/
|
||||
/* http://meyerweb.com/eric/tools/css/reset/
|
||||
v2.0 | 20110126
|
||||
License: none (public domain)
|
||||
|
||||
/*
|
||||
Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
|
||||
- The "symbol *" part is to solve Firefox SVG sprite bug
|
||||
*/
|
||||
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
|
||||
all: unset;
|
||||
display: revert;
|
||||
*PROBAR* version fork actual:
|
||||
https://github.com/elad2412/the-new-css-reset
|
||||
https://raw.githubusercontent.com/elad2412/the-new-css-reset/main/css/reset.css
|
||||
*/
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
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;
|
||||
}
|
||||
|
||||
/* Preferred box-sizing value */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Reapply the pointer cursor for anchor tags */
|
||||
a, button {
|
||||
cursor: revert;
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* Remove list styles (bullets/numbers) */
|
||||
ol, ul, menu {
|
||||
list-style: none;
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* For images to not be able to exceed their container */
|
||||
img {
|
||||
max-inline-size: 100%;
|
||||
max-block-size: 100%;
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
blockquote:before, blockquote:after,
|
||||
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;
|
||||
}
|
||||
@ -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 */
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user