Formularios en HTML
Los formularios
Los formularios son usados para que el usuario ingrese datos.
Esos datos son enviados a un documento, que se encuentra en un servidor, para que los procese (por ej., a un servidor web, a un servidor de email, etc.).
Esos datos son enviados a un documento, que se encuentra en un servidor, para que los procese (por ej., a un servidor web, a un servidor de email, etc.).
La etiqueta form
La etiqueta <form> se utiliza para definir un formulario.
El atributo action es obligatorio y nos indica el documento que procesará los datos del formulario enviado.
También contamos con el atributo method que nos define el método por el cual se enviarán los datos del usuario al servidor.
El atributo action es obligatorio y nos indica el documento que procesará los datos del formulario enviado.
También contamos con el atributo method que nos define el método por el cual se enviarán los datos del usuario al servidor.
Sintaxis
<form action="URL" method="valor">
...
</form>
...
</form>
La etiqueta input
Nos define el registro donde el usuario puede ingresar los datos.
Los usuarios interaccionan con los formularios a través de las llamados controles.
Los usuarios interaccionan con los formularios a través de las llamados controles.
Tipos de controles:
- Botones (buttons)
- Casillas de verificación (checkboxes)
- Radiobotones (radio buttons)
- Menúes (menus)
- Entrada de texto (text input)
- Selección de ficheros (file select)
- Controles ocultos (hidden controls)
- Controles tipo objeto (object controls)
El atributo type especifica el tipo de control a crear.
Sintaxis
</form>
<input type="control" atributo="valor">
</form>
<input type="control" atributo="valor">
</form>
El control "text"
Crea un control que nos permite ingresar un texto en una línea.
Ejemplo | |
Código
<form action="datos.php" method="get">Nombre: <input type="text" name="nombre"> Apellido: <input type="text" name="apellido"> </form> |
Resultado
|
| Nota: la propiedad name le asigna un nombre al elemento que luego puede ser usado en scripts o en hojas de estilo | |
El control "radio"
Se usa cuando queremos que el usuario elija una sola opción de entre una serie de posibilidades.
Ejemplo | |
Código
<form action="edades.asp" method="post">¿Edad? <input type="radio" name="edad" value="menor">menor de 17 <input type="radio" name="edad" value="adulto">entre 18 y 60 <input type="radio" name="edad" value="mayor">mayor de 61 </form> |
Resultado
|
| Nota: la propiedad name debe utilizar el mismo valor para todos los elementos de radio. La propiedad value asigna un valor al elemento que será utilizado por el documento que procese el formulario. | |
El control "checkbox"
Permite al usuario elegir varias opciones entre todas las posibilidades.
Ejemplo | |
Código
<form action="hobbie.php" method="get">¿Pasatiempos? <input type="checkbox" name="pasa" value="tv">TV <input type="checkbox" name="pasa" value="libros">Libros <input type="checkbox" name="pasa" value="musica">Música <input type="checkbox" name="pasa" value="otros">Otros </form> |
Resultado
|
| Nota: la propiedad name debe utilizar el mismo valor para todos los elementos de checkbox. La propiedad value asigna un valor al elemento que será utilizado por el documento que procese el formulario. | |
El control "password"
Funciona igual que text, pero el texto introducido se presenta mediante una serie de puntitos. Es utilizado generalmente para ingresar contraseñas.
Ejemplo | |
Código
<form action="verificacion.php" method="post">Nombre: <input type="text" name="nombre"> Password: <input type="password" name="pass"> </form> |
Resultado
|
El control "submit" y el control "reset"
El control submit es el botón de envio de datos del formulario y el control reset es el botón de reinicialización. Al ser pulsado reinicializa todos los controles a sus valores iniciales.
Ejemplo | |
Código
<form action="datos_personales.php" method="post">Nombre: <input type="text" name="nombre"> Contraseña: <input type="password" name="secreto"> <input type="submit" value="Enviar"> <input type="reset" value="Borrar"> </form> |
Resultado
|
| Nota: el valor de la propiedad value define el texto dentro del botón. | |
El control "file"
El control file nos permite enviar archivos por medio de un formulario.
Ejemplo | |
Código
<form action="archivo.php" method="post">Ingrese la foto: <input type="file" name="foto"> </form> |
Resultado
|
El control "hidden"
El control hidden nos permite enviar información oculta a los ojos del usuario.
Ejemplo | |
Código
<form action="oculto.php" method="post">Nombre: <input type="text" name="nombre"> Contraseña: <input type="password" name="contra"> <input type="hidden" value="cookie"> </form> |
Resultado
|
El control "image"
El control image nos permite utilizar una imagen personalizada como botón de un formulario.
Ejemplo | |
Código
<form action="archivo.php" method="post">Nombre: <input type="text" name="nombre"> Contraseña: <input type="password" name="contra"> <input type="image" src="/enviar.jpg"> </form> |
Resultado
|
Las etiquetas select y option
La etiqueta <select> es usada para crear un menú desplegable.
Cada opción ofrecida por el menú se representa con la etiqueta <option>
Cada opción ofrecida por el menú se representa con la etiqueta <option>
Ejemplo | |
Código
<form action="continentes.php" method="get"><select name="continente"> <option value="america">América</option> <option value="asia">Asia</option> <option value="europa">Europa</option> <option value="oceania">Oceanía</option> <option value="africa">Africa</option> </select> </form> |
Resultado
|
La etiqueta textarea
Se usa para crear un control de entrada de texto multilínea.
Los atributo rows y cols nos indican la cantidad de filas y columnas que tendrá el recuadro del área de texto.
Los atributo rows y cols nos indican la cantidad de filas y columnas que tendrá el recuadro del área de texto.
Ejemplo | |
Código
<form action="texto.php" method="post"><textarea name="eltexto" rows="5" cols="30"> Aquí podemos ingresar un texto introductorio si lo deseamos. </textarea> </form> |
Resultado
|
