Formularios html
Click here to load reader
-
Upload
nury-farelo-v -
Category
Documents
-
view
553 -
download
0
Transcript of Formularios html
![Page 1: Formularios html](https://reader038.fdocuments.es/reader038/viewer/2022100506/5560b21fd8b42a033c8b46d5/html5/thumbnails/1.jpg)
Introducción a Formularios con
HTML
![Page 2: Formularios html](https://reader038.fdocuments.es/reader038/viewer/2022100506/5560b21fd8b42a033c8b46d5/html5/thumbnails/2.jpg)
<DIV> … </DIV>
Se trata de un contenedor que incluye texto, imágenes, tablas, etc. Lo que se encuentre entre las etiquetas <DIV> y </DIV> se considera una capa que puede colocarse en cualquier parte de un documento HTML.
<div align=”center” >Esto es una contenedor<br /><img src=”logo.png” /></div
![Page 3: Formularios html](https://reader038.fdocuments.es/reader038/viewer/2022100506/5560b21fd8b42a033c8b46d5/html5/thumbnails/3.jpg)
<FORM> </FORM>
● Indica al navegador que empieza un formulario.
● Especifica valores del formulario (nombre, método de envío get o post y acción)
<form method="post" action="mailto:[email protected]">........................................................ </form>
![Page 4: Formularios html](https://reader038.fdocuments.es/reader038/viewer/2022100506/5560b21fd8b42a033c8b46d5/html5/thumbnails/4.jpg)
<INPUT>
● Permite al usuario introducir datos.
● Podemos especificar el tipo de entrada, nombre, valores, tamaño...
● Hay diferentes valores para type
<input type="text" name="remitente" value="alberto" size="35" maxlength="10" >
![Page 5: Formularios html](https://reader038.fdocuments.es/reader038/viewer/2022100506/5560b21fd8b42a033c8b46d5/html5/thumbnails/5.jpg)
type = “text”● Especifica una caja
de texto.● Password es otro
valor de type, en la que no se ve lo que se escribe.
<input type="text" name="remitente" value=“escribe aquí" size="35" maxlength="10" >
![Page 6: Formularios html](https://reader038.fdocuments.es/reader038/viewer/2022100506/5560b21fd8b42a033c8b46d5/html5/thumbnails/6.jpg)
type = “hidden”
● Campo invisible para el usuario, pero con información útil para el programador.
<input type=“hidden" name="remitente" value=“alberto" >
![Page 7: Formularios html](https://reader038.fdocuments.es/reader038/viewer/2022100506/5560b21fd8b42a033c8b46d5/html5/thumbnails/7.jpg)
type = “checkbox”
● Las casillas de verificación envian su valor solo si son seleccionadas
● Son casillas de selección múltiple.
<input type=“checkbox" name="moto" value="Si"> Moto
<input type=“checkbox" name="coche" value="Si"> coche
![Page 8: Formularios html](https://reader038.fdocuments.es/reader038/viewer/2022100506/5560b21fd8b42a033c8b46d5/html5/thumbnails/8.jpg)
type = “radio”
● Elegirá una única opción entre varias.
● El valor de name de los distintos radio de la misma familia será el mismo.
<input type=“radio" name="tipoSexo" value="H">Hombre
<input type=“radio" name="tipoSexo" value=“M">Mujer
![Page 9: Formularios html](https://reader038.fdocuments.es/reader038/viewer/2022100506/5560b21fd8b42a033c8b46d5/html5/thumbnails/9.jpg)
type = “submit”
● Genera un botón que al ser pulsado ejecutará la acción indicada en <form>.
● El texto que aparece en el botón es el especificado en value.
<input type="submit" value="Enviar consulta">
![Page 10: Formularios html](https://reader038.fdocuments.es/reader038/viewer/2022100506/5560b21fd8b42a033c8b46d5/html5/thumbnails/10.jpg)
type = “reset”
● Al ser pulsado reinicializa el contenido del formulario
● El texto que aparece en el botón es el especificado en value.
<input type=“reset" value=“Borrar">
NO BORRA
![Page 11: Formularios html](https://reader038.fdocuments.es/reader038/viewer/2022100506/5560b21fd8b42a033c8b46d5/html5/thumbnails/11.jpg)
<select> ..... </select>
● Ofrecerá una lista con los valores que puede elegir el usuario.
● Como atributos tenemos name, size o multiple.
<SELECT NAME="Colores" MULTIPLE>
..................</SELECT>
![Page 12: Formularios html](https://reader038.fdocuments.es/reader038/viewer/2022100506/5560b21fd8b42a033c8b46d5/html5/thumbnails/12.jpg)
<option>● Con esta etiqueta
definimos las distintas opciones elegibles por el usuario.
<option value="r"> Rojo </option> <option value="v" selected> Verde </option>
![Page 13: Formularios html](https://reader038.fdocuments.es/reader038/viewer/2022100506/5560b21fd8b42a033c8b46d5/html5/thumbnails/13.jpg)
<Textarea>.... </Textarea>
● Definimos un espacio con múltiples líneas donde el usuario podrá añadir un comentario.
● podemos darle un nombre y definir su tamaño con cols y rows.
<textarea cols=20 rows=10 name=“texto” > </textarea>
![Page 14: Formularios html](https://reader038.fdocuments.es/reader038/viewer/2022100506/5560b21fd8b42a033c8b46d5/html5/thumbnails/14.jpg)
EJEMPLO 1
![Page 15: Formularios html](https://reader038.fdocuments.es/reader038/viewer/2022100506/5560b21fd8b42a033c8b46d5/html5/thumbnails/15.jpg)
EJERCICIO PARA ENTREGARFormulario de Contacto
Crear un formulario en HTML que corresponda a un formulario deContacto de una pagina web.
Debe incluir: Nombre, email, teléfono, sección de interés de la Pagina web y comentario.
Debe agregarle 2 campos mas con información que Ud considereNecesaria, utilizando los demás elementos de formularios.
Al pulsar el botón “Enviar”, mostrar una pagina con un mensaje deConfirmación de envío del mensaje.
Puede incluir todos los elementos que desee incorporar (imágenes, links, etc).