Campos de formulario en HTML

Etiquetas para textos y números

 

<p>
   <label for="texto">Escribe texto: </label>
   <input id="texto" type="text" placeholder="escribe aquí un texto" required>
</p>
 

<p>
   <label for="numero">Escribe numero: </label>
   <input id="numero" type="number" value="2" min="0" max="5">
</p>
 

<p>
   <label for="password">Escribe contraseña: </label>
   <input id="password" type="password" value="pwd">
</p>
 

<p>
   <label for="mail">Escribe e-mail: </label>
   <input id="mail" type="email" value="cursosonline@e-gri.com">
</p>
 

<p>
   <label for="rango">Selecciona: </label>
   <input id="rango" type="range" min="10" max="50" step="10" list="marcas" value="30">
   <datalist id="marcas">
      <option value="10">
      <option value="20">
      <option value="30">
      <option value="40">
      <option value="50">
   </datalist>
</p>
 

<p>
   <label for="tlf">Escribe telefono: </label>
   <input id="tlf" type="tel" value="900869415">
</p>
 

<p>
   <label for="enlace">Escribe url: </label>
   <input id="enlace" type="url" value="https://cursos.e-gri.com/">
</p>
 

<p>
   <label label for="buscar">Texto a buscar: </label>
   <input id="buscar" type="search" value="GRI">
</p>
 

<p>
   <label label for="archivo">Selecciona archivo: </label>
   <input id="archivo" type="file">
</p>
 

<p>
   <label label for="color">Selecciona color: </label>
   <input id="color" type="color" value="#36a8bf">
</p>

Seleccion de opciones

Opcion 1 Opcion 2 Opcion 3 

<p>
   <label for="opciones">Selecciona la opción: </label>
   <input title="opcion1" name="opciones" value="1" id="opcion1" type="radio"> Opcion 1
   <input title="opcion2" name="opciones" value="2" id="opcion2" type="radio"> Opcion 2
   <input title="opcion3" name="opciones" value="3" id="opcion3" type="radio" checked> Opcion 3
</p>
 

<p>
   <label for="checa">Verifica: </label>
   <input id="checa" type="checkbox" checked>
</p>
 

<p>
   <label for="seleccion">Selecciona (<b>select</b>): </label>
   <select id="seleccion">
      <optgroup label="FrontEnd">
         <option value="1">HTML</option>
         <option value="2">CSS</option>
         <option value="3" selected>JavaScript</option>
      </optgroup>
      <optgroup label="BackEnd">
         <option value="4">Java</option>
         <option value="5">Python</option>
         <option value="6">PHP</option>
      </optgroup>
      <optgroup label="Bases de Datos" disabled>
         <option>MySQL</option>
         <option>Mongo DB</option>
         <option>PostGresql</option>
      </optgroup>
   </select>
</p>
 

<p>
   <label for="DataList">Selecciona (<b>datalist</b>): </label>
   <input id="DataList" type="text" list="dataListClientes">
   <datalist id="dataListClientes">
      <option data-posicion="0" value="MySQL">
      <option data-posicion="1" value="Mongo DB">
      <option data-posicion="2" value="PostGresql">
   </datalist>
</p>

La diferencia entre select y datalist es que este último sólo sugiere los valores

Etiquetas para tiempo

 

<p>
   <label for="fecha">Selecciona fecha: </label>
   <input id="fecha" type="date" value="2022-05-10">
</p>
 

<p>
   <label for="fechaLocal">Selecciona fecha y hora: </label>
   <input id="fechaLocal" type="datetime-local" value="2022-05-26T19:30">
</p>
 

<p>
   <label for="hora">Selecciona hora: </label>
   <input id="hora" type="time" value="19:30">
</p>
 

<p>
   <p>
 

<p>
   <label for="semana">Selecciona semana: </label>
   <input id="semana" type="week" value="2022-W05">
</p>

Textarea

 

<p>
   <label for="textArea">Escribe algo: </label>
   <textarea id="textArea" rows="3" cols="50">contenido</textarea>
</p>

Botones

 

<p>
   <label for="boton1">Botón sólo de texto </label>
   <input id="boton1" type="button" value="Haz clic" onclick="alert('Hola gente!')">
</p>
 

<p>
   <label for="boton2">Con capacidades gráficas: </label>
   <button id="boton2" type="button" onclick="alert('Los saluda: Rita de la Torre')">
      <img src="./img/ok.png" alt="Ok image" />
   </button>
</p>

Ver todos lo referente a formularios y sus atributos así como los atributos de los campos de formulario

¿Cómo leer los valores de los controles en JavaScript?

Para preguntar si está marcado un checkbox se utiliza el atributo checked.
Supongamos que tenemos un control con id = "esAlergico"

Ejemplo:

<p>
  <label for="esAlergico">¿Sufre de alergia? </label>
  <input id="esAlergico" type="checkbox" checked>
</p>

En JavaScript, para leer si el control está seleccionado o no, se colocaría:

//1. Mapear el HTML
const ALERGICO = document.getElementById("esAlergico");

//2. Dentro de la función que revisa el valor del control
...
let tieneAlergias = ALERGICO.checked;


Todo el resto de controles verifican su valor con el atributo value

¡Código HTML en el portapapeles!
Ctrl-V para pegar el código en tu archivo.