Presidencia de la Nación

  1. Inicio
  2. Jefatura de Gabinete de Ministros
  3. Innovación, Ciencia y Tecnología
  4. Tecnologías de la Información y las Comunicaciones
  5. Contenidos digitales
  6. 3. Configurá cada tipo de campo

3. Configurá cada tipo de campo

Campos

En el formulario que ponemos de ejemplo para que pruebes vas a encontrar los mismos campos que utilizamos para ilustrar.

Textfield
  • Valor predeterminado: es un campo optativo, por default está en blanco. Si lo completás, va a aparecer ese texto como respuesta predeterminada.
  • Descripción: es un campo optativo, de manera predeterminada está en blanco. Si lo completás, cuando el usuario seleccione el campo o pase el cursor sobre él va a aparecer el texto como tooltip. Sirve para informarle al usuario qué se le pide, por qué o para qué, aunque es preferible que crees un placeholder, como te explicamos más abajo.
  • Validation: en “maxlength” y “minlength” podés especificar máximo y mínimo de caracteres que el usuario debe completar. Es un campo optativo, de manera predeterminada está en blanco.
  • Presentación: podés especificar un placeholder, texto que se va a mostrar en el campo con indicaciones o ejemplos para el usuario. Es una opción preferible a "descripción”.
  • Label display: elegís cómo se va a mostrar la etiqueta (nombre) del campo. De manera predeterminada va arriba del campo, puede ir a la izquierda (“alineado”) o no mostrarse (“ninguno”).
  • Los demás campos dejalos como aparecen de manera predeterminada. No modifiques los campos relacionados con CSS.

A continuación te mostramos un campo textfield obligatorio con placeholder.

Volvé al índice

Textarea

Lo configurás de manera similar a "textfield", solo no te da la opción de configurar extensión mínima o máxima.

A continuación te mostramos un campo textarea obligatorio con placeholder.

Volvé al índice

Correo electrónico

Sugerimos que dejes todas las opciones predeterminadas

Podés permitir que el usuario agregue varios correos en el campo (“multiple”) separados por coma.

“User email as default” no funciona porque Argentina.gob.ar no requiere logueo.

A continuación te mostramos un campo correo electrónico obligatorio con placeholder.

Volvé al índice

Marcado

Funciona como cualquier campo de texto en Argentina.gob.ar: acepta markdown (tanto estándar como las extensiones que desarrollamos para alertas o embeber videos).

Al final hay una opción, “display on”. La opción predeterminada es “form only”, por lo que el campo se muestra en el formulario pero no se carga en la base de datos.

Podemos usarlo para dar instrucciones, citar textos o mostrar imágenes o videos sobre los que debe responder el usuario, etc.

A continuación tenés un ejemplo.

Este es un alerta

Está hecho con markdown

Este es un botón de acción hecho con markdown

Volvé al índice

Select options
  • Múltiple: tildalo si el usuario va a poder seleccionar más de una opción.
  • Opciones: en este campo tenés que contruir las opciones, una por línea.
    El formato es: (clave_de_campo)(barra vertical)(opción que se le va a mostrar al usuario).
    La clave de campo puede ser alfanumérica, no puede llevar caracteres especiales ni espacios, se pueden separar elementos por guiones bajos (no medios)
    En el ejemplo de abajo usamos las opciones que siguen, te sugerimos que conserves copia de los listados de opciones que uses habitualmente, como localidades, sí/no/nsnc, para reutilizarlos cuando te hagan falta.

01|Por redes sociales
02|Vi la campaña en TV
03|Me avisó un conocido
04|Otros

  • Presentación: tildá “listbox” para que se muestre como lista desplegable (no recomendado en caso de selección múltiple). De modo predeterminado está destildado, lo que deja todas las opciones a la vista.
    Si tildás “randomize options”, el orden del listado será aleatorio (útil para evitar sesgos en las respuestas).
  • Los demás campos dejalos como aparecen de manera predeterminada. No modifiques los campos relacionados con CSS.

Abajo te mostramos un ejemplo con "listbox" y "randomize options".

Volvé al índice

