Etiquetas HTML para elementos interactivos en formularios

Etiqueta input
En esta categoría se encuentran los cuadros de texto, radio button, checkbox,
imagenes, carga de archivos, etc. Se recomienda poner un texto para mostrarse
como etiqueta por cada input, esto se logra con la etiqueta <label>

<label for="nombre">Nombre</label>
1
<input type="text" id="nombre" name="nombre" placeholder="Escribe tu n
2
ombre" />
Etiqueta button
Son botones a los que se les pueden programar acciones, o utilizar los ya
existentes para enviar y resetear.
1 <button type="submit">Enviar</button>
Etiqueta textarea
Es un cuadro de texto multilinea
<label for="comments">Comentarios</label>
1
<textarea id="comments" name="comments" placeholder="Escribe tus com
2
entarios"></textarea>
Etiqueta select
Genera una lista desplegable, (o simplemente una lista) la cual lleva varios
elementos declarados con la etiqueta <option> y estos pueden estar agrupados
por medio de la etiqueta <optgroup>
1 <label for="">Selecciona una opción</label>
2 <select name="opciones" id="opciones">
3 <optgroup label="Grupo 1">
4 <option value="1">Opcion uno</option>
5 <option value="2">Opcion dos</option>
6 <option value="3">Opcion tres</option>
7 <option value="4">Opcion cuatro</option>
8 </optgroup>
9 <optgroup label="Grupo 2">
10 <option value="5">Opcion cinco</option>
11 <option value="6">Opcion seis</option>
12 </optgroup>
13 </select>
Etiqueta fieldset
Se utiliza para agrupar elementos relacionados en un formulario. Para dar un
nombre a este marco se utiliza la etiqueta <legend>
1 <fieldset>
2 <legend>Edad</legend>
3 <input type="checkbox" name="edad" id="edad20" value="20-39">
4 <label for="edad20">20-39</label>
 5
6 <input type="checkbox" name="edad" id="edad40" value="40-59">
7 <label for="edad40">40-59</label>
8
9 <input type="checkbox" name="edad" id="edad60" value="60-79">
10 <label for="edad60">60-79</label>
11 </fieldset>
Etiqueta output
Se utiliza para representar el resultado de un cálculo, lo cual aún se debe hacer
con un script, pero ya de entrada define de dónde vienen los datos.
1 <label for="base">Base</label>
2 <input type="number" id="base" value="0" min="0" max="30">
3
4 <label for="exponente">Exponente</label>
5 <input type="number" id="exponente" value="0" min="0" max="30">
6
7 <label for="">Resultado</label>
8 <output id="potencia" for="base exponente"></output>
9
10 <button type="button" onclick="mostrarPotencia()">Calcular</button>