En este artículo aprenderá cómo crear un campo de entrada de texto en HTML. También aprenderá sobre formularios web y obtendrá una visión general de cómo funcionan, ya que los cuadros de texto son una característica común de cada forma.
Los formularios son una forma eficiente de recopilar información.
Hay muchos casos en los que necesitaría completar un formulario físico, un documento físico impreso y dar detalles personales.
Por ejemplo, puede completar un formulario y entregarlo a alguien cuando comience un nuevo trabajo, o cuando realice un chequeo médico, o cuando esté en el proceso de alquilar/comprar una casa, o cualquier Otro momento en que es necesario el papeleo.
Al igual que los formularios físicos, los formularios web digitales en línea son una forma de recibir y recopilar información, información y datos importantes de usuarios y visitantes, utilizando una combinación de tecnologías web.
Un formulario web imita un formulario físico al contener espacios para que los usuarios completen su información.
Los formularios web utilizan una variedad de herramientas, o controles de formulario, para recopilar la entrada del usuario.
Un sitio web puede tener un cuadro de búsqueda o un campo de entrada de texto, para ingresar una sola línea de texto. Esto permite a los usuarios buscar algo específico.
Un sitio web también puede contener un formulario de registro que permite a los usuarios registrarse para obtener un boletín u otras actualizaciones.
Eso generalmente contendría un campo de entrada de texto para ingresar el nombre, el apellido y la dirección de correo electrónico del usuario.
Muchos sitios web también tienen formularios de registro / inicio de sesión al realizar una compra en línea, por ejemplo, donde los usuarios ingresan su nombre de usuario en un campo de texto y su contraseña en un campo separado. Aunque los campos de contraseña también son campos de texto, cada carácter de texto está cubierto por un punto negro para ocultar lo que se está escribiendo.
¿Cómo hacer una caja de texto en HTML?
Es fácil crear un cuadro de texto en HTML con el elemento . Rompamos el proceso paso a paso a continuación.
Para comenzar, cree un elemento
nombre:
A continuación, cree un elemento . En la etiqueta de apertura, agregue un atributo de tipo y configúrelo en «Texto». Tenga en cuenta que este es su valor predeterminado. Luego, agregue un atributo de identificación y nombre y establezca tanto en el mismo valor que el atributo FOR en el paso anterior.
Entonces, para este ejemplo, establecería los atributos de nombre y identificación en «Nombre». Aquí está el HTML:
Se requiere el atributo de nombre para cualquier dato de un formulario que se envíe. Se requiere el atributo de identificación para asociar el campo de entrada con una etiqueta.
Las entradas de texto admiten atributos adicionales, como MaxLength, MinLength y Pplial Hearter, que pueden proporcionar un contexto importante a los usuarios a medida que completan un formulario.
Por ejemplo, es posible que desee agregar texto de marcador de posición al campo de entrada de ejemplo anterior para especificar que está buscando el nombre y apellido del usuario del usuario. Aquí está el HTML de lado a lado con el resultado en la parte delantera.
La entrada de cuadro de texto HTML se refiere a un campo de texto de una sola línea en un formulario. Puede crear uno con un elemento de entrada con un atributo de tipo especificado como «texto» o sin atributo de tipo especificado. Tenga en cuenta que no es necesario especificar el atributo de tipo ya que el tipo predeterminado de un elemento de entrada es «texto».
¿Cómo definir un área de texto en HTML?
Caminemos a través de dos ejemplos más avanzados para ilustrar cómo podemos usar la etiqueta
Volvamos a nuestra tienda de ropa. Supongamos que queríamos limitar el número de caracteres que un usuario envía a 1000, para alentar a los usuarios a ser concisos al escribir sus comentarios. También queremos establecer un límite mínimo de caracteres en 10, para garantizar que los usuarios escriban algo en el formulario.
Ahí es donde entran los atributos MinLength y MaxLength. MinLength se usa para especificar el número mínimo de caracteres que un usuario debe escribir, y MaxLength se utiliza para especificar el número máximo de caracteres que un usuario puede escribir en un formulario.
Aquí hay un ejemplo de nuestro formulario web de anteriores que tiene atributos MinLength y MaxLength Set:
No hay cambios visibles en nuestro formulario, pero si intentamos enviar nuestro formulario, el contenido del formulario se considerará inválido si el usuario ha escrito más de 1000 caracteres.
Es importante tener en cuenta que, incluso si el usuario escribe menos de 10 caracteres en nuestra forma, la textura aún se considerará válida. Si queremos hacer cumplir el límite mínimo, necesitamos especificar el atributo requerido.
En nuestro formulario web anterior, especificamos el texto predeterminado dentro de nuestro formulario. Este texto establece que sus comentarios van aquí. Si bien esta es información útil, el usuario debe eliminar el texto predeterminado manualmente si no lo desea en su respuesta de formulario.
Si desea especificar el valor de un marcador de posición, puede usar el atributo de marcador de posición. Este atributo establece un valor de marcador de posición que aparece cuando el formulario está vacío. Tan pronto como el usuario comienza a escribir en la caja, el marcador de posición desaparece.
¿Cómo hacer un rectangulo con texto en HTML?
De hecho, puede crear diferentes paneles de color gracias al código HTML, solución ideal para aquellos que desean proceder de forma independiente, sin la contribución de los CM o ninguna extensiones. ¿Cómo insertar cuadros con un color diferente del fondo de una publicación?
Esta es una caja de texto en el que ingresar la información Útil para ser resaltado
Aquí está el código a seguir como punto de partida. En este caso, definí el ancho (ancho) el espacio entre la fuente y el borde (borde) y el color del fondo, es decir, una especie de amarillo. El margen: el automóvil le permite mantener la caja en el centro.
¿No es suficiente el código HTML? En la gestión avanzada de diferentes cajas de color, puede obtener fácilmente secciones mucho más precisas con:
- Antecedentes: el contenido de la caja.
- Relleno: área vacía alrededor del contenido.
- Borde: el borde de la caja que creaste.
- Margen: es el margen entre cajas y más.
Para administrar esto de manera ordenada en cada sección del blog, puede usar el CSS. Por ejemplo, puede insertar una regla en su archivo que incluya algunos elementos.
Creé una regla que le permite obtener un cuadro gris para que mis textos se resalten sin un énfasis particular. ¿Cómo llamas a todo esto en una página?
Aquí pones el contenido.¿Cómo crear botones y cajas de texto en HTML?
Si queremos crear el cuadro de texto en el documento HTML para insertar los caracteres por parte del usuario en la página web, entonces tenemos que seguir los pasos que se dan a continuación. Usando estos pasos, cualquier usuario puede crear fácilmente un cuadro de texto.
Paso 1: En primer lugar, tenemos que escribir el código HTML en cualquier editor de texto o abrir el archivo HTML existente en el editor de texto en el que queremos crear el cuadro de texto.
Paso 2: Para crear el cuadro de texto, en primer lugar tenemos que definir la etiqueta
¿Cómo se inserta un texto en HTML?
Es posible que no se dé cuenta, pero ya aprendió a crear un párrafo HTML en la Lección 2, «Creando su primera página». En HTML, se crea un párrafo cada vez que inserta texto entre las etiquetas
. Mire el código de la Lección 2 nuevamente:
Los navegadores web ven que desea texto y lo muestran. Los navegadores web no prestan atención a cuántas líneas en blanco pones en tu texto; Solo prestan atención a las etiquetas HTML. En el siguiente código HTML, ve varias líneas de texto e incluso una línea en blanco, pero el navegador solo reconoce los párrafos rodeados por las etiquetas
y
(o etiquetas de párrafo). La etiqueta
le dice al navegador que agregue una línea en blanco antes de mostrar cualquier texto que lo siga, como se muestra en la Figura 3.1.
Figura 3.1 El navegador ignora la línea en blanco que inserté y coloca el descanso de la línea antes de la etiqueta
en su lugar.
Los navegadores web hacen algo más con el texto del párrafo que deba tener en cuenta: envuelven el texto al final de la ventana del navegador. En otras palabras, cuando el texto en su página web llega al borde de la ventana del navegador, continúa automáticamente en la siguiente línea, independientemente de dónde se encuentre la
. La etiqueta
siempre agrega una línea en blanco, pero podría No siempre quiero una línea en blanco entre líneas de texto. A veces solo desea que su texto aparezca en la siguiente línea (como las líneas de una dirección o un poema). Puede usar una nueva etiqueta para esto: la ruptura de línea, o
etiqueta, que se muestra en la Figura 3.2.Figura 3.2 Las etiquetas
y
ayudan a separar su texto en líneas y párrafos.¿Cómo se define un área de texto en HTML?
El elemento
HTML representa un control de edición de texto sencillo de múltiples líneas, útil cuando desea permitir a los usuarios ingresar una cantidad considerable de texto de forma libre, por ejemplo, un comentario en un formulario de revisión o retroalimentación. Este atributo indica si el navegador puede completar automáticamente el valor del control. Los valores posibles son:
- APAGADO: El usuario debe ingresar explícitamente un valor en este campo para cada uso, o el documento proporciona su propio método de combustión automática; El navegador no completa automáticamente la entrada.
- ON: El navegador puede completar automáticamente el valor en función de los valores que el usuario ha ingresado durante los usos anteriores.
Si el atributo de autocompletar no se especifica en un elemento
, entonces el navegador usa el valor de atributo de autocompletar del propietario del formulario del elemento . El propietario del formulario es el elemento
