« anterior próximo »
Páginas: [1]

Autor Tema: HTML ejemplo uso formulario para qué sirven etiquetas label y for CU00720B  (Leído 2531 veces)

Jack_F

  • Visitante
HTML ejemplo uso formulario para qué sirven etiquetas label y for CU00720B
« en: 02 de Diciembre 2016, 23:10 »
Aquí esta el ejercicio CU00720B del tutorial de programación web para principiantes.

Código: [Seleccionar]
<!DOCTYPE html>
<html>
        <head>
        <meta charset="utf-8" />
<title>Ejemplo del uso de formularios - aprenderaprogramar.com</title>
</head>
<body>
        <h1>Inscripción al congreso de Medicina Santiago 2048</h1>

<!--Médicos especialistas-->

<h2>Congreso para médicos especialistas</h2>
<form action="https://www.aprenderaprogramar.com" method="get">
        <label for="nombre">Nombre: </label>
<input type="text" name="nombre" id="nombre">
<label for="apellido">Apellido: </label>
<input type="text" name="apellido" id="apellido">
<br/><br/>
<label for="especialidad">Especialidad: </label>
<input type="text" name="especialidad" id="especialidad">
<br/><br/>
<label for="onio_esp">Año de obtención de especialidad: </label>
<input type="text" name="onio_esp" id="onio_es">
<br/><br/>
<input type="submit" value="Eviar">
<input type="reset" value="Borrar">
</form>
<br/>
<hr style="height:8px; color: red;background-color: red;" />

  <!-- Médicos generalistas-->
 
<h2>Inscripción al congreso para médicos generalistas</h2>
<form action="https://www.aprenderaprogramar.com" method="get">
         <label for="nombre">Nombre: </label>
<input type="text" name="nombre_gen" id="nombre_gen">
<label for="apellido">Apellido: </label>
<input type="text" name="apellido_arg" id="apellido_arg">
<br/><br/>
<label for="centro_med_med">Centro de médico donde ejerce: </label>
<input type="text" name="centro_med" id="centro_med">
<label for="onio_gen">Año de obtención de título: </label>
<input type="text" name="onio_gen" id="onio_gen">
<br/><br/>
<input type="submit" value="Enviar">
<input type="reset" value="Borrar">

</form>


</body>
</html>
« Última modificación: 18 de Diciembre 2016, 12:18 por Alex Rodríguez »
En línea

Chompy129

  • Intermedio
  • ***
  • Mensajes: 130
  • Programar es divertido. :)
    • Ver Perfil
Re:HTML. ejemplo de uso de formulario. CU00720B.
« Respuesta #1 en: 03 de Diciembre 2016, 19:44 »
Hola, en el ejercicio esta todo bien excepto en tu uso con las etiquetas <label> en los formularios:

Código: [Seleccionar]
<h2>Congreso para médicos especialistas</h2>
<form action="https://www.aprenderaprogramar.com" method="get">
        <label for="nombre">Nombre: </label>
<input type="text" name="nombre" id="nombre">
<label for="apellido">Apellido: </label>
<input type="text" name="apellido" id="apellido">
<br/><br/>
<label for="especialidad">Especialidad: </label>
<input type="text" name="especialidad" id="especialidad">
<br/><br/>
<label for="onio_esp">Año de obtención de especialidad: </label>
<input type="text" name="onio_esp" id="onio_es">
<br/><br/>
<input type="submit" value="Eviar">
<input type="reset" value="Borrar">
</form>En el campo "Año de obtención de especialidad:" dice que esta destinado a "onio_esp" en vez de ser "onio_es" que es lo que indica la id que colocaste.

Código: [Seleccionar]
<h2>Inscripción al congreso para médicos generalistas</h2>
<form action="https://www.aprenderaprogramar.com" method="get">
        <label for="nombre">Nombre: </label>
<input type="text" name="nombre_gen" id="nombre_gen">
<label for="apellido">Apellido: </label>
<input type="text" name="apellido_arg" id="apellido_arg">
<br/><br/>
<label for="centro_med_med">Centro de médico donde ejerce: </label>
<input type="text" name="centro_med" id="centro_med">
<label for="onio_gen">Año de obtención de título: </label>
<input type="text" name="onio_gen" id="onio_gen">
<br/><br/>
<input type="submit" value="Enviar">
<input type="reset" value="Borrar">
</form>En el primero indicas <label for="nombre">, es decir, esta destinado a un campo cuya id es "nombre" en lugar de colocar nombre_gen.

