SlideShare una empresa de Scribd logo
1 de 12
ETIQUETAS HTML PARA FORMULARIOS
ERIK YAEL ROMERO TORRES
GRUPO: 404
 Los formularios son los elementos en los que se
integran los botones y las áreas de texto que se utilizan
para que los usuarios introduzcan sus datos o que
puedan elegir entre varias opciones.
 El principio y final de un formulario se define con las
etiquetas <form> y </form>. Dentro de las etiquetas de
apertura y cierre de form se pueden incluir diferentes
elementos que son enviados para ser procesados por el
servidor web.
ETIQUETA FUNCIÓN
<form> </form>
Etiqueta de apertura y cierre de un
formulario de una página web. El resto de
etiquetas de formulario deben ir siempre
recogidas entre estas etiquetas de apertura
y cierre de formulario.
<fieldset> </fieldset>
Permite organizar en grupos los
campos de un formulario.
<legend> </legend> Representa el título de un <fieldset>.
<label> </label>
Se usa para definir el nombre o título de un
control del formulario.
<input>
Crea un campo de introducción de datos
para el usuario. Es de las principales
etiquetas de un formulario.
<button> </button>
Etiqueta utilizada para representar un botón
en el formulario.
<option> </option>
Representa una opción en un elemento
<select> o <datalist>.
<select> </select>
Input que permite una selección entre un
conjunto de opciones.
ETIQUETA DESCRIPCIÓN
<optgroup> </optgroup>
Representa un conjunto de opciones,
agrupadas lógicamente.
<datalist> </datalist>
Representa un elemento de control que
permite la selección entre un conjunto de
opciones <option>.
<textarea> </textarea>
Representa un elemento de control de
edición de texto multilínea.
<output> </output> Representa el resultado de un cálculo.
<meter> </meter>
Se encarga de representar un valor escalar
dentro de un rango que sea conocido.
<color> </color>
Control para especificar un color. Una
interfaz de selección de color no requiere
más funcionalidad que la de aceptar colores
simples como texto (más información).
<date time> </date time>
Obsoleto control para introducir una fecha y
hora (horas, minutos, segundos y fracción
de segundo) , basado en la zona horaria
UTC. Esta característica ha sido removida
de WHATWG HTML.
<form>
<!--Etiqueta fieldset-->
<fieldset>
<!--Etiqueta legend-->
<legend>Datos personales</legend>
<!--Etiqueta label-->
<label>Nombre y apellidos: </label>
<!--Etiqueta input tipo texto-->
<input name='nombre' type='text'/><br>
<label>Sexo: </label>
<!--Etiqueta select-->
<select name="select">
<!--Etiqueta option-->
<option value="value1">Hombre</option>
<option value="value2" selected>Mujer</option>
</select><br><br>
EJEMPLO DE ETIQUETA CON CÓDIGO
<label>Edad: </label>
<!--Etiqueta input tipo checkbox-->
<input type='checkbox' name='edad' value='20-39' /> 20-39
<input type='checkbox' name='edad' value='40-59' /> 40-59
<input type='checkbox' name='edad' value='60-79' /> 60-79<br><br>
<label>Email: </label>
<!--Etiqueta input tipo email-->
<input name='nombre' type='email'/><br><br>
<label>Estudios: </label>
<!--Etiqueta select-->
<select id="dino-select">
<!--Etiqueta optgroup-->
<optgroup label="Estudios Universitarios">
<!--Etiqueta option-->
<option>Doctorado</option>
<option>Máster</option>
<option>Grado</option>
</optgroup>
<optgroup label="Ciclo Formativo">
<option>Grado Superior</option>
<option>Grado Medio</option>
</optgroup>
</select><br><br>
<label>Elige tu navegador favorito: </label>
<input list="browsers" name="myBrowser" />
<!--Etiqueta datalist-->
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">
<option value="Microsoft Edge">
</datalist><br><br>
<!--Etiqueta textarea-->
<textarea name="textarea" rows="10" cols="50">Escribe aquí tu mensaje</textarea>
</fieldset>
<input type="submit" value="Enviar" />
</form>
FORMULARIO
REFERENCIAS BIBLIOGRÁFICAS
 https://www.eniun.com/etiquetas-formularios-html5/
 https://www.mclibre.org/consultar/htmlcss/html/html-
