Foros del Web » Creando para Internet » Diseño web »

Abuso en el uso de los tag <div>

Estas en el tema de Abuso en el uso de los tag <div> en el foro de Diseño web en Foros del Web. Estoy empezando a sacarme el vicio de usar tablas para la estructura en las pagina, y temo abusar de los tags <div>. Por ejemplo, un ...
  #1 (permalink)  
Antiguo 15/12/2006, 14:09
 
Fecha de Ingreso: diciembre-2006
Mensajes: 28
Antigüedad: 11 años
Puntos: 0
Abuso en el uso de los tag <div>

Estoy empezando a sacarme el vicio de usar tablas para la estructura en las pagina, y temo abusar de los tags <div>. Por ejemplo, un formulario de contacto, el cual, una versión reducida de este, con una tabla lo haría de la siguiente forma:

<form method="POST" action="">
<table border="0" cellpadding="3">
<tr>
<td>Nombre y Apellido</td>
<td><input type="text" name="apellido" /></td>
</tr>
<tr>
<td>e-mail</td>
<td><input type="text" name="email" /></td>
</tr>
<tr>
<td>
Mensaje
</td>
</tr>
<tr>
<td colspan="2">
<textarea cols=40 rows=10></textarea>
</td>
</tr>
</table>
</form>

Quiero hacer algo similar sin tablas. La idea sería que los input´s me queden alineados como lo harían en la tabla, por lo tanto, una de las formas que se me ocurrio es:

<div>
<div style="padding: 4px 4px 4px 4px">
<div style="width: 150px; float: left;font-size: 15px; margin: 3px 0px 0px 5px">Nombre y Apellido</div>
<div><input type="text" name="apellido"></div>
</div>
<div style="padding: 4px 4px 4px 4px">
<div style="width: 150px; float: left;font-size: 15px; margin: 3px 0px 0px 5px">e-mail</div>
<div><input type="text" name="email"></div>
</div>
<div>
<div>Mensaje</div>
<div><textarea cols=40 rows=10></textarea></div>
</div>
</div>

Lo que me "procupa" es que utilizo muchos div´s para hacer que me quede con la misma estructura, o muy similar, que con el modelo en tablas.

Lo que quiero saber es:
* abuso de la cantidad de div´s que utilizo??
* Hay algún inconveniente con utilizar muchos div´s??
* Que límite hay en el uso de div´s para que no se torne ineficiente la página??
* Hay alguna forma más sencilla de hacer esto??
* Para el tema del formulario concretamente, leí algo sobre las etiquetas <fieldset><legend><label>, es convenientes usar estas??
  #2 (permalink)  
Antiguo 15/12/2006, 14:16
Avatar de K3NNY
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: ARGENTINA!
Mensajes: 1.493
Antigüedad: 13 años, 9 meses
Puntos: 20
Re: Abuso en el uso de los tag <div>

Deberías revisar en w3c.org las etiquetas usabas en los formularios, ya que existen muchas que deberías usar en vez de los divs. Por ejemplo...

Código HTML:
<div style="width: 150px; float: left;font-size: 15px; margin: 3px 0px 0px 5px">e-mail</div> 
...los "nombres" de los campos a completar (por eg: nombre, email, etc) tienen una etiqueta propia, llamada "<label>" si no me equivoco.

Otra cosa que te sugiero es que no pongas los estilos en el archivo ".html" sino que los pongas aparte en uno ".css".
__________________
delFuego.com.ar
mi tumblelog sobre diseño

La dedicación en mi respuesta es directamente proporcional a la dedicación en tu pregunta.
  #3 (permalink)  
Antiguo 15/12/2006, 15:22
Avatar de pablinff  
Fecha de Ingreso: diciembre-2005
Ubicación: Argentina
Mensajes: 383
Antigüedad: 12 años
Puntos: 7
Re: Abuso en el uso de los tag <div>

