HTML5 y CSS3 pt. 3: Formularios y Tablas 04
input types - form required - placeholder - default checkbox & radio fieldset y legend - img alt="descripción".
This commit is contained in:
parent
d56594f7f4
commit
bbd9eefea1
GPG Key ID:
E070ECF4A754FDB1
@ -2,9 +2,9 @@
|
||||
|
||||
## 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).
|
||||
|
||||
@ -36,7 +36,7 @@ Formas de aplicar estilo 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
|
||||
del 0 al 9.
|
||||
@ -70,7 +70,7 @@ La representación de los colores en 6 posiciones
|
||||
Blanco -> rgb(255,255,255)
|
||||
```
|
||||
|
||||
##### Equipo de Front End
|
||||
#### Equipo de Front End
|
||||
|
||||
- Programador Front End
|
||||
- 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) -
|
||||
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
|
||||
[estilo](./html_css_parte2/productos.css).
|
||||
@ -181,7 +181,7 @@ Caracteres especiales, unicode
|
||||
|
||||
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).
|
||||
|
||||
@ -263,3 +263,40 @@ p.test { color: magenta; }
|
||||
|
||||
</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"`.
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
<body>
|
||||
<header>
|
||||
<div class="caja">
|
||||
<h1><img src="./imagenes/logo.png"></h1>
|
||||
<h1><img src="./imagenes/logo.png" alt="logo Barbería Alura"></h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="./index.html">Home</a></li>
|
||||
@ -23,18 +23,22 @@
|
||||
<main>
|
||||
<form>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<textarea id="mensaje" cols="70" rows="10"class="input-padron"></textarea>
|
||||
<div>
|
||||
<p>Como prefieres que te contactemos?</p>
|
||||
<textarea id="mensaje" cols="70" rows="10"class="input-padron"
|
||||
required></textarea>
|
||||
<fieldset>
|
||||
<legend>¿Como prefieres que te contactemos?</legend>
|
||||
|
||||
<label for="radio-email"><input type="radio" name="contacto"
|
||||
value="email" id="radio-email"> Email</label>
|
||||
@ -43,22 +47,24 @@
|
||||
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>
|
||||
value="whatsap" id="radio-whatsap" checked> Whatsapp</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>¿En que horario prefieres ser contactado?</legend>
|
||||
<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>
|
||||
</fieldset>
|
||||
<label class="checkbox"><input type="checkbox" checked>
|
||||
¿Te interesa recibir novedades y ofertas?
|
||||
</label>
|
||||
<input type="submit" value="Enviar Formulario"/>
|
||||
</form>
|
||||
</main>
|
||||
<footer>
|
||||
<img src="./imagenes/logo-blanco.png">
|
||||
<img src="./imagenes/logo-blanco.png" alt="logo Barbería Alura">
|
||||
<!-- Copyleft unicode 🄯 🄯 -->
|
||||
<!-- Copyright unicode © © -->
|
||||
<p class="copyright">🄯 CopyLeft 2023 - DevFzn</p>
|
||||
|
||||
@ -103,7 +103,7 @@ form {
|
||||
margin: 50px 0%;
|
||||
}
|
||||
|
||||
form label, form p {
|
||||
form label, form legend {
|
||||
display: block;
|
||||
font-size: 20px;
|
||||
margin: 0 0 10px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user