Practica 7 Formularios

Programación web I
FORMULARIOS
Formularios básicos
Los formularios más sencillos se pueden crear utilizando solamente dos etiquetas:
<form> y <input>. Si se considera el formulario que muestra la siguiente imagen:
Formulario sencillo definido con las etiquetas form e input
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Prueba de formulario</title>
<meta charset="UTF-8">
</head>
<body>
<form action="" method="get">
Ingrese su nombre:
<input type="text" name="nombre" size="20">
<br>
<input type="submit" value="enviar">
</form>
</body>
</html>
Practica Página Web con formularios
Ana Linda Pineda Mendez

Programación web I
La etiqueta <form> encierra todos los contenidos del formulario (botones, cuadros
de texto, listas desplegables) y la etiqueta <input> permite definir varios tipos
diferentes de elementos (botones y cuadros de texto).
La mayoría de formularios utilizan sólo los atributos action y method. El atributo
action indica la URL de la aplicación del servidor que se encarga de procesar los
datos introducidos por los usuarios. Esta aplicación también se encarga de
generar la respuesta que muestra el navegador.
El elemento input. Este elemento que nos permite definir cuadros de texto y botón
para subir los datos al servidor. También podemos definir cuadros para el ingreso
de una clave y botones para borrar el contenido de todos los controles del
formulario.
type = "text | password | checkbox | radio | submit | reset | file | hidden | image |
button" - Indica el tipo de control que se incluye en el formulario
name = "texto" - Asigna un nombre al control
(value = "texto" - Valor inicial del control size = "unidad_de_medida" - Tamaño
inicial del control (para los campos de texto y de password se refiere al número de
caracteres)
Cuadro de texto
Se trata del elemento más utilizado en los formularios. En el caso más sencillo, se
muestra un cuadro de texto vacío en el que el usuario puede escribir cualquier
texto:
Ejemplo de etiqueta input (type=text)
A continuación se muestra el código HTML correspondiente al ejemplo anterior:

Programación web I
Nombre <br/> <input type="text" name="nombre" value="" />
Botón de envío de formulario

La mayoría de formularios dispone de un botón para enviar al servidor los datos
introducidos por el usuario:
Ejemplo de etiqueta input (type=submit)
<input type="submit" name="buscar" value="Buscar" />
El valor del atributo type para este control de formulario es submit. El navegador
se encarga de enviar automáticamente los datos cuando el usuario pincha sobre
este tipo de botón. El valor del atributo value es el texto que muestra el botón. Si
no se establece el atributo value, el navegador muestra el texto predefinido
<textarea>
Mensajes:<textarea placeholder="comentarios" name="textarea" rows="10"

cols="50">Es un inicio</textarea> <br><br>
El elemento textarea representa un campo para la entrada de texto multilínea. El

control asociado a este campo es una caja de texto que permite a los usuarios
editar múltiples líneas de texto regular. Los controles textarea son útiles para
recolectar o editar líneas largas de texto como mensajes, contenido de archivos,
listas, reseñas, artículos, etc.
Adicionalmente, declararemos el atributo placeholder con una pista acerca del
contenido que se espera sea ingresado en el control, el cual será mostrado dentro
de la caja de texto cuando ésta esté vacía.
Los atributos cols y rows para establecer el número de caracteres que el control
podrá mostrar al mismo tiempo, horizontal y verticalmente. Los navegadores
calcularán el ancho y la altura del elemento, multiplicando estos números por el
ancho y la altura de de un carácter de la fuente utilizada.
select (<select>)
El elemento select (<select>) de HTML representa un control que muestra un

menú de opciones. Las opciones contenidas en el menú son representadas por
elementos <option>
Lista de opciones <select name="estados">

<option value="morelos">Morelos</option>
<option value="chiapas">Chiapas</option>
<option value="puebla">Puebla</option>
</select><br><br>
El elemento HTML <option> se usa para representar un item dentro de un

<select>

Programación web I
lista multiple seleccion:<select name="transporte" size="2" multiple>

<option>Informatica</option>
<option>Contaduria</option>
<option>Administracion</option>
</select><br><br>
A la etiqueta <select> le podemos aplicar el atributo multiple, de modo que

desaparecerá la posibilidad de desplegar la lista
<form action="" method="get">
El atributo de acción específica dónde enviar los datos del formulario cuando se
envía un formulario. En HTML5, el atributo de acción ya no es necesario.
method
El atributo de method especifica cómo enviar datos de formulario (los datos de

formulario se envían a la página especificada en el atributo de acción).
Los datos del formulario se pueden enviar como variables de URL (con method =
"get") o como transacción posterior a HTTP (con method = "post").
Notas sobre GET:
 Agrega datos de formulario a la URL en pares de nombre / valor

 La longitud de una URL es limitada (aproximadamente 3000 caracteres)
 Nunca usar GET para enviar datos confidenciales (será visible en la URL)
 Útil para envíos de formularios donde un usuario desea marcar el resultado
 GET es mejor para datos no seguros, como cadenas de consulta en Google
Notas sobre POST:
Agrega datos de formulario dentro del cuerpo de la solicitud HTTP (los datos no se
muestran en la URL)
No tiene limitaciones de tamaño.
Los envíos de formularios con POST no pueden marcarse
Texto
Apellido: <input type="text" name="name_control" autofocus required />

Programación web I
name: Nombre del input (name=»nombre del input»)
autofocus
El atributo autofocus enfocará la página web sobre el elemento seleccionado pero

considerando la situación actual. No moverá el foco cuando ya haya sido
establecido por el usuario sobre otro elemento
required
Los navegadores no permitirán que el usuario envíe el formulario si los campos

obligatorios están vacíos y informar un error
Correo electrónico: <input type="email" name="email_control" required />
Con el HTML5 email input vamos a poder meter campos de email con validaciones
automáticas de una forma trivial.
Con este nuevo input de formulario de HTML5 el propio navegador es el que

detecta el tipo de campo que es y realiza las validaciones pertinentes.
ejemplo
<form name="ejemplo1"action="16-html5-email-input.php" method="POST">

Introduce tu email: <input type="email" name="email">
<input type="submit" value="Enviar">
</form>
HTML5 url input
Este nuevo input visualiza en teclados de dispositivos las teclas ‘.’, ‘/’, y ‘.com’ para
facilitar la inserción de URLs.
type = "date"
El <input type = "date"> define un selector de fecha.
Fecha nacimiento: <input type="date" name="cumpleanios" step="1" min="2020-

01-01" max="2020-12-31"
 ‘min‘: Para que la fecha mínima sea el 1 de enero 2020.

 ‘max‘: Para que la fecha máxima sea el 31 de diciembre 2020.
 ‘value‘: Fecha por defecto el 1 de enero 2013.
 ‘step‘: Para que el avance sel intervalo de los días sea de 1 en 1.

Programación web I
Algunos navegadores muestran en pantalla un calendario que aparece cada vez

que el usuario hace clic sobre el campo. El calendario le permite al usuario
seleccionar un día que será ingresado en el campo junto con el resto de la fecha.
Time
time input HTML5 que nos servirá para introducir una hora determinada en los
formularios web.
<form action="https://www.anerbarrena.com/demos/2014/002-time-input-
html5.php" name="formulario">
<input type="time" name="hora" value="11:45:00" max="22:30:00"

min="10:00:00" step="1">
<input type="submit" value="enviar">
</form>
 Se creo un formulario y también el botón de enviar y el time input.

 input con el atributo max pone una hora máxima.
 Con el atributo min se establece una mínimo de hora a insertar.
 Por defecto la hora que saldrá sera las 11:45:00 con el atributo value.
 Y para terminar con el atributo step se establece el avance de las flechas.
datetime
Además de la fecha nos permite seleccionar una hora concreta
atributos que usan:
Fecha y hora actual: <input type="datetime" name="fechahora" step="1"

min="2020-01-01T00:00Z" max="2020-12-31T12:00Z" value="2013-01-
01T12:00">
 El formato de fecha devuelto por defecto es UTC, ej: AAAA-MM-

DDTHH:MM.
 Se puede configurar un mínimo de fecha a seleccionar con el atributo ‘min‘:
min=”2019-10-08T23:59:60Z″.
 Se puede configurar un máximo de fecha a seleccionar con el atributo
‘max‘:
min=”2020-10-08T23:59:60Z″.

Programación web I
 Con el atributo ‘value‘ se puede poner el calendario con una fecha concreta
por defecto:
value=”2020-10-08T23:59:60Z″.
 Con el atributo ‘step‘ puedes establecer el avance o retroceso de días con
las flechas del calendario.
Month
Indica que es un campo de mes para formularios.
<form nanme="ejemplomonth" action="001-month-input-html5.php"

method="POST">
<input type="month" name="mes" step="1" min="2013-12" max="2014-12"
value="2014-01" >
<input type="submit" name="enviar" value="Enviar">
</form>
 Se crea un formulario en el que la url del ‘action‘ sea la misma demo.

 Se escribe el código del input type ‘month’.
 Se agrega un valor por defecto de 2014-01, un valor mínimo de 2013-12
y un máximo de 2014-12.
 Se coloca un botón de enviar formulario.
 Si el valor insertado es correcto saco por pantalla la fecha enviada.
Week
sirve para la selección del número de semana de un determinado año.
<form name="demo" action="/demos/2014/005-week-input-html5.php"

method="POST">
<input type="week" name="semana" min="2014-W01" max="2014-W16"
value="2014-W01">
</form>
 Se crea un formulario POST para enviar la semana y año

 El valor week input de HTML5 tendrá que ser mayor que la primera
semana de 2014, menor o igual que la semana 16 de 2014 y por defecto
tendrá el valor de la primera semana de 2014.
 Botón de enviar .

Programación web I
Number
Este elemento valida automáticamente que los valores introducidos sean

numéricos sin necesidad de scripts adicionales, toda la validación la realiza el
propio navegador
<form name="ejemplo1" action="11-html5-number-input.php" method="POST">

Introduce tu edad: <input type="number" name="edad">
</form>
 Se crea un formulario con method POST, en él tenemos el botón de enviar

y el input de tipo number.
 Al enviar el formulario con la edad nos hará automáticamente la validación
para ver si la edad es un contenido numérico.
 Si es numérico nos dejará enviar el formulario y sacará por pantalla la edad
enviada.
tel
Con el tel input HTMl5 se pueden validar fácilmente los campos de formularios en
los que se vayan a introducir números de teléfono.
<form name="ejemplo1" action="15-html5-tel-input.php" method="POST">

Introduce tu TELEFONO: <input type="tel" name="telefono">
</form>
Se ha creado un sencillo formulario con método POST con un campo de tipo ‘tel’.
search
HTML5 search input podemos hacer validaciones automáticas en un campo de

búsqueda
<form name="ejemplo" action="22-html5-search-input.php" method="POST">

Introduce el término de búsqueda: <input type="search"
name="busqueda"><br>
</form>
 Se introduce 2 input, uno de tipo submit y otro de tipo search.
Lo característico del input es que al escribir en él nos sale una ‘X’. Esta ‘X’ sirve
para borrar la cadena escrita

Programación web I
color
Este nuevo input de HTML5 nos proporciona una paleta (selector) de colores.
Selecciona un color: <input name="color" type="color" value="#f3f3f3"/>
En HTML5 para el tipo de campo color, despliega una grilla con un conjunto
básico de colores sea adoptada e incorporada en los navegadores.

Practica 7 Formularios

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Practica 7 Formularios

Încărcat de

Drepturi de autor:

Formate disponibile

Programación web I

Formulario sencillo definido con las etiquetas form e input

Practica Página Web con formularios

Ana Linda Pineda Mendez

Ana Linda Pineda Mendez

Nombre <br/> <input type="text" name="nombre" value="" />

Botón de envío de formulario

Mensajes:<textarea placeholder="comentarios" name="textarea" rows="10"

El elemento textarea representa un campo para la entrada de texto multilínea. El

El elemento select (<select>) de HTML representa un control que muestra un

Lista de opciones <select name="estados">

El elemento HTML <option> se usa para representar un item dentro de un

Ana Linda Pineda Mendez

lista multiple seleccion:<select name="transporte" size="2" multiple>

A la etiqueta <select> le podemos aplicar el atributo multiple, de modo que

<form action="" method="get">

El atributo de method especifica cómo enviar datos de formulario (los datos de

Notas sobre GET:

 Agrega datos de formulario a la URL en pares de nombre / valor

Notas sobre POST:

Apellido: <input type="text" name="name_control" autofocus required />

Ana Linda Pineda Mendez

name: Nombre del input (name=»nombre del input»)

El atributo autofocus enfocará la página web sobre el elemento seleccionado pero

Los navegadores no permitirán que el usuario envíe el formulario si los campos

Correo electrónico: <input type="email" name="email_control" required />

Con este nuevo input de formulario de HTML5 el propio navegador es el que

<form name="ejemplo1"action="16-html5-email-input.php" method="POST">

HTML5 url input

El <input type = "date"> define un selector de fecha.

Fecha nacimiento: <input type="date" name="cumpleanios" step="1" min="2020-

 ‘min‘: Para que la fecha mínima sea el 1 de enero 2020.

Ana Linda Pineda Mendez

Algunos navegadores muestran en pantalla un calendario que aparece cada vez

<input type="time" name="hora" value="11:45:00" max="22:30:00"

<input type="submit" value="enviar">

 Se creo un formulario y también el botón de enviar y el time input.

Además de la fecha nos permite seleccionar una hora concreta

atributos que usan:

Fecha y hora actual: <input type="datetime" name="fechahora" step="1"

 El formato de fecha devuelto por defecto es UTC, ej: AAAA-MM-

Ana Linda Pineda Mendez

Indica que es un campo de mes para formularios.

<form nanme="ejemplomonth" action="001-month-input-html5.php"

 Se crea un formulario en el que la url del ‘action‘ sea la misma demo.

sirve para la selección del número de semana de un determinado año.

<form name="demo" action="/demos/2014/005-week-input-html5.php"

 Se crea un formulario POST para enviar la semana y año

Ana Linda Pineda Mendez

Este elemento valida automáticamente que los valores introducidos sean

<form name="ejemplo1" action="11-html5-number-input.php" method="POST">

 Se crea un formulario con method POST, en él tenemos el botón de enviar

<form name="ejemplo1" action="15-html5-tel-input.php" method="POST">

Se ha creado un sencillo formulario con método POST con un campo de tipo ‘tel’.

HTML5 search input podemos hacer validaciones automáticas en un campo de

<form name="ejemplo" action="22-html5-search-input.php" method="POST">

 Se introduce 2 input, uno de tipo submit y otro de tipo search.

Ana Linda Pineda Mendez

Este nuevo input de HTML5 nos proporciona una paleta (selector) de colores.

Selecciona un color: <input name="color" type="color" value="#f3f3f3"/>

Ana Linda Pineda Mendez

S-ar putea să vă placă și