formularios.html
 https://developer.mozilla.org/es/docs/Web/HTML/Element/fo
rm
 https://lenguajehtml.com/html/formularios/crear-un-
formulario/

Más contenido relacionado

Similar a ETIQUETAS FORM HTML.pptx nuevo

Formularios html
Formularios htmlFormularios html
Formularios html
BB
 
Frames y formularios en html
Frames y formularios en htmlFrames y formularios en html
Frames y formularios en html
bhylenia
 

Similar a ETIQUETAS FORM HTML.pptx nuevo (20)

Doc1
Doc1Doc1
Doc1
 
Formularios en html
Formularios en htmlFormularios en html
Formularios en html
 
Formularios html5
Formularios html5Formularios html5
Formularios html5
 
Curso php-my sql-clase-1
Curso php-my sql-clase-1Curso php-my sql-clase-1
Curso php-my sql-clase-1
 
Curso php-my sql-clase-1
Curso php-my sql-clase-1Curso php-my sql-clase-1
Curso php-my sql-clase-1
 
Formularios html
Formularios htmlFormularios html
Formularios html
 
Formularios
FormulariosFormularios
Formularios
 
Clase 1 Plataforma introducción a Diseño Web
Clase 1 Plataforma introducción a Diseño WebClase 1 Plataforma introducción a Diseño Web
Clase 1 Plataforma introducción a Diseño Web
 
Nicolás es guerra
Nicolás es guerraNicolás es guerra
Nicolás es guerra
 
Frames y formularios en html
Frames y formularios en htmlFrames y formularios en html
Frames y formularios en html
 
Elementos de formulario y atributos
Elementos de formulario y atributosElementos de formulario y atributos
Elementos de formulario y atributos
 
INTRODUCCIÓN A HTML – XHTML – Clase 03
INTRODUCCIÓN A HTML – XHTML – Clase 03INTRODUCCIÓN A HTML – XHTML – Clase 03
INTRODUCCIÓN A HTML – XHTML – Clase 03
 
Mapa conceptual info
Mapa conceptual infoMapa conceptual info
Mapa conceptual info
 
Formularios y Validaciones
Formularios y ValidacionesFormularios y Validaciones
Formularios y Validaciones
 
Taller Wordpress Nivel II
Taller Wordpress Nivel IITaller Wordpress Nivel II
Taller Wordpress Nivel II
 
Microsoft access
Microsoft accessMicrosoft access
Microsoft access
 
Microsoft access
Microsoft accessMicrosoft access
Microsoft access
 
Etiquetas de formularios
Etiquetas de formulariosEtiquetas de formularios
Etiquetas de formularios
 
Formularios
FormulariosFormularios
Formularios
 
Html
HtmlHtml
Html
 

Último

Lineamientos de la Escuela de la Confianza SJA Ccesa.pptx
Lineamientos de la Escuela de la Confianza  SJA  Ccesa.pptxLineamientos de la Escuela de la Confianza  SJA  Ccesa.pptx
Lineamientos de la Escuela de la Confianza SJA Ccesa.pptx
Demetrio Ccesa Rayme
 
Apunte clase teorica propiedades de la Madera.pdf
Apunte clase teorica propiedades de la Madera.pdfApunte clase teorica propiedades de la Madera.pdf
Apunte clase teorica propiedades de la Madera.pdf
Gonella
 
Estrategia Nacional de Refuerzo Escolar SJA Ccesa007.pdf
Estrategia Nacional de Refuerzo Escolar  SJA  Ccesa007.pdfEstrategia Nacional de Refuerzo Escolar  SJA  Ccesa007.pdf
Estrategia Nacional de Refuerzo Escolar SJA Ccesa007.pdf
Demetrio Ccesa Rayme
 
