Nota: La mayoría de los formularios se controlan con Javascript.
<select>
Vamos a ver un ejm para ver como funcionan estas etiquetas.
Ejm
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Formulario</title> </head> <body> <h1>Formulario</h1> <select name="idioma" id="" required> <option value="">--Elige una opción--</option> <option value="en">Inglés</option> <option value="es" selected>Español</option> <option value="fr">Francés</option> </select> <input type="submit" /><input type="reset" /> </body> </html>
Radio botones
Los radio botones sirven para que de diferentes opciones sólo tengamos que seleccionar una. Veamos un ejm de su sintaxis.
Nota: muy importante, todas las opciones de este tipo de input tienen que tener el mismo nombre.
Ejm
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Formulario</title> </head> <body> <h1>Formulario</h1> <p>Elige tu lenguaje de programación favorito</p> <input type="radio" name="lenguaje" id="radio-js" value="js" /> <label for="radio-js">Javascript</label> <input type="radio" name="lenguaje" id="radio-py" value="py" /> <label for="radio-py">Python</label> <input type="radio" name="lenguaje" id="radio-php" value="php" /> <label for="radio-php">PHP</label> <input type="submit" /><input type="reset" /> </body> </html>
Nota: Al input radio que queremos que se cargue, le ponemos el atributo checked. Y si queremos que se envíe este tipo de input, le ponemos el atributo required a cualquiera de las opciones de que disponemos, no hay porque ponérselo a todas.
<checkbox>
Son los tipos de inputs en que se puede seleccionar más de una opción. Veamos un ejm para ver su sintaxis.
Ejm
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Formulario</title> </head> <body> <h1>Formulario</h1> <p>Elige tu lenguaje de programación favorito</p> <label> <input type="checkbox" name="intereses" value="Deportes" /> Deportes </label> <label> <input type="checkbox" name="intereses" value="Finanzas" /> Finanzas </label> <label> <input type="checkbox" name="intereses" value="Salud" checked /> Salud </label> <input type="submit" /><input type="reset" /> </body> </html>