TIPOS DE CAJAS Y SUS CARACTERÍSTICAS

Los campos de entrada de los formularios se definen mediante el tag <input> y sus diferentes valores. Estos valores nos permiten utilizar varios tipos de cajas y de formas.

CAJA DE TEXTO BÁSICA

La caja de texto básica se escribiría de la siguiente forma:

type= “text” le da a la caja una apariencia sencilla. Este tipo de campos se usan para albergar informaciones cortas y concretas.

Podemos completar el estilo de esta caja gracias a los siguientes atributos:

size: mediante el atributo size podemos definir el tamaño de la caja. Es decir, la apariencia de la misma. Si el texto que vamos a escribir no cabe en la caja, éste se desplazará pero sin que la caja varíe su tamaño. El texto irá desapareciendo por la izquierda.

maxlength: Este atributo nos sirve para definir la cantidad máxima de letras que se pueden escribir en la caja. No se podrán escribir en la caja más caracteres que los indicados por el maxlength.

value: Define si queremos que en la ventana haya un texto ya preescrito. Este texto puede ayudar al usuario a saber cúal es el tipo de dato que te piden en ese campo.

name: para ponerle un nombre al campo. Esto resulta muy útil a la hora de gestionar la información que nos llegue.

Tipo de caja “text”

tipo de caja “text” con un tamaño de 15 y un límite de caracteres de 30.

Además, tiene un texto preescrito en él. El resultado sería el siguiente:

Campos de texto largo: <textarea>

Un <textarea> es como una caja de texto sencilla, tipo “text”, pero en la que dejamos al usuario espacio de sobra para poder escribir un texto largo. Son útiles para que el usuario contacte con nosotros, plantee sus dudas o sugerencias, etc.

Su etiqueta es <textarea> y su correspondiente cierre </textarea>. Todo lo que vaya dentro de estas etiquetas formará parte del texto.

Sus atributos básicos son “rows” y “cols” que servirán para definir el tamaño del textarea. Además, no debemos olvidar el atributo “name”, que servirá para definir el nombre de este campo.

Un textarea llamado “comentarios” y con unas dimensiones de 10 filas y de 40 columnas, tendría el código siguiente:

<textarea name="comentarios" rows="10" cols="40">Escribe aquí tus comentarios</textarea>

Textos con passwords

En muchos formularios se piden datos personales que el usuario no quiere que se lean a su alrededor: contraseñas, etc. Para ello debemos crear una caja que no muestre los datos que se escriben en ella y que los codifique. Esto es más sencillo de lo que parece.

El siguiente código es de un campo con datos codificados:

BOTONES EN FORMULARIOS

Un botón nos permite realizar una acción con el formulario que lo contenga. Existen dos tipos básicos de botones: botón enviar el formulario (envío o submit) y botón poner todos los campos a sus valores iniciales (restablecimiento o reset). Normalmente un formulario contendrá, como mínimo, un botón (el botón enviar)

BOTONES DE ENVÍO (SUBMIT)

Este tipo de botones envía automáticamente el formulario en que se encuentra cuando es presionado. Es decir, cuando se pulsa el botón el navegador nos lleva a la dirección web indicada en el campo action y al mismo tiempo envía a esa dirección los datos que contiene el formulario. Para insertar un botón usamos la etiqueta <input … />. Para indicar que se trata de un botón de envío dentro de esta etiqueta escribiremos type = "submit". Escribe este código en un editor de textos, guárdalo como archivo con extensión HTML y comprueba los resultados que se obtienen.

<!DOCTYPE html>

<html>

<head>

<title>Ejemplo del uso de formularios - aprenderaprogramar.com</title>

</head>

<body>

</form>

</body>

</html>

BOTONES DE RESTABLECIMIENTO (RESET)

Este tipo de botones reestablecen los controles en un formulario a sus valores iniciales cuando es presionado. Son insertados con la etiqueta (tag) HTML input con el valor "reset" en su atributo "type". Escribe este código en un editor de textos, guárdalo como archivo con extensión HTML y comprueba los resultados que se obtienen.

<!DOCTYPE html>

<html>

<head>

<title>Ejemplo del uso de formularios - aprenderaprogramar.com</title>

</head>

<body>

Acepto las condiciones<br />

<input type="reset"

value="Restablecer todos los campos a su valor predeterminado" />

</form>

</body>

</html>

BOTONES DE IMAGEN (IMAGE)