FICHA DE LA VIRGEN DE FÁTIMA.pdf educación religiosa primaria de menores
FICHA DE LA VIRGEN DE FÁTIMA.pdf educación religiosa primaria de menoresFICHA DE LA VIRGEN DE FÁTIMA.pdf educación religiosa primaria de menores
FICHA DE LA VIRGEN DE FÁTIMA.pdf educación religiosa primaria de menores
Santosprez2
 

Último (20)

04.UNIDAD DE APRENDIZAJE III CICLO-Cuidamos nuestro medioambiente (1).docx
04.UNIDAD DE APRENDIZAJE III CICLO-Cuidamos nuestro medioambiente (1).docx04.UNIDAD DE APRENDIZAJE III CICLO-Cuidamos nuestro medioambiente (1).docx
04.UNIDAD DE APRENDIZAJE III CICLO-Cuidamos nuestro medioambiente (1).docx
 
tema 6 2eso 2024. Ciencias Sociales. El final de la Edad Media en la Penínsul...
tema 6 2eso 2024. Ciencias Sociales. El final de la Edad Media en la Penínsul...tema 6 2eso 2024. Ciencias Sociales. El final de la Edad Media en la Penínsul...
tema 6 2eso 2024. Ciencias Sociales. El final de la Edad Media en la Penínsul...
 
TEMA EGIPTO.pdf. Presentación civilización
TEMA EGIPTO.pdf. Presentación civilizaciónTEMA EGIPTO.pdf. Presentación civilización
TEMA EGIPTO.pdf. Presentación civilización
 
Lineamientos de la Escuela de la Confianza SJA Ccesa.pptx
Lineamientos de la Escuela de la Confianza  SJA  Ccesa.pptxLineamientos de la Escuela de la Confianza  SJA  Ccesa.pptx
Lineamientos de la Escuela de la Confianza SJA Ccesa.pptx
 
4. MATERIALES QUE SE EMPLEAN EN LAS ESTRUCTURAS.pptx
4. MATERIALES QUE SE EMPLEAN EN LAS ESTRUCTURAS.pptx4. MATERIALES QUE SE EMPLEAN EN LAS ESTRUCTURAS.pptx
4. MATERIALES QUE SE EMPLEAN EN LAS ESTRUCTURAS.pptx
 
Sesión de clase Motivados por la esperanza.pdf
Sesión de clase Motivados por la esperanza.pdfSesión de clase Motivados por la esperanza.pdf
Sesión de clase Motivados por la esperanza.pdf
 
EL CARDENALITO Lengua y Literatura de 6 grado
EL CARDENALITO Lengua y Literatura de 6 gradoEL CARDENALITO Lengua y Literatura de 6 grado
EL CARDENALITO Lengua y Literatura de 6 grado
 
DISEÑO DE ESTRATEGIAS EN MOMENTOS DE INCERTIDUMBRE.pdf
DISEÑO DE ESTRATEGIAS EN MOMENTOS DE INCERTIDUMBRE.pdfDISEÑO DE ESTRATEGIAS EN MOMENTOS DE INCERTIDUMBRE.pdf
DISEÑO DE ESTRATEGIAS EN MOMENTOS DE INCERTIDUMBRE.pdf
 
¿Que es Fuerza? online 2024 Repaso CRECE.pptx
¿Que es Fuerza? online 2024 Repaso CRECE.pptx¿Que es Fuerza? online 2024 Repaso CRECE.pptx
¿Que es Fuerza? online 2024 Repaso CRECE.pptx
 
Apunte clase teorica propiedades de la Madera.pdf
Apunte clase teorica propiedades de la Madera.pdfApunte clase teorica propiedades de la Madera.pdf
Apunte clase teorica propiedades de la Madera.pdf
 
