Etiquetas de formularios
| Función | Etiqueta |
| Establece la base de la creación de un formulario. | <form> </form> |
| Proporciona una etiqueta descriptiva y asociada a un elemento de entrada específico en un formulario web. Es importante asociarla con el elemento de entrada correspondiente utilizando el atributo for=" ". El valor del atributo for=" " debe coincidir con el valor del atributo id=" " del elemento de entrada al que está asociada la etiqueta. | <label> </label> |
| Crea elementos de entrada interactivos en un formulario web. Estos elementos permiten a los usuarios proporcionar información, seleccionar opciones o interactuar con la página web de diferentes maneras. | <input /> |
| Crea un elemento desplegable en un formulario web, que permite a los usuarios seleccionar una opción de una lista predefinida. | <select> </select> |
| Atributo que se usa en una de las opciones del menú desplegable para que quede como predeterminado. | selected |
| Se utiliza dentro de la etiqueta select para definir las opciones individuales que estarán disponibles en la lista desplegable. Admite el atributo value, que indica el valor que se enviará al servidor cuando se selecciona esa opción. El contenido de texto entre las etiquetas option define la etiqueta visible que se muestra al usuario en la lista desplegable. | <option> </option> |
| se utiliza en conjunto con un elemento de entrada input para proporcionar una lista de sugerencias predefinidas para el usuario mientras escribe en el campo de entrada. La etiqueta option se utiliza dentro de la etiqueta datalist para definir las opciones individuales que estarán disponibles como sugerencias para el usuario. | <datalist> </datalist> |
Atributos para la etiqueta input en formularios
| Función | Atributo |
| Define el tipo de elemento de entrada. | type=" " |
| Asigna un nombre al elemento de entrada que se utiliza como clave para enviar los datos al servidor. Es decir, con esta etiqueta se le dice al servidor en dónde colocar la información. | name=" " |
| Asigna un identificador único al elemento de entrada, que se utiliza para asociarlo con una etiqueta label y también para manipular el elemento con CSS y JavaScript. | id=" " |
| Es el valor que deseas enviar a la base de datos. Establece el valor predeterminado del elemento de entrada. En el caso de los botones de envío, este valor se muestra en el botón. | value=" " |
| Proporciona un texto descriptivo breve que se muestra dentro del elemento de entrada cuando está vacío y no está enfocado. Desaparece cuando el usuario comienza a escribir en el campo. | placeholder=" " |
| Este atributo booleano indica si el elemento de entrada es obligatorio para completar el formulario. Si está presente, el formulario no se enviará a menos que se proporcione algún valor para el elemento de entrada. | required |
| Este atributo booleano deshabilita el elemento de entrada, lo que significa que no se puede interactuar con él ni enviar su valor al servidor. | disabled |
| Este atributo booleano hace que el elemento de entrada sea de solo lectura, lo que significa que el usuario no puede modificar su valor, pero sí puede enfocarlo y copiar el valor. | readonly |
| Establece la longitud máxima de caracteres permitidos en un elemento de entrada de tipo text, password, email, search, tel y url. | maxlength |
| Establece el valor mínimo permitido en elementos de entrada numéricos, como number, date, time, range, etc.. | min |
| Establece el valor máximo permitido en elementos de entrada numéricos, como number, date, time, range, etc.. | max |
| Define el intervalo entre valores permitidos en elementos de entrada numéricos, como number, date, time, range, etc. | step |
| Especifica una expresión regular que el valor del elemento de entrada debe coincidir antes de que el formulario sea enviado. Se utiliza comúnmente para validar campos de texto personalizados. | pattern |
| Controla si el navegador debe proporcionar sugerencias de autocompletado para el elemento de entrada. Puede establecerse en "on" o "off". | autocomplete |
| en la etiqueta input se utiliza para asociar un elemento de entrada con un elemento datalist que contiene sugerencias predefinidas para el usuario. El valor del atributo list en el elemento de entrada debe coincidir con el valor del atributo id del elemento datalist correspondiente para que se establezca la conexión entre ambos elementos. | list |
Valores del atributo type para formularios
| Función | Valor |
| Crea un campo de texto de una sola línea. | text |
| Crea un campo de texto en el que se ocultan los caracteres para proteger la información. | password |
| Crea un botón con el fin de tener una opción entre múltiples posibles respuestas. | radio |
| Crea una casilla de verificación. Esta casilla es seleccionable y deseleccionable. | checkbox |
| Crea un campo especializado para ingresar direcciones de correo electrónico. | email |
| Crea un control de entrada para seleccionar una fecha. | date |
| Crea un control de entrada para seleccionar una semana. | week |
| Crea un control de entrada para seleccionar un mes. | month |
| Crea un control de entrada para seleccionar una hora. | time |
| Crea un control de entrada para seleccionar una fecha y hora local. | datetime-local |
| Crea un control de entrada para seleccionar y cargar un archivo. | file |
| Crea un botón que envía los datos al servidor. | submit |
Ejemplo de un formulario
<form action="/procesar_formulario.php" method="post">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" required>
<br>
<label for="email">Correo electrónico:</label>
<input type="email" id="email" name="email" required>
<br>
<label for="telefono">Teléfono:</label>
<input type="tel" id="telefono" name="telefono">
<br>
<label for="mensaje">Mensaje:</label>
<textarea id="mensaje" name="mensaje" rows="4" cols="50" required></textarea>
<br>
<input type="submit" value="Enviar">
</form>
Ejemplo de uso de la etiqueta select
<form action="/procesar_formulario.php" method="post">
<label for="pais">País:</label>
<select id="pais" name="pais">
<option value="estados_unidos">Estados Unidos</option>
<option value="mexico">México</option>
<option value="canada">Canadá</option>
</select>
</form>
Ejemplo de uso de la etiqueta datalist en vez de select
<form action="">
<label for="ciudad">Ciudad:</label>
<input type="text" id="ciudad" name="ciudad" list="Ciudades">
<datalist id="Ciudades">
<option value="Medellín"></option>
<option value="Bogota"></option>
<option value="Cartagena"></option>
<option value="Santa Marta"></option>
</datalist>
</form>
Comentarios