Estos tipos de botones funcionan de la misma forma que los botones de envío salvo que los de imagen son representados visualmente con la imagen especificada en el atributo "src". Los botones de imagen envían, además de toda la información contenida en el formulario, las coordenadas donde ha ocurrido el click cuando el formulario fue enviado. Las coordenadas se determinan desde la esquina superior izquierda del botón (por ejemplo, para un botón de imagen llamado "boton1" las coordenadas serán enviadas en la forma "boton1.x" y "boton1.y"). En ocasiones las coordenadas no serán útiles, pero no tenemos que preocuparnos por ello ya que bastará con recuperar la información útil y ya está.

Los botones de imagen se insertan con el tag HTML input, usando el valor "image" en su atributo "type". Escribe este código en un editor de textos, guárdalo como archivo con extensión HTML y comprueba los resultados que se obtienen (nota: como ruta de la imagen puedes poner la ruta que te apetezca).

<!DOCTYPE html>

<html>

<head>

<title>Ejemplo del uso de formularios - aprenderaprogramar.com</title>

</head>

<body>

<input name="boton1" type="image"

src="/images/aprenderaprogramar/imagen.png">

</form>

</body>

</html>

BOTONES DE CONTENIDO (BUTTON)

Los botones de contenido pueden ser usados como botones de envío o restablecimiento, o bien pueden no tener ninguna acción preestablecida (dependiendo del valor de su atributo "type"). Su característica principal es que se puede insertar contenido HTML dentro de ellos y así dotarlos de un aspecto atractivo, imágenes o colores de fondo, etc.

Los botones de contenido se insertan con el tag HTML button, usando el valor "button", "submit" o "reset" en su atributo "type". Un valor button supondrá que el botón no hará nada en respuesta a un click, a no ser que se especifique una acción de otra manera (por ejemplo usando el lenguaje JavaScript, pero no vamos a explicar ahora cómo para centrarnos en el HTML). Un valor submit hará que el botón funcione como un botón de envío. Finalmente, un valor reset hará que el botón funcione como un botón de restablecimiento de los valores predeterminados del formulario.

Escribe este código en un editor de textos, guárdalo como archivo con extensión HTML y comprueba los resultados que se obtienen.

<!DOCTYPE html>

<html>

<head>

<title>Ejemplo del uso de formularios - aprenderaprogramar.com</title>

</head>

<body>

El <b>tag HTML type button</b><br />

permite contenido HTML en su interior.

</button>

</form>

</body>

</html>

Gráficos bidimensionales (I)

Los botones de radio se usan para permitirle al usuario elegir una de las opciones listadas. Para poder crear este tipo de campo, primero debemos darle un nombre que se usara para todo el grupo.

HTML<p>Elegir nacionalidad </p>

<p>

Española: <input type="radio" name="citizenship" /><br />

Rumana: <input type="radio" name="citizenship" /><br />

Inglesa: <input type="radio" name="citizenship" />

</p>

Demo

Elegir nacionalidad

Española:
Rumana:
Inglesa:

Especificando un nombre para el grupo, al cual pertenece el campo, permitirá mostrar al navegador cómo diferenciar entre más de un grupo de botones radio dentro del mismo formulario, por lo tanto permitirá la elección de una única variante de respuesta para cada grupo y formulario.

HTML<p>Escoger nacionalidad </p>

<p>

Inglesa: <input type="radio" name="citizenship" /><br />

Española: <input type="radio" name="citizenship" /><br />

Rumana: <input type="radio" name="citizenship" />

</p>

<p>Escoger genéro</p>

<p>

Femenino: <input type="radio" name="sex" /><br />

Masculino: <input type="radio" name="sex" />

</p>

Demo

Escoger nacionalidad

Inglesa:
Española:
Rumana:

Escoger genéro

Femenino:
Masculino:

HTML - Botones de radio seleccionados por defecto

Al igual que las casillas de verificación, los botones radio pueden ser seleccionados para facilitar el trabajo del usuario.

Elegir nacionalidad

Inglesa:
Rumana:
Española:

Cualquiera de estas opciones puede ser seleccionada, no necesariamente la ultima. Ademas, es bueno preseleccionar determinados respuestas con moderación y sólo cuando la información requerida no es de mayor importancia. Es posible que el usuario, sin prestar atención o por comodidad, elija la opción que ya ha sido seleccionada sin que esta sea la correcta para él en este caso.

	Created by Gabriela Angeles about 5 years ago

Bibiografía https://www.hazunaweb.com/curso-de-html/formularios-campos-texto/

Gabriela Cecilia Angeles Gomez 3PBM 02/09/19