Comunidad de diseño web y desarrollo en internet online

Formularios con labels, sin tablas

Foros de discusión > Javascript y jQuery

Citar            
MensajeEscrito el 12 Ago 2005 04:39 pm
y qué significa exactamente datos tabulados? Por ejemplo, este formulario sería correcto hacerlo con un table?



donde a cada elemento de la izquierda le corresponde un elemento de la derecha, ¿eso son datos tabulados? ya sé que se puede hacer con listas y css también, pero quisiera saber si el uso correcto de tables se cumple con esto. Saludos!

Por Smithy

159 de clabLevel



Genero:Masculino  

Envíale un mensaje privado    

firefox
Citar            
MensajeEscrito el 12 Ago 2005 05:38 pm
Honestamente, no estoy muy seguro, preguntale a Pedro en ese caso.

Pero yo sólo uso tablas para datos que sean necesarios, un formulario no siempre tiene la misma forma, y puedes hacerla variar con CSS.

Digamos, haces el formulario 1 sola ves, y probando 2 CSS distintos, puedes tener 2 diseños distintos (incluyendo posicion).

Mientras que con las tablas, no.

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Premio_Secretos Team Cristalab

Envíale un mensaje privado     Web

Front-end Developer en Washington, DC

firefox
Citar            
MensajeEscrito el 12 Ago 2005 05:47 pm
ah, ok neo, gracias. Bueno pues, invoquemos a pedro entonces:

pedro("cssquestion");

asi?

Por Smithy

159 de clabLevel



Genero:Masculino  

Envíale un mensaje privado    

firefox
Citar            
MensajeEscrito el 12 Ago 2005 06:13 pm
las tablas son sólo recomendadas para datos tabulados y nada más.
con css puedes hacer todo, claro, depende de qué tanta maña le tengas
checá esto y opiná http://jeffhowden.com/code/css/forms/

como dice neo, si después quieres cambiar el diseño, la tabla va a quedar igual, con css puedes hacerle cualquier cosa

un saludo

Por fael

BOFH

2443 de clabLevel

3 tutoriales
2 articulos

 

Envíale un mensaje privado     Web

firefox
Citar            
MensajeEscrito el 12 Ago 2005 06:30 pm
fael...
Yo trabajo los formularios con labels y a estos les aplico css...
¿¿¿¿es esto standar y accesible???

Salu2
Erik

Por eporroa

664 de clabLevel



Genero:Masculino  

Envíale un mensaje privado   Email   Web

Lima - Peru

firefox
Citar            
MensajeEscrito el 12 Ago 2005 08:53 pm
usar labels es la mejor forma de hacer un formulario accesible, y no utilizar tablas es la mejor forma de hacerlo estándar.

tal vez sería buena idea que lo mostraras
un saludo

Por fael

BOFH

2443 de clabLevel

3 tutoriales
2 articulos

 

Envíale un mensaje privado     Web

firefox
Citar            
MensajeEscrito el 12 Ago 2005 09:59 pm
Esto es un ejemplo de un formulario sencillo:

Código :

<h1>Contactenos</h1>
<div id="forcont">
   <form action="respuesta.php" method="post">
      <p>Mensaje cualquiera antes del formulario</p>
      <p><label for="fname">Nombre</label>
      <input type="text" id="fname" name="fname" size="25" maxlength="60" value="" /></p>
      <p><label for="lname">Apellido</label>
      <input type="text" id="lname" name="lname" size="25" maxlength="60" value="" /></p>      
      <p><label for="email">Email</label>
      <input type="text" id="email" name="email" size="25" maxlength="60" value="" /></p>
      <p><label for="message">Mensaje</label>
      <textarea id="message" name="message" cols="20" rows="3"></textarea></p>
      <input type="submit" name="contacto" value="Enviar Contacto" />
   </form>
</div>


Definitivamente, no necesitas una tabla para un formulario. Obviamente se pueden hacer más cosas, de hecho a este le quité todo el php.

Hay quienes usan tablas para formularios, pero como dijo fael, no es estándar.