ACERTIJO SOPA DE LETRAS OLÍMPICA. Por JAVIER SOLIS NOYOLA
ACERTIJO SOPA DE LETRAS OLÍMPICA. Por JAVIER SOLIS NOYOLAACERTIJO SOPA DE LETRAS OLÍMPICA. Por JAVIER SOLIS NOYOLA
ACERTIJO SOPA DE LETRAS OLÍMPICA. Por JAVIER SOLIS NOYOLA
 
ACERTIJO CÁLCULOS MATEMÁGICOS EN LA CARRERA OLÍMPICA. Por JAVIER SOLIS NOYOLA
ACERTIJO CÁLCULOS MATEMÁGICOS EN LA CARRERA OLÍMPICA. Por JAVIER SOLIS NOYOLAACERTIJO CÁLCULOS MATEMÁGICOS EN LA CARRERA OLÍMPICA. Por JAVIER SOLIS NOYOLA
ACERTIJO CÁLCULOS MATEMÁGICOS EN LA CARRERA OLÍMPICA. Por JAVIER SOLIS NOYOLA
 
Diapositivas unidad de trabajo 7 sobre Coloración temporal y semipermanente
Diapositivas unidad de trabajo 7 sobre Coloración temporal y semipermanenteDiapositivas unidad de trabajo 7 sobre Coloración temporal y semipermanente
Diapositivas unidad de trabajo 7 sobre Coloración temporal y semipermanente
 
Realitat o fake news? – Què causa el canvi climàtic? - Modificacions dels pat...
Realitat o fake news? – Què causa el canvi climàtic? - Modificacions dels pat...Realitat o fake news? – Què causa el canvi climàtic? - Modificacions dels pat...
Realitat o fake news? – Què causa el canvi climàtic? - Modificacions dels pat...
 
En un aposento alto himno _letra y acordes.pdf
En un aposento alto himno _letra y acordes.pdfEn un aposento alto himno _letra y acordes.pdf
En un aposento alto himno _letra y acordes.pdf
 
flujo de materia y energía ecosistemas.
flujo de materia y  energía ecosistemas.flujo de materia y  energía ecosistemas.
flujo de materia y energía ecosistemas.
 
Estudios Sociales libro 8vo grado Básico
Estudios Sociales libro 8vo grado BásicoEstudios Sociales libro 8vo grado Básico
Estudios Sociales libro 8vo grado Básico
 
Estrategia Nacional de Refuerzo Escolar SJA Ccesa007.pdf
Estrategia Nacional de Refuerzo Escolar  SJA  Ccesa007.pdfEstrategia Nacional de Refuerzo Escolar  SJA  Ccesa007.pdf
Estrategia Nacional de Refuerzo Escolar SJA Ccesa007.pdf
 
cuadernillo_cuentos_de_los_valores_elprofe20 (1).docx
cuadernillo_cuentos_de_los_valores_elprofe20 (1).docxcuadernillo_cuentos_de_los_valores_elprofe20 (1).docx
cuadernillo_cuentos_de_los_valores_elprofe20 (1).docx
 
FICHA DE LA VIRGEN DE FÁTIMA.pdf educación religiosa primaria de menores
FICHA DE LA VIRGEN DE FÁTIMA.pdf educación religiosa primaria de menoresFICHA DE LA VIRGEN DE FÁTIMA.pdf educación religiosa primaria de menores
FICHA DE LA VIRGEN DE FÁTIMA.pdf educación religiosa primaria de menores
 

