Los formularios envían datos a través de los métodos POST y GET, por ello es necesario que los diversos elementos que contendrán los datos que serán enviados se encuentren dentro de las etiquetas FORM
Estructura básica
Todo formulario debe encontrarse entre las etiquetas Form, luego los diversos elementos pueden encontrarse como mejor deseemos, pero lo recomendable es seguir una serie de estándares como utilizar los Fieldset como contenedores de los diversos elementos que pueden ser etiquetas, cajas de texto, botones, etc.
Ejemplo en código:
<form>
<fieldset>
Ingrese su usuario:<br/>
<input type="text" /><br/>
Ingrese su clave:<br/>
<input type="password" /><br/><br/>
<input type="submit" value="Enviar"/>
</fieldset>
</form>
Resultado visual:
Títulos, textos, cajas de texto y botones básicos
Podemos colocar un título para cada Fieldset mediante la etiqueta Legend, textos de guía con la etiqueta Label y diversas cajas de texto con la etiqueta Input. Además, botones que pueden ser creados con la misma etiqueta Input o Button.
Ejemplo en código:
<form>
<fieldset>
<legend>Titulo</legend>
<label>Ingrese su usuario:</label><br/>
<input type="text" /><br/>
<label>Ingrese su clave:</label><br/>
<input type="password" /><br/><br/>
<button>ENVIAR</button>
</fieldset>
</form>
Resultado visual:
Diversos tipos de campos para ingresar información
Tenemos los diferentes tipos con sus respectivas propiedades
Texto normal
Ejemplo en código:
<form>
<fieldset>
<legend>INPUT</legend>
Texto normal: <br/>
<input type="text"/><br/>
Texto con valor: <br/>
<input type="text" value="valor"/><br/>
Texto solo de lectura: <br/>
<input type="text" value="no puedes cambiarme" readonly/><br/>
Texto con placeholder: <br/>
<input type="text" placeholder="Ingresa tu nombre"/><br/>
Texto requerido u obligatorio: <br/>
<input type="text" placeholder="Dale clic a enviar" required/><br/>
Texto multilíneas: <br/><textarea></textarea><br/>
<button type="submit">ENVIAR</button>
</fieldset>
</form>
Resultado visual:
Texto para contraseñas
Ejemplo en código:
<form>
<fieldset>
<legend>CONTRASEÑAS</legend>
Contraseña: <br/>
<input type="password" placeholder="Ingresa tu clave" required/><br/>
<button type="submit">ENVIAR</button>
</fieldset>
</form>
Resultado visual:
Calendario fecha y hora
Ejemplo en código:
<form>
<fieldset>
<legend>FECHAS Y HORAS</legend>
Fecha: <br/>
<input type="date"/><br/>
Hora: <br/>
<input type="time"/><br/>
</fieldset>
</form>
Resultado visual:
Carga de archivos
Ejemplo en código:
<form>
<fieldset>
<legend>ARCHIVOS</legend>
Cargar un archivo: <br/>
<input type="file" name="archivo"/><br/>
<button type="submit">ENVIAR</button>
</fieldset>
</form>
Resultado visual:
Numérico
Ejemplo en código:
<form>
<fieldset>
<legend>NÚMEROS</legend>
Números enteros:<br/>
<input type="number"/><br/>
Números con decimales:<br/>
<input type="number" min="-10" max="20" step="0.01"/><br/>
Números de tres en tres:<br/>
<input type="number" step="3"/><br/>
</fieldset>
</form>
Resultado visual:
Colores
Ejemplo en código:
<form>
<fieldset>
<legend>COLORES</legend>
Selecciona un color<br/>
<input type="color"/><br/>
</fieldset>
</form>
Resultado visual:
Barras deslizables
Ejemplo en código:
<form>
<fieldset>
<legend>BARRAS DESLIZABLES</legend>
Mueva las barras: <br/>
<input type="range"/><br/>
<input type="range" min="0" max="100" step="10"/><br/>
<input type="range" min="1" max="5" step="1"/><br/>
</fieldset>
</form>
Resultado visual:
Botones
Tenemos tres tipos:
Ejemplo en código:
<form>
<fieldset>
<input type="submit" value="Presioname"/><br/>
</fieldset>
</form>
Resultado visual:
Button type submit
Ejemplo en código:
<form>
<fieldset>
<button type="submit">Presioname</button>
</fieldset>
</form>
Resultado visual:
Input type reset
Ejemplo en código:
<form>
<fieldset>
<input type="text" value="Hola"/><br/>
<input type="date"/><br/>
<input type="reset"/><br/>
</fieldset>
</form>
Resultado visual:
CheckBox y RadioButton
Un checkbox permite seleccionar diversos elementos de una lista, mientras RadioButton elegir un elemento de una serie de valores
Ejemplo en código:
<form>
<fieldset>
<legend>Radio Button</legend>
<label>¿Qué comida que desagrada más?</label><br/><br/>
<input type="radio" name="comidaNo"><label>Escabeche</label><br/>
<input type="radio" name="comidaNo"><label>Arroz árabe</label><br/>
<input type="radio" name="comidaNo"><label>Cebiche</label><br/>
<input type="radio" name="comidaNo"><label>Tocosh</label><br/><br/>
<button type="submit">Elegir</button>
</fieldset>
<br/>
<fieldset>
<legend>CheckBox</legend>
<label>¿Qué comidas que te gustan?</label><br/><br/>
<input type="checkbox" name="comida"><label>Escabeche</label><br/>
<input type="checkbox" name="comida"><label>Arroz árabe</label><br/>
<input type="checkbox" name="comida"><label>Cebiche</label><br/>
<input type="checkbox" name="comida"><label>Tocosh</label><br/><br/>
<button type="submit">Elegir</button>
</fieldset>
</form>
Resultado visual:
Listas desplegables
Conocidas como los Combobox en lenguajes de programación como Visual, Java, etc. permiten desplegar una serie de valores y elegir uno de ellos, la ventaja de este frente al RadioButton es que se puede desplegar mucha más información sin usar demasiado espacio en la página.
Ejemplo en código:
<form>
<fieldset>
<legend>Seleccionar una ingeniería</legend>
<select><option>Ingeniería ambiental</option>
<option>Ingeniería eléctrica</option>
<option>Ingeniería informática</option>
<option>Ingeniería de minas</option>
<option>Ingeniería química</option>
<option selected="selected">Ingeniería de software</option>
</select>
</fieldset>
</form>
Resultado visual:
