Descargar para leer sin conexión
S03 - Lenguaje HTML - Formulario con PHP
- 1. Taller de ProgramaciónWeb Sesión N° 03: Lenguaje HTML - Formulario
- 2. Logro de aprendizaje Alfinal de la sesión el estudiante diseña formularios mediante el uso de elementos HTML
- 3. • Formularios • Elementosde un formulario Agenda 4
- 4. Formularios Un formulario esun conjunto de controles (botones, cajas de texto, casillas de verificación, botones radio, etc) que permiten al usuario introducir datos y enviarlos al servidor web para su procesamiento. Los formularios web son uno de los principales puntos de interacción entre un usuario y un sitio web o aplicación. Los formularios permiten a los usuarios la introducción de datos, que generalmente se envían a un servidor web para su procesamiento y almacenamiento (consulta Enviar los datos de un formulario más adelante en el módulo), o se usan en el lado del cliente para provocar de alguna manera una actualización inmediata de la interfaz (por ejemplo, se añade otro elemento a una lista, o se muestra u oculta una función de interfaz de usuario).
- 5. Un formulario permiteque el visitante al sitio cargue datos y sean enviados al servidor. Formularios
- 6. 👉 https://inlearningcode.blogspot.com/2019/05/formularios.html Formularios en HTML5 Iniciacon la etiqueta <form> y dentro de esta vienen etiquetas <fieldset>, dentro de estos irán los diversos elementos que contendrá el formulario como pueden ser: • Campos de texto • Campos de contraseñas • Campos para fechas y hora • Campos para carga de archivo • Botones • Encabezado • Etc.
- 7. Controles de unFormulario
- 8. • . Laetiqueta que delimita un formulario es la etiqueta <form> ...</form>. Los atributos más importantes de la etiqueta <form> son: • action: contiene el nombre del agente que procesará los datos remitidos al servidor (por ejemplo, un script de PHP) • method: define la manera de enviar los datos al servidor. Los valores posibles son: • get: los valores enviados se añaden a la dirección indicada en el atributo action • post: los valores se envían de forma separada • Si el atributo method no está establecido, el formulario se comporta como si el valor fuera get. • La etiqueta <form> es un elemento de bloque. En su interior puede haber cualquier elemento típico de una página web (párrafos, imágenes, divisiones, listas, tablas, etc.), además de las etiquetas que crean los controles. • Las etiquetas que crean los controles en los formularios son: son <input>, <button>, <select>, <optgroup>, <option> y <textarea>. Además, se pueden estructurar los controles con las etiquetas <fieldset> y <legend>. Por último, la etiqueta <label> permite mejorar la accesibilidad de los controles. • El navegador envía únicamente los datos de los controles contenidos en el formulario. En una misma página puede haber varios formularios que envíen datos al mismo o a diferentes agentes Formularios
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20. <p>Nombre: <input type="text"name="nombre" size="40"></p> <p>Año de nacimiento: <input type="number" name="nacido" min="1900"></p> <p>Sexo: <input type="radio“ name="hm“ value="h"> Hombre <input type="radio“ name="hm“ value="m"> Mujer </p> <p> <input type="submit" value="Enviar"> <input type="reset" value="Borrar"> </p> </form> Ejemplo
- 21.
- 22. Casilla de verificación <inputtype=“chekbox“>
- 23. Ejercicio Diseñar el siguienteformulario en el que se pueda ingresar un nombre, seleccionar lenguajes de programación y luego enviar la información
- 24. <html> <head> <title>Prueba de formulario</title> </head> <body> Ingresesu nombre: <input type="text" name="nombre" size="30"><br> Seleccione los lenguajes que conoce: <br> <input type="checkbox" name="java">Java<br> <input type="checkbox" name="cmasmas">C++<br> <input type="checkbox" name="c">C<br> <input type="checkbox" name="csharp">C#<br> <input type="submit" value="Enviar"> </form> </body> </html> Código
- 25. Caja de textode contraseña <input type="password“>
- 26. Caja de textode contraseña <input type="password“>
- 27.
- 28.
- 29. Generar un comboboxcon 5 opciones de pasatiempo para seleccionar Ejemplo
- 30. <html> <head> <title>Formulario</title> </head> <body> Elija su pasatiempofavorito: <select name="pasa" enabled> <option value="tv">TV</option> <option value="libros">Libros</option> <option value="musica">Música</option> <option value="cine">Cine</option> <option value="teatro">Teatro</option> <option value="caminar">Caminar</option> <option value="otros">Otros</option> </select> </form> <p>La etiqueta <b>select</b> define un menú desplegable.<br> El atributo<b>disabled</b> lo dashabilita, sin permitir su selección.</p> </body> </html> Código
- 31. Práctica • Elaboramos unformulario para registrar diversos datos de una persona teniendo en cuenta un tema de actualidad.
- 32.