ETIQUETAS FORM HTML.pptx nuevo

  • 1. ETIQUETAS HTML PARA FORMULARIOS ERIK YAEL ROMERO TORRES GRUPO: 404
  • 2.  Los formularios son los elementos en los que se integran los botones y las áreas de texto que se utilizan para que los usuarios introduzcan sus datos o que puedan elegir entre varias opciones.  El principio y final de un formulario se define con las etiquetas <form> y </form>. Dentro de las etiquetas de apertura y cierre de form se pueden incluir diferentes elementos que son enviados para ser procesados por el servidor web.
  • 3.
  • 4. ETIQUETA FUNCIÓN <form> </form> Etiqueta de apertura y cierre de un formulario de una página web. El resto de etiquetas de formulario deben ir siempre recogidas entre estas etiquetas de apertura y cierre de formulario. <fieldset> </fieldset> Permite organizar en grupos los campos de un formulario. <legend> </legend> Representa el título de un <fieldset>. <label> </label> Se usa para definir el nombre o título de un control del formulario. <input> Crea un campo de introducción de datos para el usuario. Es de las principales etiquetas de un formulario. <button> </button> Etiqueta utilizada para representar un botón en el formulario. <option> </option> Representa una opción en un elemento <select> o <datalist>. <select> </select> Input que permite una selección entre un conjunto de opciones.
  • 5. ETIQUETA DESCRIPCIÓN <optgroup> </optgroup> Representa un conjunto de opciones, agrupadas lógicamente. <datalist> </datalist> Representa un elemento de control que permite la selección entre un conjunto de opciones <option>. <textarea> </textarea> Representa un elemento de control de edición de texto multilínea. <output> </output> Representa el resultado de un cálculo. <meter> </meter> Se encarga de representar un valor escalar dentro de un rango que sea conocido. <color> </color> Control para especificar un color. Una interfaz de selección de color no requiere más funcionalidad que la de aceptar colores simples como texto (más información). <date time> </date time> Obsoleto control para introducir una fecha y hora (horas, minutos, segundos y fracción de segundo) , basado en la zona horaria UTC. Esta característica ha sido removida de WHATWG HTML.
  • 6. <form> <!--Etiqueta fieldset--> <fieldset> <!--Etiqueta legend--> <legend>Datos personales</legend> <!--Etiqueta label--> <label>Nombre y apellidos: </label> <!--Etiqueta input tipo texto--> <input name='nombre' type='text'/><br> <label>Sexo: </label> <!--Etiqueta select--> <select name="select"> <!--Etiqueta option--> <option value="value1">Hombre</option> <option value="value2" selected>Mujer</option> </select><br><br> EJEMPLO DE ETIQUETA CON CÓDIGO
  • 7. <label>Edad: </label> <!--Etiqueta input tipo checkbox--> <input type='checkbox' name='edad' value='20-39' /> 20-39 <input type='checkbox' name='edad' value='40-59' /> 40-59 <input type='checkbox' name='edad' value='60-79' /> 60-79<br><br> <label>Email: </label> <!--Etiqueta input tipo email--> <input name='nombre' type='email'/><br><br> <label>Estudios: </label> <!--Etiqueta select--> <select id="dino-select"> <!--Etiqueta optgroup--> <optgroup label="Estudios Universitarios"> <!--Etiqueta option--> <option>Doctorado</option> <option>Máster</option> <option>Grado</option> </optgroup> <optgroup label="Ciclo Formativo"> <option>Grado Superior</option> <option>Grado Medio</option> </optgroup> </select><br><br>
  • 8. <label>Elige tu navegador favorito: </label> <input list="browsers" name="myBrowser" /> <!--Etiqueta datalist--> <datalist id="browsers"> <option value="Chrome"> <option value="Firefox"> <option value="Internet Explorer"> <option value="Opera"> <option value="Safari"> <option value="Microsoft Edge"> </datalist><br><br> <!--Etiqueta textarea--> <textarea name="textarea" rows="10" cols="50">Escribe aquí tu mensaje</textarea> </fieldset> <input type="submit" value="Enviar" /> </form>
  • 9.
  • 11.
  • 12. REFERENCIAS BIBLIOGRÁFICAS  https://www.eniun.com/etiquetas-formularios-html5/  https://www.mclibre.org/consultar/htmlcss/html/html- formularios.html  https://developer.mozilla.org/es/docs/Web/HTML/Element/fo rm  https://lenguajehtml.com/html/formularios/crear-un- formulario/