Formularios en HTML

Club de Código

Escuela Superior de Informática Buceo

sdanielf.github.io/workshops/

Componentes

• Delimitador: Etiqueta form
• Acción
  • Método: GET/POST
  • Botón de enviar (Submit)
• Campos: Input
• Grupos: Fieldset
• Textos: Label y Legend

Un campo de formulario

Texto antes...
<input type="text">
Texto después...

Campos con etiquetas

<form>
  <label for="nombre">Nombre:</label>
  <input name="nombre" type="text">
</form>

Otros tipos de campos

Contraseñas

<form>
  <div>
    <label for="usuario">Usuario:</label>
    <input name="usuario" type="text">
  </div>
  <div>
    <label for="clave">Contraseña:</label>
    <input name="clave" type="password">
  </div>
</form>

Listas excluyentes

<form>

  <label for="genero">Género:</label>
  <div>
    <input type="radio" name="genero" value="m" checked>
    Masculino
  </div>
  <div>
    <input type="radio" name="genero" value="f">
    Femenino
  </div>
</form>

Verificador

<form>

  <legend>Actividades:</legend>
  <div>
    <input type="checkbox" name="estudia" checked>
    <label for="estudia">Estudia</label>
  </div>
  <div>
    <input type="checkbox" name="trabaja">
    <label for="trabaja">Trabaja</label>
  </div>
</form>

Botón

<form>
  <input type="button" value="Botón input">
  <button>Botón button</button>
  <input type="submit" value="Enviar información">
</form>

Listas desplegables

<form>
  <select name="x">
    <option value="a">Opción A</option>
    <option value="b">Opción B</option>
  </select>
</form>

Otros campos parcialmente soportados

• color
• date
• datetime
• datetime-local
• email
• month
• number

• range
• search
• tel
• time
• url
• week