formularios html5

Formularios en HTML
Estructura básica
<form
action="url"
method="post"
enctype="text/plain">
Nombre: <input type="text" name="nombre">
<br>
<input type="submit" value="Submit">
</form>
Elementos de un
Formulario
● Etiqueta form
● Campos de texto
● Campos de selección
● Campos de validación
● Botones
Etiqueta form
<form action="url" method="post"
enctype="text/plain">
</form>
Nos permite crear un formulario HTML.
Action: url donde queremos enviar esos datos
(mailto:) si es a un correo
Method: Método en el que se envía el formulario
(get o post)
Enctype: Tipo de datos que se envían (Casí siempre
text/plain)
Etiqueta input
Etiqueta que se utiliza para cada campo o boton
que quieras colocar en tu formulario.
<input type="tipo de campo">
Pasamos a ver las más importantes a
continuación
<input type="text">
Etiqueta que se utiliza para escribir un texto corto,
por ejemplo el nombre
<input type="text" name="nombre">
Atributos que le podemos añadir:
- value (un valor predeterminado)
- maxlength (número máximo de caracteres que te
permite escribir)
- size (tamaño que queremos que tenga el campo)
<input type="password">
Etiqueta que se utiliza para escribir un texto corto
de forma confidencial, no aparece en pantalla lo que
estas escribiendo.
<input type="password" name="clave">
Atributos que le podemos añadir:
- value (un valor predeterminado)
- maxlength (número máximo de caracteres que te
permite escribir)
- size (tamaño que queremos que tenga el campo)
<input type="hidden">
Etiqueta que se utiliza para escribir un texto corto de
forma no visible al usuario. Se utiliza para pasar
información útil al programador
<input type="hidden" name="id" value="25">
Atributos que le podemos añadir:
- value (un valor predeterminado)
<textarea>
Etiqueta que se utiliza para escribir un texto más
extenso, por ejemplo una descripcion.
<textarea name="descripcion"></textarea>
Atributos que le podemos añadir:
- rows (filas)
- cols (columnas)
- Si queremos especificar algún texto por defecto,
tan sólo tenemos que escribir entre las etiquetas.
<input type="radio">
Etiqueta que se utiliza para plantear una elección,
sólo pudiendo elegir una de las mostradas
<input type="radio" name="color" value="1">Rojo
<input type="radio" name="color" value="2">Azul
Atributos que le podemos añadir:
- checked (opción elegida por defecto)
<input type="checkbox">
Etiqueta que se utiliza para plantear una elección,
en este caso puedes elegir todas las opciones que
quieras
<input type="checkbox" name="color"
value="1">Rojo
<input type="checkbox" name="color"
value="2">Azul
Atributos que le podemos añadir:
- checked (opción elegida por defecto)
Listas de opciones
Etiqueta que se utiliza mostrar una serie de
opciones a elegir dentro de un desplegable.
<select name="color">
<option value="1">Rojo</option>
<option value="2">Azul</option>
<option value="3">Verde</option>
<option value="4">Negro</option>
</select>
Atributos que le podemos añadir:
- size (Número de opciones a mostrar)
- selected (opción elegida por defecto)
<input type="file">
Etiqueta que se utiliza para permitir adjuntar
archivos a tu formulario.
<input type="file" name="archivo">
<input type="submit">
Etiqueta que se utiliza para mostrar el tipico
boton de envio.
<input type="submit" value="Enviar">
<input type="reset">
Etiqueta que se utiliza para mostrar el tipico boton
de borrar datos.
<input type="reset" value="Borrar todo">
<input type="button">
Etiqueta que se utiliza para mostrar un botón que
combinado con otros lenguajes (Javascript por
ejemplo) puede realizar determinadas acciones.
<input type="button" value="Lo que sea">