Para maquetar un formulario podrías hacer algo así, prestar especial atención al estilo "display:table" que es lo que logra que un formulario quede como si estuviese maquetado con tablas.
Código:
<div class="formulario" style="text-align: center;display: table;margin: auto;margin-bottom:10px">
<form action="sendmail.asp" method="post">  
<fieldset><legend class="legend">Formulario de Contacto</legend> 
  
<p class="formp"><label for="apnom" class="label">Apellido y Nombre</label>  
<input type="text" name="apnom" id="apnom" size="27" /> 
  <br>
<label for="email" class="label">E-Mail</label>  
<input type="text" name="email" id="email" size="27" /> 
  <br>
<label for="tel" class="label">Tel&eacute;fono/M&oacute;vil</label>  
<input type="text" name="tel" id="tel" size="27" />
<br>
<label for="prov" class="label">Ciudad/Provincia/Pa&iacute;s</label>  
<input type="text" name="prov" id="prov" size="27" />
<br>
<label for="area" class="label">Area de consulta</label>
<SELECT Name="area" id="area">  
   <OPTION VALUE="web">
   Dise&ntilde;o Web 
   <OPTION VALUE="sistemas">
   Desarrollo de Sistemas 
   <OPTION VALUE="general">
   General 
</SELECT>
<br>  
<label for="msg" class="label">Su Consulta</label>  
<textarea name="msg" id="msg" cols="30" rows="5"></textarea></p>  
  
<p class="formp"><input type="submit" name="enviar" id="enviar" value="Enviar" />
<input type="reset" name="reset" id="reset" value="Borrar" /></p>
</fieldset>  
</form>  
</div>
Saludos y espero que te sirva!
__________________
I'm gonna start a revolution from my bed...
  #4 (permalink)  
Antiguo 16/12/2006, 00:15
 
Fecha de Ingreso: diciembre-2006
Mensajes: 28
Antigüedad: 11 años
Puntos: 0
Re: Abuso en el uso de los tag <div>

Gracias por los consejos!!

Eso con respecto a los formularios, de por si muy bueno!!, y sobre el abuso de los div´s? hay algún problema? algún limite recomendable? que se podria considerar como "mal hecho" con un tag div?

Me intriga todo esto, ya que el uso del div lo veo fundamental al escribir el codigo de una web, y más con esto que no hay que usar tablas y si CSS. Pero quiero saber sobre sus límites, mal usos y desventajas.
  #5 (permalink)  
Antiguo 16/12/2006, 02:57
Avatar de pablinff  
Fecha de Ingreso: diciembre-2005
Ubicación: Argentina
Mensajes: 383
Antigüedad: 12 años
Puntos: 7
Re: Abuso en el uso de los tag <div>

La verdad es que no se si hay algún límite en ese aspecto, yo solo me limito a que la página a cargarse sea los más liviana posible, de manera que no tarde demasiado en cargarse, eso depende de vos hasta donde sacrificar velocidad por estética y viceversa.
Saludos!
__________________
I'm gonna start a revolution from my bed...
  #6 (permalink)  
Antiguo 16/12/2006, 09:45
 
Fecha de Ingreso: julio-2005
Mensajes: 127
Antigüedad: 12 años, 5 meses
Puntos: 0
Re: Abuso en el uso de los tag <div>

Debes usar los tag label (con su atributo opcional for) para identificar cada elemento del formulario.

Aca te dejo una página muy buena sobre como hacer formularios accesibles y bonitos (en inglés también)
  #7 (permalink)  
Antiguo 17/12/2006, 13:24
 
Fecha de Ingreso: octubre-2005
Mensajes: 419
Antigüedad: 12 años, 1 mes
Puntos: 0
Re: Abuso en el uso de los tag <div>

mira checa este articulo tal vez te pueda ayudar Formularios Semanticos
__________________
GraficasWeb.com / Diseño y Desarrollo Web en Mexico
info @ graficasweb.com E-mail / MSN
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:42.