Formularios HTML y HTML5


Aprende los Formularios HTML / HTML5 y mucho más en nuestro Curso:

Los Formularios o Campos HTML / HTML5, se utilizan para pedir, introducir o mostrar información dependiendo el tipo de Campo.
Unas de las principales cosas que se deben de comprender son:
 -> Estructura de un Formulario
 -> Campos de Texto
 -> Botones
 -> Campos de Selección
 -> Áreas de Texto
 -> Campos de Email
 -> Campos de Números
 -> Campos de Fechas
 -> Campos de Tiempo
 -> Campos de Rango
 -> Campos de Color
 -> Validaciones
 -> Y otros componentes y atributos de los mismos.


La Estructura de un Formulario es utilizando la etiqueta <form> ... </form> y entre la misma definir los tipos de campos.
<!--  Este es un Comentario  -->
<!DOCTYPE html>
<html>
<head>
    <title> Titulo del Documento </title>
<head>
<body>
    <!--  Cuerpo del Documento  -->
    <form>
        <input> ... </input>
        .
        .
        <input> ... </input>
    </form>
</body>
</html>

Los Campos de Texto es agregando el type igual a text, como a continuación se muestra.
<input type="text"></input>
Como Resultado es:




Los Botones es agregando el type igual a submit, y una propiedad value donde se agrega lo que se quiere mostrar como leyenda en el mismo boton, como a continuación se muestra.
<input type="submit" value="Aceptar"></input>
Como Resultado es:




Los Campos de Selección es agregando elementos select, en los cuales se le agregan elementos option, como a continuación se muestra.
<select name="seleccion">
  <option value="">- Elige una Opción -</option>
  <option value="">- Opción 1 -</option>
  <option value="">- Opción 2 -</option>
  <option value="">- Opción 3 -</option>
</select>
Como Resultado es:



Las Áreas de Texto es agregando elementos textarea, como a continuación se muestra.
<textarea></textarea>
Como Resultado es:


Los Campos de Email es agregando un elemento input con type igual a email, como a continuación se muestra.
<input type="email"></input>
Como Resultado es:



Los Campos de Números es agregando un elemento input con type igual a number, como a continuación se muestra.
<input type="number"></input>
Como Resultado es:



Los Campos de Fechas es agregando un elemento input con type igual a date, como a continuación se muestra.
<input type="date"></input>
Como Resultado es:



Los Campos de Tiempo es agregando un elemento input con type igual a time, como a continuación se muestra.
<input type="time"></input>
Como Resultado es:



Los Campos de Rango es agregando un elemento input con type igual a range, como a continuación se muestra.
<input type="range"></input>
Como Resultado es:



Los Campos de Color es agregando un elemento input con type igual a color, como a continuación se muestra.
<input type="color"></input>
Como Resultado es:




Ve todos los temas en VideoTutoriales para aprender los Formularios HTML / HTML5 y mucho más en nuestro Curso:


No hay comentarios

No hay comentarios :

Publicar un comentario