Número
  • Validation: tildá “entero” si la cifra no va a llevar decimales. Podés configurar valor mínimo, máximo y si las cifras tienen un intervalo en particular (“step”), como 2-4-8-10 o 5-10-15-20.
  • Presentación: “element type” tiene tildado “campo de texto” de manera predeterminada, el formulario muestra un campo en blanco para completar.
    Si en el punto anterior pusiste valores mínimo y máximo, podés seleccionar “lista desplegable”, que permite elegir entre los valores intermedios (por ejemplo, mínimo y máximo de edad y la lista que muestra las edades intermedias para elegir la que corresponda; fijate el ejemplo de abajo).
  • “Prefix text placed to the left of the field” y “Postfix text placed to the right of the field” permiten que se agregue en la base de datos un símbolo antes o después del valor, como pesos o porcentaje.
  • “Decimal places” está configurado para que de manera predeterminada se completen cuatro decimales. Si en “validation” tildás “entero”, acá te conviene poner también cero.
  • “Thousands separator” y “Coma decimal” están configurados de manera predeterminada en inglés (coma para unidades de mil y punto para decimales), podés modificarlo.
  • Los demás campos dejalos como aparecen de manera predeterminada. No modifiques los campos relacionados con CSS.

A continuación te mostramos un ejemplo en el que el usuario debe informar su edad. Pusimos "entero", "mínimo" 21, "máximo" 35, "step" uno, "lista desplegable", "decimal places" cero.

Volvé al índice

Fecha
  • De manera predeterminada se muestra un desplegable para día, otro para mes y otro para año. Podés ocultar alguno de estos (“ocultar”), pero por lo menos tiene que mostrarse uno.
  • “Validation”: definís el período de años para elegir:
    • “start year” es el año inicial que se puede elegir, el formato es (signo más o menos)(cantidad de años)(espacio)(years). Si tuviera que ser 13 años atrás, pondríamos "-13 years"; en el caso de 2 años a futuro, "+2 years".
  • “End date”: es el último año que se puede elegir. Tiene que ser una fecha posterior a "start year".
  • “Presentación”: si tildás "Enable popup calendar" el usuario va a poder abrir un calendario como popup para seleccionar la fecha deseada.
  • Dejá los demás campos como aparecen de manera predeterminada.

En el siguiente ejemplo, el usuario tiene que informar solo el año de nacimiento. Recordá que antes debió poner su edad, así que pusimos start date -35 years (edad máxima que podía informar) y end date -21 years (edad mínima). También tildamos "Enable popup calendar".

Volvé al índice

Hora
  • Validation: de manera predeterminada está en blanco. En este caso, un desplegable muestra las 24 horas del día. Si querés limitar una banda horaria, informá la hora de inicio (“start time”) y de finalización (“end time”) con el formato "H:MMam" o "pm".
  • Presentación: elegí si se presenta en formato de 12 o de 24 horas y si los minutos se muestran en incrementos determinados (de a 1, de a 5, de a 10, etc.).

En el siguiente ejemplo, pusimos una banda horaria de 9 a 17. Para ello, en "start time" escribimos "9:00am" y en "end time", "5:00pm". Fijamos los minutos cada 30.

:

Volvé al índice

Archivo
  • Dejá con las opciones predeterminadas los campos “destino de la subida al servidor”, “upload directory” (directorio de destino) y “max upload size” (tamaño máximo de archivo, que nunca debe superar los 2 mb).
  • Lo que sí podés configurar es el tipo de extensión de archivo que el usuario va a poder subir:
    • imágenes: gif, jpg, png, bmp, eps, tif, pict, psd
    • documentos: txt, rtf, html, pdf, doc, docx, odt, ppt, pptx, odp, xls, xlsx, ods, xml
    • multimedia: avi, mov, mp3, ogg, wav
    • comprimidos: bz2, dmg, gz, jar, rar, sit, tar, zip

Recordá que no debés usar Argentina.gob.ar como repositorio. Una vez que recibas un archivo, descargalo y eliminalo del servidor.

Abajo tenés un ejemplo en el que el usuario solo puede subir un pdf de hasta 500 kb.

Más información
  • Los archivos deben ser menores que 1 KB.
  • Tipos de archivo permitidos: jpg jpeg.
Scroll hacia arriba