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> 
Masculino
Femenino


Checkboxes

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

Tengo una moto
Tengo un auto

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> 

 Usuario:

  • 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
Made with Slides.com