Skip to content

Latest commit

 

History

History
45 lines (36 loc) · 2.4 KB

README.md

File metadata and controls

45 lines (36 loc) · 2.4 KB
Raw

notes-forms

  • los elementos de tipo input son inline.
  • <input /> no tiene tag de cierre.
  • usamos el atributo type para determinar el tipo de campo, según el contenido y formato.
  • podemos usar inputs de forma independiente (si sólo nos interesa leer sus valores), pero si es información que queremos enviar/pedir de algún lado, necesitamos agruparlos dentro de un form.
  • un form funciona como un container de inputs, para enviar/requerir ciertos datos, en un único request.
  • los formularios nos sirven para recolectar input.
  • asociar las labels correspondientes a cada input:
<label for='full-name'>Name</label>
<input id='full-name' name='full-name' type='text'/>
  • setear el atributo action del form para decir a dónde queremos enviar los datos (URL).
  • setear el atributo name del input para identificar los datos que enviamos en el form.
    • ⚠️ los valores del atributo name deben respetar los nombres de parámetros esperados por la API que estemos usando, sino va a fallar el submit.
<form action="http://www.google.com/search" method="get">
  <input type="search" id="search-box" name="q" placeholder="Search..." autocomplete="on" />
  <button type="submit">Search with Google</button>
</form>

Autocomplete Dropdowns sin JS

Creating Autocomplete Dropdowns with the Datalist Element

tips

  • es muy recomendable hacer un wireframe del form antes de empezar a codearlo, al menos una versión lo-fi.
  • setear label e input asociado siempre en el mismo orden, para ser consistentes (y chequear que los atributos id y for coincidan).
  • setear el atributo required para los campos que sean obligatorios (<input required .../>)
  • si el input espera un mail, usar el type email.
  • elegir el tipo de input más apropiado en cada caso, también suma a la accesibilidad/ux.
  • ⚠️ si usamos el método get para el formulario, los datos de los inputs van a quedar expuestos en la URL. Suele utlizarse para búsquedas.
  • ⚠️ si vamos a enviar datos (sobre todo datos sensibles), setear el atributo method del form como post. De esta forma, los datos se agregan al body del request y no se muestran en la URL (ej: passwords).
<form action="https://google.com" method="post">
  ...
</form>