Diseño Web

Clase 2

SENA - 2018

Formularios

Los formularios HTML se utilizan para recolectar información del usuario

La etiqueta <form> define un formulario HTML

Los formularios contienen elementos de formulario tales como:

• Cajas de texto
• Botones de opciones
• Casillas de verificación
• Listas desplegables
• Áreas de texto
• Botones

<label><input>

El elemento input cuenta con muchas variaciones, depende de como se especifica su atributo: type

Caja de texto

<label for="user">Usuario</label>

Caja de texto (contraseña)

<input type="password" name="pass"/>

Botón de opción

<input type="text" name="user"/>

<label for="pass">Contraseña</label>

<input type="checkbox" name="deporte" 
value="F"/> Fútbol

<input type="radio" name="genero" 
value="F" /> Femenino

Casilla de verificación

<input type="checkbox" name="deporte" 
value="B"/> Baloncesto

<input type="radio" name="genero" 
value="M" checked /> Masculino

Botón de envío de formulario

<input type="submit" value="Registrar">

<select>

El elemento select define una lista desplegable

  <select name="cursos">
    <option value="java">Java</option>
    <option value="php">PHP</option>
    <option value="C#">C#</option>
    <option value="ruby">Ruby</option>
    <option value="python">Python</option>
  </select>

<textarea>

El elemento textarea define un área de texto

<button>

El elemento button define un botón de propósito general

<textarea name="comentarios" rows="5" cols="30">
    Escribe tu comentario
</textarea>

<button type="button">
Presioname!</button>

<fieldset>

El elemento fieldset agrupa información relacionada en un formulario

<form>
    <fieldset>
     <legend>Información personal:</legend>
      <label for="nombre">Nombre:<br>
      <input type="text" name="nombre" value="Johnattan">
      <br>
      <label for="apellido">Apellido:<br>
      <input type="text" name="apellido" value="Jaramillo">
      <br><br>
      <input type="submit" value="Registrar">
    </fieldset>
</form>

<legend>

Agrupando elementos de formulario con fieldset

El elemento legend define un título para el elemento fieldset

action

Atributo que especifica archivo/página que recibirá los datos del formulario

method

Enviando información al servidor

Atributo que especifica el método de envío de los datos al servidor

get: envía los datos visibles en la URL

post: envía los datos ocultos

<form action="recibedatos.html" method="get">

get

<form action="recibedatos.html" method="get">
  <label for="nombre">Nombre:<label><br>
  <input type="text" name="nombre" value="Johnattan">
  <br>
  <label for="apellido">Apellido:<label><br>
  <input type="text" name="apellido" value="Jaramillo">
  <br><br>
  <input type="submit" value="Enviar datos">
</form>

post

Enviando información al servidor

La práctica hace al maestro

Realiza la siguiente lectura para conocer un poco mas sobre los formularios.

Lectura