CREACIÓN DE FORMULARIOS
Los
formularios en HTML nos ayudan a aumentar la interactividad de nuestra Web y
nos permiten recibir información de los usuarios de nuestra página. Estos están
compuestos por diferentes componentes para capturar información y botones.
La etiqueta
de los formularios es <form> y su cierre </form>. Todo lo que vaya
dentro de estas etiquetas serán parte del formulario.
Principales Atributos
action: El atributo “action” indica el tipo de acción
que va a realizar el formulario. Se puede pasar la url o ubicación del archivo
donde se enviará el formulario o una dirección de correo si se quiere enviar a
este.
method: Mediante este atributo le indicamos al
formulario la forma en la que el formulario será enviado. Existen dos valores
posibles: getEs una forma de envío de datos de una página a otra. Con este
método los datos se envían en la URL o dirección, haciéndolos visibles desde la
barra de direcciones del navegador. y postEs una forma de envío de datos de una
página a otra. Con este método los datos que se envían no se podrán ver ya que
viajan ocultos.
target: Mediante este atributo indicaremos la forma en
la que se desplegará la ventana que procesará el formulario. Sus valores
posibles son: _blank (nueva), _self (mismo frame), _parent (frame padre),
_top(cuerpo).
Elementos o componentes del formulario
Elemento <input>: Esta etiqueta establece un campo que
puede ser de diferente tipo, donde un usuario puede ingresar datos.
Principales Atributos de la etiqueta
<input>
type: especifica el tipo de elemento a utilizar.
Entre los cuales se tienen:
text: Es el campo más simple, generalmente se usa
para preguntas abiertas.
radio: Utilizado en preguntas de opción múltiple y
única respuesta.
checkbox: Utilizados para preguntas de opción múltiple y
múltiple respuestas.
password: Utilizado para capturar contraseñas que se
puede usar para acceder a un sistema.
submit: Botón para el envío del formulario.
hidden: Campo oculto. Este no será visible en el
formulario.
file: Campo para subir archivos al servidor.
value: Especifica el valor inicial del elemento.
name: especifica el nombre que tendrá el elemento.
id: Especifica el identificador que tendrá el
elemento.
disabled: Especifica si el campo va a estar
deshabilitado.
readonly: Especifica si el campo es de solo lectura Se
puede ver el contenido pero no se puede modificar.
size: Especifica el tamaño en caracteres de un campo
text o password.
checked: Indica que el elemento radio o checkbox inicia
marcado o seleccionado.
<!DOCTYPE
html>
<html>
<head>
<title>Formulario</title>
</head>
<body>
<form
action="http://www.google.com" method="post"
target="_blank">
Componente text:
<input type="text"
name="pelicula" value="titanic" size="20"
disabled="disabled"><br>
Componente radio:
<input type="radio"
name="genero" id="idgenero" checked="checked"
><br>
Componente checkbox:
<input type="checkbox"
name="hobbie" readonly="readonly" ><br>
Componente password:
<input type="password"
name="clave" id="idclave"><br>
Componente file:
<input type="file"
name="archivo" id="idarchivo"><br>
Componente submit:
<input type="submit"
value="enviar"
name="archivo"
id="idarchivo">
</form>
</body>
</html>
Elemento
<select>:
Estos
elementos son los que se conocen comúnmente como listas desplegables o lista de
opciones, donde el usuario podrá escoger una o múltiples opciones de acuerdo a
como se haya establecido.
Cada una de
las opciones de la lista vendrán entre las etiquetas <option> y
</option> y estas a su vez entre las etiquetas <select> y
</select> de la siguiente manera:
<select
name="transporte">
<option
value="1">Coche</option>
<option
value="2">Avión</option>
<option
value="3">tren</option>
</select>
Atributos
de la etiqueta <option></option>
disabled: Indica que la opción va a estar deshabilitada.
selected: Indica que la opción va a estar seleccionada
inicialmente
value: El valor real que tendrá la opción.
Elemento <textarea>
Esta etiqueta
permite crear un campo de texto de múltiples líneas, ideal para capturar textos
extensos; por ejemplo: una observación, un resumen, una sugerencia.
El texto a
ingresar estará entre las etiquetas <textarea> y </textarea>