Está en la página 1de 3

Formularios:

Formularios parte 1:
Los formularios nos permiten recopilar datos del usuario y enviarla a una base
de datos y/u otras fuentes de almacenamiento.
Los formularios tienen el siguiente aspecto:

Etiqueta form: <form> </form>


Añade un formulario.
La etiqueta form tiene varios atributos.
Atributos:
name:
Permite añadir nombre a la etiqueta (además se puede ver en la url (en el caso
de los formularios)).
Id:
Permite que desde Css modifiquemos (mediante un selector de id) la etiqueta
que tiene el nombre dentro del atributo id.
method:
Permite añadir la forma en la que envía los datos en el formulario y lo que
contiene.
Para almacenar los datos con el atributo method, añadir el valor “get”.
Etiqueta input:
<input > (dentro de la etiqueta form).
Añade algo dentro de su etiqueta.
La etiqueta input tiene varios atributos como:
type:
Permite poner dentro lo que vamos hacer con ello como el texto (type =”text”)
o el botón submit (type=”submit”) que permite enviar la información y
aparecer como botón (no confuncir con button, el submit es para formularios).
Nota: en este tipo de etiqueta (input), solo se permite añadir un atributo,
excepto en la etiqueta submit.
Para cambiar el texto del botón (submit):
Poner el atributo value (value=””) en la etiqueta input a lado de donde está el
atributo submit y escribir lo que gustes.

Además, podemos añadir atributos name e id en las etiquetas de input por si se


requieren después.
Una vez acabado, cuando se envíe información, se verá reflejado en el url.
Si hacemos un formulario, lo recomendable es encerrar el formulario en una
etiqueta section.
Nuevos atributos de la etiqueta form:
Autocomplete:
Permite eliminar el pequeño historial del texto de una casilla del formulario.
Puede ser valor on u off (on viene por defecto).
Novalidate:
Puede ser booleano.
Valores del atributo type de la etiqueta input:
Submit:
Añade botón que permite enviar el mensaje.
text:
Valor que permite escribir el texto.
email:
Valor que permite añadir un email.
El texto tiene que tener arroba obligatoriamente.
search:
Valor que permite buscar algo en la página web.
url:
Valor que permite añadir la url de una página web.
Tel:
Valor que permite añadir un número telefónico.
Modifica su estructura (casilla) dependiendo del dispositivo electrónico de un
usuario.

A partir de aquí es más complicado.


Number:
Añade un número pero se debe definir para qué, añadiendo max, min y/o step
(aunque no son obligatorios).
En el caso de que no le pongamos nada, simplemente permite añadir un
número.
Pero qué pasa si queremos que la casilla almacene una edad, en este caso,
debemos añadir un min y max.
Entonces usamos min y max como atributos secuenciales al valor number del
atributo input para poner un número mínimo y un máximo.
Otro atributo es el step y sirve para poner los números múltiplos según el valor
asignado y según el mínimo y máximo.
Pero habrá casos en que sitios web no establezca el rango de números
disponibles en el formulario, y por lo tanto no podemos saber qué número
poner en la casilla, para esto es usado el atributo placeholder.
El atributo placeholder permite incluir pequeñas instrucciones con aspecto de
marca de agua.
Se le añade un valor con la información que quiera decir.

También podría gustarte