Unidad 8. Formularios (II)


Elementos de entrada <input>

 

Para insertar un elemento de entrada es necesario incluir la etiqueta <input> entre las etiquetas <form> y </form> del formulario.

El atributo name indica el nombre que se desea dar al elemento de entrada, mediante el cual será evaluado, y el atributo type indica el tipo de elemento de entrada.

Vamos a ver los diferentes tipos de elementos de entrada, y el resto de atributos que pueden definirse para cada uno de ellos.

Campo de texto:

Para insertar un campo de texto, el atributo type debe tener el valor text.

El atributo size indica el número de caracteres que podrán ser visualizados en el campo de texto, determina el ancho de la caja.

El atributo maxlenght indica el número de caracteres que podrán ser insertados en el campo de texto.

El atributo value indica el valor inicial del campo de texto.

Por ejemplo, para insertar un campo de texto, habría que escribir:

<input name="campo" type="text" value="Campo de texto" size="20" maxlength="15">

 

Campo de contraseña:

Para insertar un campo de contraseña, el atributo type debe tener el valor password.

El resto de atributos son los mismos que para un campo de texto normal. La única diferencia es que todas las letras escritas en el campo de contraseña serán visualizadas como asteriscos.

Por ejemplo, para insertar un campo de contraseña:

Habría que escribir:

<input name="contra" type="password" value="contraseña" size="20" maxlength="15">

Botón:

Para insertar un botón, el atributo type debe tener el valor submit, restore o button.

Si el valor es submit, al pulsar sobre el botón se enviará el formulario.

Si el valor es restore, al pulsar sobre el botón se restablecerá el formulario, borrándose todos los campos del formulario que hayan sido modificados y adquiriendo su valor inicial.

Si el valor es button, al pulsar sobre el botón no se realizará ninguna acción.

El atributo value indica el texto que mostrará el botón.

Por ejemplo, para insertar el botón:

Habría que escribir:

<input name="boton" type="submit" value="Enviar">

 

Casilla de verificación:

Para insertar una casilla de verificación, el atributo type debe tener el valor checkbox.

El atributo value indica el valor asociado a la casilla de verificación. Es necesario poner este atributo, aunque el usuario no pueda ver su valor. Es el valor a enviar.

La aparición del atributo checked indica que la casilla aparecerá activada inicialmente. Este atributo no toma valores.

Por ejemplo, para insertar la casilla:

Habría que escribir:

<input name="casilla" type="checkbox" value="acepto" checked>

 

Botón de opción:

Para insertar un botón de opción, el atributo type debe tener el valor radio.

El atributo value indica el valor asociado al botón de opción. Es necesario poner este atributo, aunque el usuario no pueda ver su valor. Es el valor a enviar.

La aparición del atributo checked indica que el botón aparecerá activado inicialmente. Este atributo no toma valores.

Los botones de opción se utilizan cuando se desea que una variable del formulario pueda tomar un solo valor de entre varios posibles. Para ello, se insertan varios botones de opción con el mismo nombre (que indica la variable) y con distintos valores. Sólamente uno de estos botones podrá estar activado, el que esté activado cuando se envia el formulario, su valor será el que tendrá la variable.

Por ejemplo, para insertar los botones de opción:


Habría que escribir:

<input name="prefiere" type="radio" value="estudiar" checked>
<input name="prefiere" type="radio" value="trabajar">

Cuando se envíe el formulario, si el primer botón está activado la variable prefiere será igual a estudiar, si es el segundo el activado, la variable prefiere valdrá trabajar. Observa que lo que ponemos como valor no aparece escrito en la página es un datos interno.

 

<input name="prefiere" type="radio" value="estudiar" checked>
<input name="prefiere" type="radio" value="trabajar">

Cuando se envíe el formulario, si el primer botón está activado la variable prefiere será igual a estudiar, si es el segundo el activado, la variable prefiere valdrá trabajar. Observa que lo que ponemos como valor no aparece escrito en la página es un datos interno.

Existen otros tipos como el tipo hidden que sirve para definir un campo oculto, campo que no ve el usuario, en este caso habría que incluir el atributo value para que el formulario pase ese valor al programa que recoge los datos del formulario.

Para que el usuario envie un fichero suyo a través del formulario tenemos el tipo file, este tipo hay que utilizarlo con mucho cuidado ya que si permitimos que cualquier internauta nos envie cualquier tipo de fichero nos podríamos encontrar con sorpresas no siempre agradables.

Atrás  Inicio  Adelante


.