formularioshtml.pdf
- 1. Hyper Text Markup Language Formularios
- 2. Los formularios en HTML Los formularios en HTML se utilizan para recolectar información del usuario. El elemento <form> define un formulario en HTML. Los elementos de un formulario son de diferentes tipos: cajas de texto, casillas de verificación, botones de opción, botones de envío, y más.. <form> . form elements . </form> 2
- 3. Los formularios: atributo action El atributo action define la acción que se realiza cuando se envía el formulario. La forma más común enviar los datos de un formulario a un servidor, es mediante el uso de un botón de envío (submit). Normalmente, el formulario se envía los datos a una página web en un servidor web. En este el ejemplo, se especifica un script del lado del servidor para manejar el formulario enviado: <form action="action_page.php"> Si se omite el atributo de acción, la acción se establece en la página actual. 3
- 4. Los formularios: atributo method El atributo method especifica el método HTTP (GET o POST) para ser utilizado al presentar los formularios: <form action="action_page.php" method="GET"> <form action="action_page.php" method="POST"> 4
- 5. Los formularios: ¿Cuándo utilizar GET? Puede usar GET (el método por defecto): – Si el envío del formulario es pasivo (como una consulta al motor de búsqueda), y sin información sensible. – Al utilizar GET, los datos del formulario serán visibles en la dirección de la página: action_page.php?firstname=Mickey&lastname=Mouse – GET es el más adecuado para cortos períodos de datos. Las limitaciones de tamaño son establecidas por el navegador en uso. 5
- 6. Los formularios: ¿Cuándo utilizar POST? Debe utilizar POST: – Si la formulario es de actualización de los datos, o incluye información confidencial (contraseñas). – Post ofrece una mayor seguridad ya que los datos presentados no está visible en la dirección de la página. 6
- 7. Los formularios: otros atributos Un <form> con todos sus atributos posibles, se verá así : <form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8" enctype="application/x-www-form-urlencoded" autocomplete="off" novalidate> . form elements . </form> 7
- 8. Los formularios: otros atributos 8 Atributo Descripción accept-charset Especifica el charset utilizado en el formulario enviado (por defecto: el charset de la pagina). action Especifica una dirección(url) a la cual se envían los datos autocomplete Especifica si el navegador debe autocompletar el formulario (por defecto: on). enctype Especifica la codificación de los datos presentados (por defecto es url-encoded). method Especifica el método HTTP utilizado para el envío de los datos (por defecto: GET). name Especifica un nombre para identificar el formulario (El uso en DOM : document.forms.name). novalidate Especifica que el navegador no debe validar el formulario target Específica el destino de la dirección en el atributo de acción (por defecto: _self).
- 9. Los formularios: Input Types <input type="text"> define un campo de entrada de una línea para la entrada de texto:: <form> Nombres:<br> <input type="text" name="nombre"> <br> Apellidos:<br> <input type="text" name="apellido"> </form> 9
- 10. Los formularios: Input Types <input type="password"> define un campo de contraseña: <form> User name:<br> <input type="text" name="username"> <br> User password:<br> <input type="password" name="psw"> </form> 10
- 11. Los formularios: Input Types <input type="submit"> define un botón para la presentación del formulario de entrada para un form-handler. El form-handler es típicamente una página del servidor con una secuencia de comandos para el procesamiento de los datos de entrada. El form-handler se especifica en el atributo action del formulario: <form action="action_page.php"> 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"> </form> 11
- 12. Los formularios: Input Types <input type="radio"> define un botón de radio. Los botones de opción permiten al usuario seleccionar sólo una de un número limitado de opciones: <form> <input type="radio" name="sex" value="male" checked>Male <br> <input type="radio" name="sex" value="female">Female </form> 12
- 13. Los formularios: Input Types <input type="checkbox"> define una casilla de verificación. Las casillas de verificación permite que un usuario seleccione cero o más opciones de un número limitado de opciones.. <form> <input type="checkbox" name="vehicle" value="Bike">I have a bike <br> <input type="checkbox" name="vehicle" value="Car">I have a car </form> 13
- 14. Los formularios: Input Types <input type="button"> define un botón: <input type="button" onclick="alert('Hello World!')" value="Click Me!"> 14
- 15. Los formularios: Elemento <select> El elemento <select> define una lista desplegable. Los elementos <option> definen las opciones de la lista para seleccionar. La lista mostrará normalmente el primer elemento como seleccionado. Usted puede agregar un atributo selected para establecer una opción predefinida. <select name=“carros"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat" selected>Fiat</option> <option value="audi">Audi</option> </select> 15
- 16. Los formularios: Elemento <select> El <optgroup> se utiliza para opciones relacionadas con el grupo en una lista desplegable. Si usted tiene una larga lista de opciones, un grupo de opciones relacionadas son más fáciles de manipular para un usuario. <select> <optgroup label="Carros Suecos"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> </optgroup> <optgroup label="Carros Alemanes"> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </optgroup> </select> 16
- 17. Los formularios: Elemento < textarea > El elemento <textarea> define un campo de entrada multilínea (un área de texto): <textarea name="message" rows="10" cols="30"> San Felipe en un hermoso estado ubicado en el centro occidente de Venezuela </textarea> 17
- 18. Los formularios: Elemento <fieldset> La etiqueta <fieldset> se utiliza para agrupar elementos relacionados en un formulario. La etiqueta <fieldset> dibuja un cuadro alrededor de los elementos relacionados La etiqueta <legend> define un título para el elemento <fieldset>. <form> <fieldset> <legend>Datos personales:</legend> Nombre: <input type="text"><br> Email: <input type="text"><br> Fecha de Nacimiento: <input type="text"> </fieldset> </form> 18
- 19. Los formularios: Atributos El atributo value especifica el valor inicial de un campo de entrada: <form action=""> Nombre:<br> <input type="text" name="firstname" value="Tony"> <br> Apellido:<br> <input type="text" name="lastname" value="Stark"> </form> 19
- 20. Los formularios: Atributos El atributo readonly especifica que el campo de entrada es de sólo lectura (no se puede cambiar): El atributo readonly no necesita un valor. Es lo mismo que escribir readonly = "readonly". <form action=""> Nombre:<br> <input type="text" name="firstname" value="Tony" readonly> <br> Apellido:<br> <input type="text" name="lastname" value="Stark"> </form> 20
- 21. Los formularios: Atributos El atributo disabled especifica que el campo de entrada está desactivado. En un elemento con atributo disabled no surten efectos los cambios y tampoco hacer clic. Los datos de un elemento con atributo disabled no pueden ser enviados. La etiqueta atributo disabled no necesita un valor. Es lo mismo que escribir disabled = "disabled". <form action=""> Nombre:<br> <input type="text" name="firstname" value="Tony" disabled> <br> Apellido:<br> <input type="text" name="lastname" value="Stark"> </form> 21
- 22. Los formularios: Atributos El atributo size especifica el tamaño (en caracteres) para el campo de entrada: <form action=""> Nombre:<br> <input type="text" name="firstname" value="Tony" size="40"> <br> Apellido:<br> <input type="text" name="lastname" value="Stark"> </form> 22
- 23. Los formularios: Atributos El atributo maxlength especifica la longitud máxima permitida para el campo de entrada Con un atributo maxlength, el control de entrada no aceptará más que el número de caracteres permitidos. El atributo no proporciona ninguna retroalimentación. Si desea alertar al usuario, debe escribir código JavaScript. <form action=""> Nombre:<br> <input type="text" name="firstname" maxlength="10"> <br> Apellido:<br> <input type="text" name="lastname"> </form> 23
- 24. Los formularios: input types en La etiqueta <input type = "number"> se utiliza para campos de entrada que deben contener un valor numérico. Se puede establecer restricciones sobre los números. Dependiendo de la compatibilidad del navegador, se pueden aplicar restricciones al campo de entrada. <form> Cantidad (entre 1 y 5): <input type="number" name="cantidad" min="1" max="5"> </form> 24
- 25. Los formularios: input types en 25 Atributo Descripción disabled Especifica que un campo de entrada está desactivado max Especifica el máximo valor para un campo de entrada maxlength Especifica el numero máximo de caracteres permitidos min Especifica el mínimo valor para un campo de entrada pattern Especifica una expresión regular para comprobar el valor de entrada readonly Especifica que un campo es de sólo lectura required Especifica que un campo de entrada es requerido (obligatorio) size Especifica el ancho en caracteres de un campo de entrada step Especifica el numero de intervalos para un campo de entrada value Especifica el valor por defecto del campo de entrada
- 26. Los formularios: input types en 26 El <input type=“date"> se utiliza para campos de entrada que deben contener una fecha. Dependiendo de la compatibilidad del navegador, un selector de fechas puede aparecer en el campo de entrada. <form> Fecha: <input type="date" name="bday"> </form>
- 27. Los formularios: input types en 27 Se puede establecer restricciones a la entrada de una fecha: <form> Enter a date before 1980-01-01: <input type="date" name="bday" max="1979-12-31"><br> Enter a date after 2000-01-01: <input type="date" name="bday" min="2000-01-02"><br> </form>
- 28. Los formularios: input types en 28 El <input type="color"> se utiliza para campos de entrada que deben contener un color. <form> Select your favorite color: <input type="color" name="favcolor"> </form>
- 29. Los formularios: input types en 29 El <input type = “range"> se utiliza para campos de entrada que deben contener un valor dentro de un rango. <form> <input type="range" name="points" min="0" max="10"> </form>
- 30. Los formularios: input types en 30 El <input type = “month"> permite al usuario seleccionar un mes y el año. <form> Birthday (month and year): <input type="month" name="bdaymonth"> </form>
- 31. Los formularios: input types en 31 El <input type = “week"> permite al usuario seleccionar una semana y año. <form> Select a week: <input type="week" name="week_year"> </form>
- 32. Los formularios: input types en 32 El <input type = "email"> se utiliza para campos de entrada que deben contener una dirección de correo electrónico. <form> E-mail: <input type="email" name="email"> </form>
- 33. Los formularios: input types en 33 El <input type = "email"> se utiliza para campos de entrada que deben contener una dirección de correo electrónico. Dependiendo de la compatibilidad del navegador, la dirección de correo electrónico se puede validar de forma automática cuando se presente. Algunos teléfonos inteligentes reconocen el tipo de correo electrónico, y agrega ".com" al teclado para que coincida con la entrada de correo electrónico. <form> E-mail: <input type="email" name="email"> </form>
- 34. Los formularios: input types en 34 El <input type="buscar"> se utiliza para campos de búsqueda (un campo de búsqueda se comporta como un campo de texto normal). <form> Search Google: <input type="search" name="googlesearch"> </form>
- 35. Los formularios: input types en 35 El <input type = "url"> se utiliza para campos de entrada que deben contener una dirección URL. Dependiendo de la compatibilidad del navegador, el campo URL se puede validar de forma automática cuando se presente Algunos teléfonos inteligentes reconocen el tipo de url, y añade ".com" al teclado para que coincida con la entrada url. <form> Add your homepage: <input type="url" name="homepage"> </form>
- 36. Los formularios: elementos en 36 El <datalist> especifica una lista de opciones predefinidas para un elemento <input>. Los usuarios verán una lista desplegable de opciones predefinidas. El atributo de lista del elemento <input>, debe hacer referencia al atributo id del elemento <datalist>. <form action="action_page.php"> <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> </form>
- 37. Los formularios: elementos en 37 El propósito del elemento <keygen> es proporcionar una forma segura para autenticar usuarios. El <keygen> especifica un campo generador de par de claves en un formulario. Cuando se envía el formulario, dos claves se generan, una privada y una pública. La clave privada se almacena localmente, y la clave pública se envía al servidor. La clave pública se podría utilizar para generar un certificado de cliente para autenticar al usuario en el futuro. <form action="action_page.php"> Username: <input type="text" name="user"> Encryption: <keygen name="security"> <input type="submit"> </form>
- 38. Los formularios: elementos en 38 El elemento <output> representa el resultado de un cálculo (como uno realizado por un script). <form action="action_page.asp" oninput="x.value=parseInt(a.value)+parseInt(b.value)"> 0 <input type="range" id="a" name="a" value="50"> 100 + <input type="number" id="b" name="b" value="50"> = <output name="x" for="a b"></output> <br><br> <input type="submit"> </form>
- 39. Bibliografías 39 Eguíluz Pérez, J. Introducción a XHTML. http://www.librosweb.es 2008. Creative Commons reconocimiento no comercial - sin obra derivada 3.0 W3Schools a web developers site. http://www.w3schools.com