Por Pedro

BOFH

3017 de clabLevel

3 tutoriales
6 articulos

  Bastard Operators From Hell

Envíale un mensaje privado     Web

Honduras

firefox
Citar            
MensajeEscrito el 12 Ago 2005 10:15 pm
Lo traje porque lo publicó en el tema equivocado:


Erik© escribió:

hola Fael... seria algo asi...

<style type="text/css">
<!--
#form label {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
display: block;
margin: 0.5em;
padding-right: 5%;
}
#form label input,select{
color: #FF0000;
background-color: #ECF0E3;
border: 1px dotted #333333;
height: 1.5em;
text-align: justify;
position: relative;

left: 2.5em;
}
-->
</style>



<form name="enter" id="form">
<label accesskey="a">Ingresa tu nombre
<input type="text" name="name" />
</label>
<label accesskey="b">Ingresa tu Password
<input type="text" name="pass" />
</label>
<label accesskey="c">¿A donde quieres ir?
<select name="select">
<option value="wm">WebMail</option>
<option value="cpan">Cpanel</option>
</select>
</label>
<input type="submit" name="Submit" value="Enviar" />
</form>


Bueno es una idea.... (super accesible..) aunque crei que poner tablas con formularios no iba a ser muy relevante (ya que se podria usar pocas celdas)... voy a dejar de lado de trabajar asi ya que tengo algun tiempo trabajando con css.. pero hay cosas que todavia no me salen...

Saludos...

Por Pedro

BOFH

3017 de clabLevel

3 tutoriales
6 articulos

  Bastard Operators From Hell

Envíale un mensaje privado     Web

Honduras

firefox
Citar            
MensajeEscrito el 12 Ago 2005 10:59 pm
Gracias Pedro...
ahora me sale una interrogante... hay alguna forma de tener a los inputs, selects y más alineado a la derecha?... y los labels a la izquierda?..como se alinearan normalmente con las tablas...

Aqui estaba haciendo uno..no se que tan bueno puede ser...

<style type="text/css">
<!--
#label{
float: left;
width: 150px;

text-align: left;
height: 80px;
}
#insel{
float: right;
width: 150px;
padding-left: 8px;
text-align: left;
height: 80px;
}
label {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
display: block;
margin: 0.5em;
padding-right: 5%;
}
#insel input,select{
color: #FF0000;
background-color: #ECF0E3;
border: 1px dotted #333333;
height: 12px;
text-align: center;
display: inline;
margin-top: 5px;
}
-->
</style>
</head>

<body>
<div style="width:310px; text-align:">
<form name="form1" id="form1" method="post" action="">
<div id="label">
<label accesskey="a">Ingresa tu nombre</label>
<label accesskey="b">Ingresa tu Password</label>
<label accesskey="c">¿A donde quieres ir?<select name="select">
<option value="wm">WebMail</option>
<option value="cpan">Cpanel</option>
</select></label>
</div>
<div id="insel">
<input type="text" name="textfield" />
<input type="text" name="textfield" />
</div>
<input type="submit" name="Submit" value="Enviar" />
</form>
</div>

Por eporroa

664 de clabLevel



Genero:Masculino  

Envíale un mensaje privado   Email   Web

Lima - Peru

firefox
Citar            
MensajeEscrito el 12 Ago 2005 11:12 pm

Erik© escribió:

...hay alguna forma de tener a los inputs, selects y más alineado a la derecha?... y los labels a la izquierda?..como se alinearan normalmente con las tablas......
Sí, sí se puede.

Por Pedro

BOFH

3017 de clabLevel

3 tutoriales
6 articulos

  Bastard Operators From Hell

Envíale un mensaje privado     Web

Honduras

firefox
Citar            
MensajeEscrito el 12 Ago 2005 11:34 pm
Que te parecio el que hice?... es válido?.. :D

Por eporroa

664 de clabLevel



Genero:Masculino  

Envíale un mensaje privado   Email   Web

Lima - Peru

firefox
Foros de discusión > Javascript y jQuery

   Página 1 de 1

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.