“FORMULARIOS”

CESAR PINEDA TIRADOR

19250022

INSTITUTO TECNOLÓGICO DE TLALNEPANTLA

PROGRAMACION WEB

JOSE ANTONIO GALLARDO GODINEZ

08 DE MARZO DEL 2023

¿QUÉ ES UN FORMULARIO?
Los formularios HTML son esas cajas de texto y botones que podemos encontrar en muchas páginas web. Son
muy utilizados para introducir datos personales, por ejemplo, en sitios de comercio electrónico.
Los datos que el usuario introduce en estos campos son enviados a la base de datos del administrador o bien a
un programa que se encarga de procesarlos automáticamente.
Los formularios HTML son una forma sencilla de establecer mecanismos para que el usuario pueda introducir
información en una página web de forma sencilla e intuitiva, y el sitio web sea capaz de procesarla
correctamente y añadirla en una base de datos de la página, enviarla por email o procesarla para mostrar
información final al usuario.

¿QUE FUNCIÓN TIENEN?

Los formularios en HTML sirven al propósito de recolectar información proporcionada por los visitantes del
sitio, la cual es luego enviada nuevamente al servidor. Para su correcto funcionamiento es importante que el
formulario provisto en HTML sea acompañado de un código del lado servidor, al que denominaremos "agente
procesador", que se encargará de recibir y procesar la información como el autor vea conveniente. Este
procesamiento puede consistir en, por ejemplo, el almacenamiento de la información o su envío mediante
correo electrónico.

Nuestros objetivos al crear un formulario HTML deben ser los siguientes:

1. Hacer lo más sencillo posible el proceso de inserción de datos por parte del usuario.
2. Intentar que la experiencia de usuario sea lo más agradable posible.
3. Intentar que los datos introducidos por el usuario estén en un formato predecible y esperado.
4. Reducir los errores al introducir datos en la medida de lo posible y comunicarlo claramente si ocurren.

ATRIBUTOS Y CARACTERÍSTICAS

Atributos para la validación de campos en los formularios

La validación de los datos introducidos por los usuarios en los campos de los formularios es esencial para
ofrecer al usuario información sobre los datos que se están solicitando.
Gracias a los nuevos atributos que se introdujeron en HTML5 no es necesario utilizar JavaScript
obligatoriamente para la validación de los campos ya que se validan de forma automática al pulsar en el botón
de tipo submit. En la siguiente tabla se destacan los atributos más utilizados.

Atributo Pattern y expresiones regulares

El atributo pattern nos permite definir nuestras propias reglas para validar el valor de entrada de los campos
usando expresiones regulares o regexp (contracción de las palabras inglesas regular expression).
Veamos un resumen de algunos de los caracteres que nos ayudan a construir expresiones regulares:
ETIQUETAS PARA LA CREACIÓN DE FORMULARIOS

El principio y final de un formulario se define con las etiquetas <form> y </form>. Dentro de las etiquetas de apertura y
cierre de form se pueden incluir diferentes elementos que son enviados para ser procesados por el servidor web. HTML5
dispone de un gran número de elementos de formulario como puedes ver en la siguiente tabla.

Ejemplo:

<form>
<!--Etiqueta fieldset-->
<fieldset>
<!--Etiqueta legend-->
<legend>Datos personales</legend>
<!--Etiqueta label-->
<label>Nombre y apellidos: </label>
<!--Etiqueta input tipo texto-->
<input name='nombre' type='text'/><br>
<label>Sexo: </label>
<!--Etiqueta select-->
<select name="select">
<!--Etiqueta option-->
<option value="value1">Hombre</option>
 <option value="value2" selected>Mujer</option>
</select><br><br>
<label>Edad: </label>
<!--Etiqueta input tipo checkbox-->
<input type='checkbox' name='edad' value='20-39' /> 20-39
<input type='checkbox' name='edad' value='40-59' /> 40-59
<input type='checkbox' name='edad' value='60-79' /> 60-79<br><br>
<label>Email: </label>
<!--Etiqueta input tipo email-->
<input name='nombre' type='email'/><br><br>
<label>Estudios: </label>
<!--Etiqueta select-->
<select id="dino-select">
<!--Etiqueta optgroup-->
<optgroup label="Estudios Universitarios">
<!--Etiqueta option-->
<option>Doctorado</option>
<option>Máster</option>
<option>Grado</option>
</optgroup>
<optgroup label="Ciclo Formativo">
<option>Grado Superior</option>
<option>Grado Medio</option>
</optgroup>
</select><br><br>
<label>Elige tu navegador favorito: </label>
<input list="browsers" name="myBrowser" />
<!--Etiqueta datalist-->
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Internet Explorer">
<option value="Opera">
 <option value="Safari">
<option value="Microsoft Edge">
</datalist><br><br>
<!--Etiqueta textarea-->
<textarea name="textarea" rows="10" cols="50">Escribe aquí tu mensaje</textarea>
</fieldset>
<input type="submit" value="Enviar" />
</form><br><br>
<!--Nuevo formulario con output-->
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" name="b" value="50" /> +
<input type="number" name="a" value="10" /> =
<output name="result">60</output>
</form>

Resultado:

NUEVOS TIPOS DE CAMPO PARA <INPUT> EN HTML5

Ahora conozcamos los nuevos valores que puede tomar el atributo type para recopilar cierto tipo de
información, veamos:
Nuevos valores para atributo type
 color.- crea un campo con selector de color, de acuerdo al sistema operativo, aparece una paleta para
escoger un color.
 date.- se creará un campo de fecha, en ella se pueden colocar el día, mes y año.
 datetime.- permite ingresa información de hora, minuto y segundo.
 datetime-local.- genera un campo para fecha y hora, podemos colocar en ella el día, mes, año y hora.
 email.- para información de correo electrónico.
 month.- genera un campo para ingresar un mes del año.
  number.- para recopilar datos numéricos.
 range.- crea una barra con un botón desplazable para elegir un rango, por defecto el rango es de 0 a 100.
 search.- para generar una caja de búsqueda.
 tel.- para recopilar información de número telefónico.
 time.- crea un campo para ingresar hora y minuto.
 url.- para información de dirección URL.
 week.- crea un campo para elegir la semana del año.

El elemento <input> también tiene nuevos atributos:

 list: El ID de un elemento <datalist> cuyo contenido, los elementos <option>, van a ser usados como
ayudas y serán mostrados como propuestas en el área de sugerencias del campo input.
 pattern: Una expresión regular contra la que es verificado el valor del control, que puede ser usada con
valores de type de text, tel, search, url y email.
 formmethod: Una cadena que indica qué método HTTP (GET, POST, PUT o DELETE) debe ser usado
cuando se envía; sobrescribe el method del elemento <form>, si se define. El formmethod sólo se aplica
cuando el type es image o submit, y, para los métodos PUT y DELETE, sólo funcionará con un destino
que esté en el mismo dominio (política del mismo origen).

Características de los formularios

-Título
El titular del formulario tiene que ser llamativo, simple y claro.
-Subtítulo
El subtítulo se puede utilizar para añadir una descripción que clarifique la oferta. Esta es la parte de “por qué”
tendría que molestarme en rellenar el formulario.
-Imagen o color
Agrega alguna foto o un color fondo que inspire positividad al usuario.
-Campos
Añade únicamente los campos necesarios, evita formularios muy largos y facilita al usuario la información para
que pueda rellenarlos de forma rápida e intuitiva.
-Llamada a la acción
Esta parte es de suma importancia porque describe lo que va a ocurrir cuando se hace clic, o refuerza qué es lo
que se va a recibir.