Elementos de formulario

Los formularios permiten que el usuario escriba, seleccione o elija opciones en la página. Aquí mostramos algunos ejemplos comunes:

• Campo de texto:
  
  <input type="text" placeholder="Escribe aquí">
  
  Resultado:


• Área de texto:
  
  <textarea rows="4" cols="40" placeholder="Escribe tu opinión aquí..."></textarea>
  
  Resultado:
  


• Botón de opción (radio):
  
  <input type="radio" id="rojo" name="color" value="rojo">
<label for="rojo">Rojo</label>
<input type="radio" id="azul" name="color" value="azul">
<label for="azul">Azul</label>
<input type="radio" id="verde" name="color" value="verde">
<label for="verde">Verde</label>
  
  Resultado:
  Rojo
  Azul
  Verde
  


• Casilla de verificación (checkbox):
  
  <input type="checkbox" id="futbol" name="deporte" value="futbol">
<label for="futbol">Fútbol</label>
<input type="checkbox" id="basket" name="deporte" value="basket">
<label for="basket">Baloncesto</label>
<input type="checkbox" id="natacion" name="deporte" value="natacion">
<label for="natacion">Natación</label>
  
  Resultado:
  Fútbol
  Baloncesto
  Natación
  
  


• Lista desplegable:
  
  <select>
  <option>Opción 1</option>
  <option>Opción 2</option>
</select>
  
  Resultado:
  HTML CSS

---

Editor interactivo

Prueba estos elementos dentro de una estructura HTML completa:

<p>Pregunta1</p> <br> <input type="text" placeholder="Escribe aquí"> <br> <p>Pregunta2</p> <input type="radio" id="rojo" name="color" value="rojo"> <label for="rojo">Rojo</label><br> <input type="radio" id="azul" name="color" value="azul"> <label for="azul">Azul</label><br> <input type="radio" id="verde" name="color" value="verde"> <label for="verde">Verde</label><br> <p>Pregunta3</p> <input type="checkbox" id="futbol" name="deporte" value="futbol"> <label for="futbol">Fútbol</label><br> <input type="checkbox" id="basket" name="deporte" value="basket"> <label for="basket">Baloncesto</label><br> <input type="checkbox" id="natacion" name="deporte" value="natacion"> <label for="natacion">Natación</label><br><br>

Ver resultado

---