Lo mismo pasa en el segundo que en vez de ser for="apellido_arg" dice solo "apellido"

Y en el tercero que en ves de ser for="centro_med" colocaste "centro_med_med"

CONCLUSION

Recuerda que label usa el atributo for para indicar que esta destinado a un campo o control a través de su id, ejemplo: si le vas a incluir un label a un input debes hacerlo de la siguiente manera:

Código: [Seleccionar]
<label for="marca">Marca del auto: </label><input type="checkbox" name="marcaDeAuto" id="marca">
Como ves en el codigo, Input es un campo con id="marca" y label lleva como atributo for="marca".

Puedes comprobar mejor esto al clickear sobre el label, notaras que al hacerlo se activara el control, cuando un label lleva un atributo for diferente a la id de un input, este efecto no sucederá.
En línea

Jack_F

  • Visitante
Re:HTML. ejemplo de uso de formulario. CU00720B.
« Respuesta #2 en: 04 de Diciembre 2016, 06:50 »
Hay meti la pata. Y gracias, Chompy129 por la ayuda. Pero puedo poner un, checkbox , combox o radio en <input type=. Entonces sería algo así.
Código: [Seleccionar]
<!DOCTYPE html>
<html>
        <head>
        <meta charset="utf-8" />
<title>Ejemplo del uso de formularios - aprenderaprogramar.com</title>
</head>
<body>
        <h1 style="text-aling:center; font-size; color:blue;">Inscripción al congreso de Medicina Santiago 2048</h1>

<!--Médicos especialistas-->

<h2>Congreso para médicos especialistas</h2>
<form action="https://www.aprenderaprogramar.com" method="get">
        <label for="nombre">Nombre: </label><input type="text" name="nombre" id="nombre">
<label for="apellido">Apellido: </label><input type="text" name="apellido" id="apellido">
<br/><br/>
<label for="especialidad">Especialidad: </label><input type="text" name="especialidad" id="especialidad">
<label for="onio_esp">Año de obtención de especialidad: </label><input type="text" name="onio_esp" id="onio_esp">
<br/><br/>
<input type="submit" value="Eviar">
<input type="reset" value="Borrar">
</form>
<br/>
<hr style="height:8px; color: red;background-color: red;" />

  <!-- Médicos generalistas-->
 
<h2>Inscripción al congreso para médicos generalistas</h2>
<form action="https://www.aprenderaprogramar.com" method="get">
         <label for="nombre">Nombre: </label><input type="text" name="nombre_" id="nombre">
<label for="apellido">Apellido: </label><input type="text" name="apellido" id="apellido">
<br/><br/>
<label for="centro_med">Centro de médico donde ejerce: </label><input type="text" name="centro_med" id="centro_med">
<label for="onio_gen">Año de obtención de título: </label><input type="text" name="onio_gen" id="onio_gen">
<br/><br/>
<input type="submit" value="Enviar">
<input type="reset" value="Borrar">

</form>


</body>
</html>Corregí los errores que me señalaste ahora creo que esta bién. Gracias por la ayuda.
En línea

Chompy129

  • Intermedio
  • ***
  • Mensajes: 130
  • Programar es divertido. :)
    • Ver Perfil
Re:HTML. ejemplo de uso de formulario. CU00720B.
« Respuesta #3 en: 05 de Diciembre 2016, 04:00 »
Hola Jorgito Pucheta.  :)

<input type= puede contener varios valores para definir su función, entre estos estan "text", "checkbox", "radio", etc (no existe combobox, en lugar de eso se utiliza una etiqueta). Esto lo entenderás mejor a lo largo del curso, aunque tambien podrias investigar en internet.

En cuanto al nuevo código que dejaste, debes tener en cuenta que id y name deben tener valores únicos, es decir, en ambos formularios no se pueden repetir. Como consecuencia, al buscar a una etiqueta por su id, HTML toma al primero que encuentra y no al que tratas de usar.

Sin embargo, todo lo demás es correcto, te envio un saludo. ;D
En línea

Jack_F

  • Visitante
Re:HTML. ejemplo de uso de formulario. CU00720B.
« Respuesta #4 en: 06 de Diciembre 2016, 01:56 »
Gracias, Chompy129 por la explicación del uso de el atributo: name y id. Ahora entendí un poquito mejor.
Saludos. :D
En línea
Páginas: [1]
« anterior próximo »
 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".