ELEMENTOS DE
UN FORMULARIO
Indica el comienzo del formulario <form>
</form>
Principales atributos de la etiqueta FORM:
Action : indica la página donde se enviarán los valores introducidos en el formulario
Method: indica el método de envío. Sus posibles valores son GET (muestra valores) y POST
Target: si la página destino se desea abrir en otra ventana
Name: pone nombre al formulario
Autocomplete : on | off si deseamos que se autocomplete el formulario
<form action=“paginadeenví[Link]" target="_blank">
<form action=“paginaenví[Link]" method="get">
Elemento <input>
<input name="Apellido1" type="text">
Puede tener muchos tipos, pero los más
importantes son: text, option, submit
El type= text simplemente coloca una caja de un línea
donde poder introducir texto. El atributo value permite
colocar un nombre por defecto
<form>
Nombre:<br>
<input type="text" name=“nombre“ value=Incognito><br>
Apellido:<br>
<input type="text" name=“apellido1">
</form>
Input type=radio
<input name=“Sexo" type=“radio">
El type= radio coloca una serie de botones de opción única
(tienen que tener el mismo name). El atributo value indica
el valor que es enviado. El atributo checked indica la
opción que es marcada por defecto
<input type="radio" name=“genero" value="other“ checked>
<form>
<input type="radio" name=“sexo" value=“hombre" checked> Macho<br>
<input type="radio" name=“sexo" value=“mujer"> Hembra<br>
<input type="radio" name=“sexo" value=“otro"> Otro
</form>
Input type= submit
<input type="submit" value=“Pincha para enviar “>
El type= submit coloca un botón que al ser pulsado envía
los datos que hayamos introducido en el formulario. El
atributo value indica el texto que aparece dentro del botón
(si no se pone aparece por defecto Enviar)
<form>
Nombre:<input type=“text" name=“identidad“>
<input type="radio" name=“sexo" value=“hombre" checked> Macho<br>
<input type="radio" name=“sexo" value=“mujer"> Hembra<br>
<input type="radio" name=“sexo" value=“otro"> Otro
<input type="submit" value=“Pincha para enviar “>
</form>
Otros elementos del formulario
<fieldset> Agrupa los elementos del
formulario dentro de un marco
</fieldset>
<legend> Pone un título al marco anterior
</legend>
<form action=“[Link]">
<fieldset>
<legend> Información Personal:</legend>
Nombre:<br>
<input type="text" name="firstname" value=“Pepe"><br>
Apellido:<br>
<input type="text" name="lastname" value=“Gotera"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
Otros elementos del formulario: lista desplegable
<select> Lista desplegable (drop-down list)
Nos muestra una caja donde podemos ver los
distintos valores a seleccionar. Hay que
acompañarla de la etiqueta <option value=“uno”>
Ciclo SMR </option>
Que contendrá los posibles valores a desplegar
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<select name="cars" size=“3" multiple>
La etiqueta select admite dos atributos:
Size: que indica el número de valores que se muestran
Multiple: que indica si se permiten seleccionar varios
valores
<optgroup label=“Suecos”> (drop-down list)
Agrupa opciones dentro de la lista desplegable
<select>
<optgroup label="Suecos">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label=“Alemanes">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
Otros elementos del formulario: Area de texto
<textarea> Nos muestra una caja donde
podremos introducir texto (como el input
type=text ) pero que admite más de una línea
Admite los atributos:
Rows: que indica el número de filas que se muestran
Cols: que indica el número de columnas
<textarea name=“observacion" rows="10" cols="30">
Introduce aquí todo lo que quieras indicar para
mejorar la situación
</textarea>
<input type=“submit">
Otros elementos del formulario: Botón
<button> Nos muestra un botón sobre el que
hacer click. Muy utilizado con javascript.
Dentro del botón aparece el texto que pongamos
antes de la etiqueta de cierre. </button>
Es recomendable utilizar el atributo: type=button qpara
que se muestre igual en todos los navegadores
<button type="button" onclick="alert('Hello World!')">
Púlsame si te atreves</button>
Otros elementos del formulario: Lista de datos
<datalist id=milista> Similar a las listas
desplegables.
Va dentro de una etiqueta <input list=milista>
que tiene que tener el mismo nombre que el
identificador del datalist
<form action="[Link]">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
Otros type dentro de input
• Casillas de verificación: checkbox <input type="checkbox">
<input type="password">
• Contraseñas
<input type="reset">
• Botón de reset
<input type="color" name="favcolor">
• Botón selección de color <input type="date" name="bday">
• Entradas de fechas y horas <input type="datetime-local" name="bdaytime">
<input type="email" name="email">
• Botones genéricos
<input type="button" onclick="alert('Hello
World!')" value="Click Me!">
<input type="checkbox" name="vehicle1" value="Bike">
Checkbox o Casillas de verificación
<form>
<input type="checkbox" name="vehicle1" value="Bike"> Tengo bici<br>
<input type="checkbox" name="vehicle2" value="Car"> Tengo coche
</form>
<input type="password" name="psw">
Password o contraseña: oculta los caracteres
mientras los vamos introduciendo
<form>
User name: <input type="text" name="username"><br>
User password:<input type="password" name="psw">
</form>
<input type="reset“ value=“”>
Reset: Introduce un botón que permite
vaciar el contenido de todo el formulario
<form action="[Link]">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
<input type="reset“ value=“Borrar los datos”>
</form>
<input type="color" name="favcolor“ value=#>
color: permite seleccionar un color
<form>
Selecciona el color favorito:
<input type="color" name="favcolor“ value=“#ffff00”>
<input type=“submit" >
</form>
<input type="date" name="bday">
<input type="datetime-local" name="bdaytime">
Para introducir fechas
Otros tipos para Input
•email
•month
•number
•range
•search
•tel
•Time
•file
•url
•week
Atributos que podemos poner a las etiquetas input
Attribute Descripción
disabled Entrada desactivada (no se envía)
max Máximo valor que se puede introducir
maxlength Máximo número de caracteres que podemos introducir
min Mínimo valor que se puede introducir
readonly Campo de solo lectura (no se puede cambiar)
required Es obligatorio rellenar el valor antes de ser enviado
size Ancho de la caja en caracteres
value Valor que aparece por defecto
Ejercicio 1: realiza
el formulario en
castellano y déjalo
idéntico
En la lista desplegable del Estado debe aparecer
en su lugar Provincia y se deberán desplegar todas
las provincias de Castilla y León y de Galicia
agrupadas por comunidad.
Ejercicio 2: realiza un formulario que contenga al
menos una entrada input de cada uno de los
tipos que se muestran en los apuntes y a su lado
un texto descriptivo del tipo de entrada que se
trata.