Formularios

<form>

...

elementos de entrada

...

</form>

Elemento <input>

Un elemento input varía en muchas formas, dependiendo del atributo type

Campos de texto

<form>
    Buscar: <input type="text" name="buscar">
</form>


    Buscar:

Contraseña

<form>
    <p>Usuario: <input type="text" name="usuario"></p>
    <p>Contraseña: <input 
type="password"
 name="contrasena"></p>
</form>


    Usuario: 
    Contraseña:

Radio buttons

<form>
<input type="radio" name="sexo" value="masculino">Masculino<br>
<input type="radio" name="sexo" value="femenino">Femenino
</form>

Checkboxes

<form>
<input type="checkbox" name="vehiculo" value="Moto">Tengo una moto<br>
<input type="checkbox" name="vehiculo" value="Auto">Tengo un auto
</form>

Labels

<form>


<label>
<input type="checkbox" name="vehiculo" value="Moto">Tengo una moto
</label>

<br>
    


<label>
<input type="checkbox" name="vehiculo" value="Auto">Tengo un auto
</label>


</form>

<form>
<input type="checkbox" name="vehiculo" value="Moto" 
id="moto"
>
<label for="moto">
Tengo una moto</label><br>
<input type="checkbox" name="vehiculo" value="Auto" 
id="auto"
>

<label for="auto">


Tengo un auto</label>
</form>

Enviar

<form action="http://www.w3schools.com/html/demo_form_action.asp" method="get">
Usuario: <input type="text" name="user">
<input type="submit" value="Enviar">
</form>

Action: Es la url donde se enviarán los datos del formulario
Method: es el método de envío de los datos. Puede ser get o post

get: los datos son enviados como parte de la url
post: los datos son enviados como parte del encabezado http

Button

<button type="submit">Ingresar</button>

Valores posibles en type:

submit: Envía los contenidos del formulario, como el input
reset: resetea los valores del formulario
button: Botón estándar, su funcionalidad será definida vía javascript

TEXTAREA

Define una entrada de múltiples líneas, el valor se encuentra entre etiquetas:

<textarea rows="4" cols="50">
En el curso de desarrollo web aprenderás acerca de formularios HTML.
</textarea>

Fieldset y legend

Fieldset agrupa elementos en un formulario

<form>
  <fieldset>
    <legend>Datos personales:</legend>
    Nombre: <input type="text"><br>
    Email: <input type="text"><br>
    Fecha de nacimiento: <input type="text">
  </fieldset>
</form>

Legend contiene el título del grupo

Select y Option

Select crea una lista desplegable

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Option indica el ítem de la lista, value es el valor enviado al servidor.

Atributos extra

autofocus: Indica que el cursor debe tener el foco en este elemento
checked: El campo está establecito, es para checkbox o radiobutton
disabled: El campo está desactivado
placeholder: Texto de ejemplo dentro del input
readonly: El campo es de sólo lectura
required: El campo es obligatorio

Otros tipos de elementos input

date
email
file
hidden
number
range
search
tel
url

Number

type="number" indica que es un campo numero
min="0" Especifica el mínimo número aceptable.
max="10" Es el máximo valor aceptable.
step="2", combinado con el valor min, define los números aceptables en el rango 0, 2, 4, y así sucesivamente, hasta el valor máximo.
value="6" es el valor por defecto

Edad: <input type="number" size="6" name="age" min="18" max="99" value="21"><br> Aceptación: <input type="range" size="2" name="satisfaction" min="1" max="5" value="3">

Edad:
Aceptación:

Ejercicio 1

Hacer un formulario de búsqueda en nuestra página de recetas

La url de destino debería ser buscar/

Ejercicio 2

Hacer un formulario de contacto

Ejercicio 3

Hacer una página que permita enviar recetas, con los siguientes campos:

Nombre
Dificultad (fácil, media, difícil)
Receta
Ingredientes: ingrediente, cantidad, notas, agregar otro

Colocar validaciones donde le parezca necesario