CS

Curso básico de formularios en lenguaje HTML

Índice

Formularios

Así se escribe: Así se ve:  
<form action="query.html" method="GET" name="form">
<pre>
  Nombre:&nbsp;&nbsp;&nbsp;&nbsp; <input NAME="nombre" size="20"> 
  Contraseña: <input TYPE="password" NAME="contrasena" size="20">
  <input TYPE="SUBMIT" VALUE="Enviar"> 
</pre>
</form>
 
      Nombre:      
      Contraseña: 
       
    
<form action="query.html"
 method="GET" name="comentario">
  Caja de texto de varias líneas:<p>
  <textarea rows="3" name="comentario" cols="20">Texto inicial</textarea>
  <input TYPE="SUBMIT" VALUE="Enviar"> 
  <input TYPE="RESET" VALUE="Borrar">
</form>

Caja de texto de varias líneas:

Botones de opciones

Así se escribe: Así se ve:  
<form action="query.html"
 method="GET"    name="radio">
      <p>Seleccione el idioma:</p>
      <input TYPE="radio" NAME="Idioma" VALUE="euskera"> Euskera <br>
      <input TYPE="radio" NAME="Idioma" VALUE="ingles"> Inglés <br>
      <input TYPE="radio" NAME="Idioma" VALUE="frances"> Francés <br>
      <input TYPE="SUBMIT" VALUE="Enviar">
    </form>

Seleccione el idioma:

Euskera
Inglés
Francés

Casillas de verificación

Así se escribe: Así se ve:  
<form action="query.html"
 method="GET"  name="checks">
      <p>Indique los idiomas que habla:</p>
      <input TYPE="checkbox" NAME="Idioma" VALUE="euskera"> Euskera <br>
      <input TYPE="checkbox" NAME="Idioma" VALUE="ingles"> Inglés <br>
      <input TYPE="checkbox" NAME="Idioma" VALUE="frances"> Francés <br>
      <input TYPE="SUBMIT" VALUE="Enviar">
</form>

Indique los idiomas que habla:

Euskera
Inglés
Francés

Ventana de selección

Así se escribe: Así se ve:  
<form action="query.html"
method="GET" name="ventana">
<p>Indique la forma de pago:</p>
  <p><select NAME="Pago" size="1" >
      <option VALUE="metalico"> En metálico </option>
      <option VALUE="cheque"> Cheque </option>
      <option VALUE="transferencia"> Transferencia bancaria </option>
  </select> <input TYPE="SUBMIT" VALUE="Enviar"> </p>
</form>

Indique la forma de pago:

Listas

Así se escribe: Así se ve:  
<form action="query.html"
method="GET" name="lista">
<p>Indique la forma de pago:</p>
  <p><select NAME="Pago" size="3" MULTIPLE>
      <option VALUE="metalico"> En metálico </option>
      <option VALUE="cheque"> Cheque </option>
      <option VALUE="transferencia"> Transferencia bancaria </option>
  </select> <input TYPE="SUBMIT" VALUE="Enviar"> </p>
</form>

Indique la forma de pago:

Otros elementos

Así se escribe: Así se ve:  
<form action="query.html"
method="GET" name="lista">
<p>Botón: <input type="button" value="Click me"
   onclick="alert('clicked')"></p>
<p>Color: <input type="color" name="colorInput"></p>
<p>Date: <input type="date" name="dateInput"></p>
<p>Date time: <input type="datetime-local" name="datetimeInput"></p>
<p>Email: <input type="email" name="emailInput"></p>
<p>File: <input type="file" name="fileInput"></p>
<p>Hidden:<input type="hidden" value="hiddenValue" name="hiddenInput"></p>
<p>Range:<input type="range" min="0" max="100" name="rangeInput"></p>
<p>More in <a href="https://www.w3schools.com/tags/att_input_type.asp"
   target="_blank" >HTML input</a> </p>
<input TYPE="SUBMIT" VALUE="Enviar"> </p>
</form>

Botón:

Color:

Date:

Date time:

Email:

File:

Hidden:

Range:

More in HTML input

Última actualización: 08 de Marzo de 2024