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

HTML5 y CSS3 pt. 3: Formularios y Tablas 04

Browse Source 
input types - form required - placeholder - default checkbox & radio
fieldset y legend - img alt="descripción".
This commit is contained in:
devfzn 2023-04-12 00:03:17 -04:00
parent d56594f7f4
commit bbd9eefea1
Signed by: devfzn
GPG Key ID: E070ECF4A754FDB1
3 changed files with 64 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
004_primeras_paginas/README.md
View File

@ -2,9 +2,9 @@
## Primeros pasos ## Primeros pasos
### 04 Crea tus primeras paginas HTML5 y CSS **04** Crea tus primeras paginas HTML5 y CSS
#### Parte 1 - Primera página web ### Parte 1 - Primera página web
Diferencias entre [html y css](https://www.aluracursos.com/blog/html-css-javascript-cuales-son-las-diferencias). Diferencias entre [html y css](https://www.aluracursos.com/blog/html-css-javascript-cuales-son-las-diferencias).
@ -36,7 +36,7 @@ Formas de aplicar estilo CSS:
- style [file](./html_css_parte1/style.css). - style [file](./html_css_parte1/style.css).
##### Sistema hexadecimal #### Sistema hexadecimal
Sistema número que consta de las 6 primeras letras del alfabeto y los números Sistema número que consta de las 6 primeras letras del alfabeto y los números
del 0 al 9. del 0 al 9.
@ -70,7 +70,7 @@ La representación de los colores en 6 posiciones
Blanco -> rgb(255,255,255) Blanco -> rgb(255,255,255)
``` ```
##### Equipo de Front End #### Equipo de Front End
- Programador Front End - Programador Front End
- Responsable por UX (user experiencie) - Responsable por UX (user experiencie)
@ -82,7 +82,7 @@ Final curso HTML5 y CSS parte 1 - Página
[barbería](./html_css_parte1/index.html) - [barbería](./html_css_parte1/index.html) -
estilo.[css](./html_css_parte1/style.css). estilo.[css](./html_css_parte1/style.css).
#### Parte 2 - Posicionamiento, listas y navegación ### Parte 2 - Posicionamiento, listas y navegación
Página [productos](./html_css_parte2/productos.html) y Página [productos](./html_css_parte2/productos.html) y
[estilo](./html_css_parte2/productos.css). [estilo](./html_css_parte2/productos.css).
@ -181,7 +181,7 @@ Caracteres especiales, unicode
Final curso HTML5 y CSS parte 2 Final curso HTML5 y CSS parte 2
#### Parte 3 - Formularios y Tablas ### Parte 3 - Formularios y Tablas
Nueva página, [contacto.html](./html_css_parte3/contacto.html). Nueva página, [contacto.html](./html_css_parte3/contacto.html).
@ -263,3 +263,40 @@ p.test { color: magenta; }
</details></br> </details></br>
#### HTML input types
[w3schools input types](https://www.w3schools.com/html/html_form_input_types.asp)
<details><summary markdown="span">lista</summary>
```html
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">
```
</details></br>
Etiqueta `<fieldset>` como agrupador y `<legend>` como parrafo.
Descripción de imagenes `alt="Descripción de imagen"`.

34
004_primeras_paginas/html_css_parte3/contacto.html
View File

@ -10,7 +10,7 @@
<body> <body>
<header> <header>
<div class="caja"> <div class="caja">
<h1><img src="./imagenes/logo.png"></h1> <h1><img src="./imagenes/logo.png" alt="logo Barbería Alura"></h1>
<nav> <nav>
<ul> <ul>
<li><a href="./index.html">Home</a></li> <li><a href="./index.html">Home</a></li>
@ -23,18 +23,22 @@
<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" class="input-padron"> <input type="text" id="nombre_apellido" class="input-padron"
required/>
<label for⁼"email">Correo Eletrónico</label> <label for⁼"email">Correo Eletrónico</label>
<input type="text" id="email" class="input-padron"/> <input type="email" id="email" class="input-padron" required
placeholder="mail@dominio.com"/>
<label for⁼"telefono">Teléfono</label> <label for⁼"telefono">Teléfono</label>
<input type="text" id="telefono" class="input-padron"/> <input type="tel" id="telefono" class="input-padron" required
placeholder="(99) 9999 9999"/>
<label for="mensaje">Mensaje</label> <label for="mensaje">Mensaje</label>
<textarea id="mensaje" cols="70" rows="10"class="input-padron"></textarea> <textarea id="mensaje" cols="70" rows="10"class="input-padron"
<div> required></textarea>
<p>Como prefieres que te contactemos?</p> <fieldset>
<legend>¿Como prefieres que te contactemos?</legend>
<label for="radio-email"><input type="radio" name="contacto" <label for="radio-email"><input type="radio" name="contacto"
value="email" id="radio-email"> Email</label> value="email" id="radio-email"> Email</label>
@ -43,22 +47,24 @@
value="telefono" id="radio-telefono"> Teléfono</label> value="telefono" id="radio-telefono"> Teléfono</label>
<label for="radio-whatsap"><input type="radio" name="contacto" <label for="radio-whatsap"><input type="radio" name="contacto"
value="whatsap" id="radio-whatsap"> Whatsapp</label> value="whatsap" id="radio-whatsap" checked> Whatsapp</label>
</div> </fieldset>
<div> <fieldset>
<p>En que horario prefieres ser contactado?</p> <legend>¿En que horario prefieres ser contactado?</legend>
<select> <select>
<option>Mañana</option> <option>Mañana</option>
<option>Tarde</option> <option>Tarde</option>
<option>Noche</option> <option>Noche</option>
</select> </select>
</div> </fieldset>
<label class="checkbox"><input type="checkbox">Te interesa recibir novedades y ofertas?</label> <label class="checkbox"><input type="checkbox" checked>
¿Te interesa recibir novedades y ofertas?
</label>
<input type="submit" value="Enviar Formulario"/> <input type="submit" value="Enviar Formulario"/>
</form> </form>
</main> </main>
<footer> <footer>
<img src="./imagenes/logo-blanco.png"> <img src="./imagenes/logo-blanco.png" alt="logo Barbería Alura">
<!-- Copyleft unicode 🄯 &#127279; --> <!-- Copyleft unicode 🄯 &#127279; -->
<!-- Copyright unicode  &copy &#169; --> <!-- Copyright unicode  &copy &#169; -->
<p class="copyright">&#127279; CopyLeft 2023 - DevFzn</p> <p class="copyright">&#127279; CopyLeft 2023 - DevFzn</p>

2
004_primeras_paginas/html_css_parte3/style.css
View File

@ -103,7 +103,7 @@ form {
margin: 50px 0%; margin: 50px 0%;
} }
form label, form p { form label, form legend {
display: block; display: block;
font-size: 20px; font-size: 20px;
margin: 0 0 10px; margin: 0 0 10px;