Resumen 18/05/2020

Hola a tod@s!!!

Un pequeño resumen para l@s que no han podido participar hoy! 😊

 

Hoy hemos revisado un ejercicio sobre el tema del “posistion: sticky” que he hecho este finde de semana basado en este ejemplo: https://codepen.io/WebDevSimplified/pen/pxLOVp

 

Al revisar el ejercicio hemos hablado de las características de los Combinators (>, +, ~) https://www.w3schools.com/css/css_combinators.asp, de los diferentes valores de “type” del input, de los formularios: https://www.w3schools.com/html/html_form_input_types.asp, en concreto hemos visto el tipo “search”: https://www.w3schools.com/tags/att_input_type_search.asp

Aquí un ejemplo se uso:

 

<form>

  <label for="gsearch">Search Google:</label>

  <input type="search" id="gsearch" name="gsearch">

</form>

 

Es útil recordar la diferencia entre el atributo “id” y el atributo “name”

-          El “id” de un elemento de input no tiene nada que ver con los datos contenidos dentro del elemento, solo sirve para enganchar el elemento con JavaScript y CSS.

-          El “name” se usa en la solicitud HTTP enviada por el navegador al servidor como nombre asociado con el dato contenido en el atributo “value”. https://teamtreehouse.com/community/what-is-the-difference-between-id-and-name-attributes-in-form-elements

 

Una pregunta interesante que salió hablando del elemento search es que, si es necesario poner el botón “submit” cuando se trata de un input de tipo search, ¿o en ese caso el simple “enviar” desde el teclado sirve de “submit”? Todavía no lo he buscado así que esta se queda para contestarla mañana 😊

 

Sin embargo, el tema central fue la inserción y el posicionamiento de un elemento del input de búsqueda (search) en el header de la página del ejercicio mencionado arriba alineado a la derecha. En el header ya preexistía un simple texto central que se quedaría alineado a la izquierda después de la inserción de elemento de input. (espero que se entienda…)

Pero, por sencillo que parece, no lo conseguimos… Igual debido a un conflicto de código de CSS… Hicimos varias pruebas, pero no salió… esto se quedó como ejercicio para mañana.

 

Como curiosidad, que no tiene nada a que ver con lo que hemos hecho hoy, os dejo estas dos etiquetas <bdi> y <bdo> 😊

 

Para hoy esto es todo 😊

Hasta mañana!!!