Entrada de datos
Entrada de datos: <input>
<input>Un componente clave de los formularios, son los controles de entrada de datos gestionados mediante la etiqueta <input>. Los diferentes tipos de elementos de entrada pueden regular los datos ingresados para ajustarse a un formato específico y proporcionar seguridad adicional en la entrada de una contraseña por ejemplo.
<input>Antes de revisar los diferentes controles <input> que podemos utilizar, veamos los principales atributos que todos tienen en común:
id: Identificador HTML, necesario para poder vincular el control de entrada con su etiquetalabelcomo se verá más adelante.name: Nombre del control de entrada, imprescindible añadirlo para después poder relacionar y procesar correctamente los datos recibidos.disabled: Permite deactivar el control, aunque continúa siendo visible por parte del usuario.checked: Útil para los controles de entrada de tipo radio o checkbox, ya que indica que el control está seleccionado por defecto. Para el resto de controles de entrada se ignora.placeholder: Texto de ayuda que aparece sobre el componente para indicarle al usuario los valores que se deben introducir.autocomplete: análogo al visto para el elemento<form>.readonly: Indica que el valor existente en el formulario no se puede editar.required: Especifica que el formulario no se puede enviar a menos que se rellene el campo de entrada. Por tanto, el campo pasa a ser obligatorio.autofocus: El control de entrada recibe el foco al cargarse la página. Solo se admite un autofocus por página web.value: Contiene el valor introducido. Útil para facilitar valores por defecto al usuario.
Entrada para texto: <input type="text" >
<input type="text" ><input type="text" id="idNombre" name="nombre" placeholder="Introduce tu nombre" autofocus size="50" maxlength="100">
Mediante <input type="text"> se solicita la entrada de una cadena de texto. En un formulario de login, serviría para solicitar el nombre del usuario (que no el mail). Solo se permite una línea de texto. Para limitar la longitud del campo de entrada y el máximo de caracteres que se admiten se deben usar los siguientes atributos:
size: Especifica la longitud del recuadro del campo de entrada en número de caracteres. Por defecto es de 20 caracteres. El valor de este atributo no limita el número máximo de caracteres que el usuario puede introducir.maxlength: Especifica el número máximo de caracteres que el usuario puede introducir como valor del campo. Por defecto es de 524288 caracteres.minlength: Especifica el número mínimo de caracteres que el usuario debe introducir como valor del campo. Por defecto es de 0 caracteres.
Entrada para contraseñas: <input type="password" >
<input type="password" ><input type="password" id="idPass" name="password" placeholder="Introduce tu contraseña" size="10" maxlength="16" value="Educem00.">Mediante <input type="password"> se solicita la entrada de una cadena de texto que debe ocultarse al usuario. En un formulario de login, serviría para solicitar la contraseña del usuario. Solo se permite una línea de texto. Para limitar la longitud del campo de entrada y el máximo de caracteres que se admiten se deben usar los siguientes atributos:
size: Especifica la longitud del recuadro del campo de entrada en número de caracteres. Por defecto es de 20 caracteres. El valor de este atributo no limita el número máximo de caracteres que el usuario puede introducir.maxlength: Especifica el número máximo de caracteres que el usuario puede introducir como valor del campo. Por defecto es de 524288 caracteres.minlength: Especifica el número mínimo de caracteres que el usuario debe introducir como valor del campo. Por defecto es de 0 caracteres.
Si en un formulario con el campo <input type="password"> editamos desde el navegador el código web para modificar el tipo del campo a <input type="text"> obtendremos automáticamente en claro la cadena oculta.
Entrada para emails: <input type="email" >
<input type="email" ><input type="email" id="idEmail" name="correo" placeholder="Introduce tu correo electrónico">Mediante <input type="email"> se solicita la introducción de una dirección de correo electrónico válida. Una dirección de correo electrónico válida debe cumplir con el formato nombre_cuenta@dominio_web. Para limitar la longitud del campo de entrada y el máximo de caracteres que se admiten se deben usar los siguientes atributos:
size: Especifica la longitud del recuadro del campo de entrada en número de caracteres. Por defecto es de 20 caracteres. El valor de este atributo no limita el número máximo de caracteres que el usuario puede introducir.maxlength: Especifica el número máximo de caracteres que el usuario puede introducir como valor del campo. Por defecto es de 524288 caracteres.minlength: Especifica el número mínimo de caracteres que el usuario debe introducir como valor del campo. Por defecto es de 0 caracteres.
La validación web se limita a verificar el formato de la cuenta de correo electrónica introducida, no se comprueba si la cuenta existe o no. Tampoco impide el uso de correos temporales, por lo que pueden requerirse verificaciones adicionales a implementar por el desarrollador web.
Entrada para ficheros: <input type="file" >
<input type="file" ><p><input type="file" id="idAvatar" name="avatar" accept="image/x- png,image/gif,image/jpeg"></p>
<p><input type="file" id="idMultimedia" name="multimedia" accept="image/*,audio/*,video/*" multiple></p>Mediante <input type="file"> se solicita la subida de uno o múltiples ficheros. Para limitar el tipo de archivos que se permiten subir o si se permiten múltples ficheros o no se deben usar los siguientes atributos:
multiple: Indica que se permite la subida de múltiples ficheros.accept: Especifica los tipos de ficheros que se admiten en la subida. Su sintaxis es la siguiente:accept="file_extension|audio/*|video/*|image/*|media_type"
Si el formulario permite la subida de ficheros deberás indicar como enctype el valor "multipart/form-data".
Entrada para colores: <input type="color" >
<input type="color" > <input id="inColor1" name="color1" type="color" value="#FFFF00">
<input id="inColor2" name="color2" type="color" value="#00FF00">
<input id="inColor3" name="color3" type="color" value="#FF00FF">Mediante <input type="color"> se solicita la elección de un color. Se le puede asignar un valor por defecto mediante el código RGB en hexadecimal que corresponda al color elegido. Puede resultar útil para permitir que el usuario pueda personalizar el estilo visual de la web por ejemplo.
Entrada para télefonos: <input type="tel" >
<input type="tel" ><input id="inPhone" name="Phone" type="tel" value="+34666334455">Mediante <input type="tel"> se solicita la introducción de un teléfono.
Entrada para fechas: <input type="date" >
<input type="date" ><input id="inFecha" name="fecha" type="date" value="2019-11-30">Mediante <input type="date"> se solicita la introducción de una fecha válida, habitualmente mediante un selector de tipo calendario. Los valores por defecto deben introducirse mediante la sintaxis: yyyy-MM-dd en dónde yyyy es el año, MM es el número de mes y dd el número de día.
Entrada para fechas y horas: <input type="datetime-local" >
<input type="datetime-local" ><input id="inFechaHora" name="fechahora" type="datetime-local" value="2019-11-30T17:41">Mediante <input type="datetime-local"> se solicita la introducción de una fecha y hora válidas, habitualmente mediante un selector de tipo calendario. Los valores por defecto deben introducirse mediante la sintaxis: yyyy-MM-ddThh:mm en dónde yyyy es el año, MM es el número de mes, dd el número de día, hh la hora y mm los minutos.
Entrada para urls: <input type="url" >
<input type="url" ><input id="inURL" name="direccionURL" type="url" placeholder="Introduce la url de tu web favorita" size="40">Mediante <input type="url"> se solicita la introducción de una URL válida. En el caso de introducir la dirección de una página web es necesario incluir el protocolo correspondiente, ya sea http o https.
Entrada para valores numéricos: <input type="number" >
<input type="number" ><input id="inAltura" name="altura" type="number" min="1" max="2.5" step="0.01" value="1.74">Mediante <input type="number"> se solicita la introducción de un valor numérico (entero o real). Para limitar los posibles valores se deben usar los siguientes atributos:
min: Indica el valor mínimo permitido.max: Indica el valor máximo permitido.step: Indica el valor numérico de los incrementos que realizará el control cuando sea accionado por el usuario.
El separador decimal que debes emplear es el "." y no la "," aunque en el navegador veas los decimales con el símbolo de la ",".
Entrada para rangos numéricos: <input type="range" >
<input type="range" ><input id="inTemperatura" name="temperatura" type="range" min="18.0" max="24.0" step="0.1" value="21.0">Mediante <input type="range"> se solicita la elección de un valor numérico, pero usando para ello un control deslizante. Para limitar los posibles valores se deben usar los siguientes atributos:
min: Indica el valor mínimo permitido.max: Indica el valor máximo permitido.step: Indica el valor numérico de los incrementos que realizará el control cuando sea accionado por el usuario.
Casillas de Verificación: <input type="checkbox" >
<input type="checkbox" ><p>
<input id="inEstadoCivil" name="casado" type="checkbox" checked>
<label for="inEstadoCivil">Casado ?</label>
</p>
<p>
<input id="inParo" name="paro" type="checkbox">
<label for="inParo">En Paro ?</label>
</p>Mediante <input type="checkbox"> se requiere al usuario confirmación para hialguna u otra cuestión a través de la marca de una casilla de verificación. Para marcar por defecto una casilla de verificación, deberá añadirse a la misma el atributo checked.
Selectores: <input type="radio" >
<input type="radio" ><h2>Estado Civil</h2>
<p>
<input id="inCasado" name="estadocivil" value="casado" type="radio" checked>
<label for="inCasado">Casado</label>
</p>
<p>
<input id="inSoltero" name="estadocivil" value="soltero" type="radio">
<label for="inSoltero">Soltero</label>
</p>Mediante <input type="radio"> se requiere al usuario seleccionar una opción válida de entre un conjunto limitado. La elección se realiza mediante el click sobre el control de tipo radiobutton. Para marcar por defecto una opción, deberá añadirse a la misma el atributo checked. Para que este control funcione correctamente es imprescindible que existan un mínimo de dos opciones posibles a elegir, que todas las opciones posibles tengan el mismo valor para su atributo name y que para cada una de ellas se defina un valor diferente: value. De lo contrario el funcionamiento del componente de entrada será erróneo.
Si el funcionamiento no es el esperado revisa atentamente el valor asignado a los atributos name y value para los distintos selectores.
Botón de envío de formulario: <input type="submit" >
<input type="submit" ><input value="Envía el Formulario" type="submit">Mediante <input type="submit"> se presenta un botón que permitirá enviar los datos de un determinado formulario hacia el servidor web, desencadenando la acción definida en el atributo action del propio <form>. El texto que aparece en el botón se puede indicar a través del valor del atributo value. Todo formulario debería contar con este componente.
Botón de reinicio de formulario: <input type="reset" >
<input type="reset" ><input value="Limpia el Formulario!" type="reset">coMediante <input type="reset"> se presenta un botón que permitirá resetear todos los campos de un determinado formulario al valor por defecto. El texto que aparece en el botón se puede indicar a través del valor del atributo value. No se aconseja su utilización pues puede frustrar a los usuarios en caso de clickarlo por error.
Botón genérico: <input type="button" >
<input type="button" ><input type="button" value="Tocamela otra vez Sam" onclick="alert('Oh yeah!');">Mediante <input type="button"> se presenta un botón genérico que puede usarse para desencadenar la ejecución de un script predeterminado. El texto que aparece en el botón se puede indicar a través del valor del atributo value.
Etiquetas: <label>
<label>Este elemento debería acompañar en la medida de lo posible los diferentes campos de entrada de información, pues al enlazarse con estos mejora exponencialmente la accesibilidad del formulario.
<label for="inUser">Usuario:</label>
<input id="inUser" name="user" type="text">
<br>
<label for="inPasswd">Contraseña:</label>
<input id="inPasswd" name="passwd" type="password">
<br>
<label for="inRemember">Recordar contraseña:</label>
<input id="inRemember" name="remember" type="checkbox" checked>Como se puede apreciar en el ejemplo, este elemento se enlaza con un control de entrada de datos asignando a su atributo for el valor del atributo id del control de entrada de datos vinculado. Mediante esta unión se consigue que cuando el usuario pulse sobre la etiqueta definida se active el control de entrada vinculado (recibe el foco), o en el caso de los checkbox y radiobutton que estos se marquen. De esta forma se consigue mejorar la accesibilidad a la web y en general la experiencia del usuario con el formulario.
Recuerda que el valor del atributo id debería ser único en toda la web, así que tenlo presente cuando hagas copy-paste
Última actualización
¿Te fue útil?