Comunidad de diseño web y desarrollo en internet online

Organizar Formulario mediante Tablas?

Citar            
MensajeEscrito el 26 Dic 2006 12:05 pm
Estoy liado con una pagina que tiene una seccion de contacto y para variar queria que, en lugar de poner un enlace a un correo electronico, poner un formulario para enviar el correo directamente desde la web.

La cuestion es que para que me aparezcan distribuidos en la pagina como a mi me gusta he utilizado una tabla, pero no estoy seguro de que esto sea correcto asi que mi pregunta es si esta bien asi o si por el contrario deberia usar hojas de estilo? y de tener que usar hojas de estilo...como seria la forma mas correcta de situar las cajas, tendria que crear una clase o identificador para cada caja?

Por noctam

Claber

197 de clabLevel



 

firefox
Citar            
MensajeEscrito el 26 Dic 2006 01:24 pm
Hola
Efectivamente supones bien, no está bien maquetar el formulario con tablas.

Los formularios cuentan con varias formas de maquetar su contenido, los <label>, los <fieldset> entre otros te pueden ayudar a posicionar los elementos.

Puedes ver un ejemplo, ve estos que he hecho:
http://www.icad.com.ve/contacto/
http://www.icad.com.ve/registro/

Por Ramm

BOFH

3152 de clabLevel

6 tutoriales
8 articulos

Genero:Masculino   Bastard Operators From Hell REC Héroes

London, UK

firefox
Citar            
MensajeEscrito el 28 Dic 2006 04:01 am
Yo suelo usar listas de definición para los formularios.

Código :

<dl>
<dt> label </dt>
<dd> input </dd>
</dl>


Imagina que el label y el input son etiquetas xhtml bien estructuradas (la pereza de no escribir todo el código..

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Premio_Secretos Team Cristalab

Front-end Developer en Washington, DC

firefox
Citar            
MensajeEscrito el 28 Dic 2006 03:19 pm

Ramm escribió:


http://www.icad.com.ve/contacto/

viendo el codigo de la pagina(esta cute), vi esto:
<label for="nombre">Nombre: </label>

primera vez que veo ese atributo en una rapida busqueda encontre esto

for = idref [CS]
Este atributo asocia explícitamente el rótulo definido con otro control. Cuando está presente, el valor de este atributo debe ser el mismo que el valor del atributo id de algún otro control del mismo documento. Cuando no está presente, el rótulo definido se asocia con los contenidos del elemento.


pero aun no le entiendo la finalidad... U_U

Por Max

Claber

267 de clabLevel



Genero:Masculino  

Lima - Peru

firefox
Citar            
MensajeEscrito el 28 Dic 2006 04:26 pm

Max escribió:

pero aun no le entiendo la finalidad... U_U
sigh

Cuando haces click al label, le hace foco al input/textarea con la id del for del label.

Y también sirve para la SEMÁNTICA

Por Alan

470 de clabLevel

2 tutoriales

 

firefox
Citar            
MensajeEscrito el 29 Dic 2006 12:46 pm
lo cierto es que no estoy acostumbrado a utilizar las listas de definicion, podrias explicarte un poco mejor neo_pj ?

Por noctam

Claber

197 de clabLevel



 

firefox
Citar            
MensajeEscrito el 29 Dic 2006 04:16 pm
Yo prefiero usar las listas de definición, cuando tengo que hacer listas de definición, y las etiquetas de formulario, cuando tengo que hacer formularios.





*Para quien piense que es algo redundante, no es así, es verdad, no todos usan las tablas, para mostrar tablas(vease diseño con tablas), ni listas con la etiqueta listas(vease listas con <br>), ni la etiqueta div para crear divisiones, etc.

Por Dano

BOFH

4273 de clabLevel

14 tutoriales
4 articulos
10 ejemplos

Genero:Masculino   Bastard Operators From Hell Premio_Secretos

Lugar estratégico para vigilarte

firefox
Citar            
MensajeEscrito el 30 Dic 2006 06:07 pm
Y como maquetas el formulario dano? <p>, <div>, <span> ? Para mi es más fácil con un <dt> y un <dd>, aunque no parezca la semántica se mantiene.

Saludos.

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Premio_Secretos Team Cristalab

Front-end Developer en Washington, DC

firefox
Citar            
MensajeEscrito el 30 Dic 2006 06:46 pm
Utilizo unicamente las etiquetas de formulario: form, legend, label, input y fieldset. A esas aplico el css. La etiqueta padre de todas es <form>, ese <form> generalmente esta dentro de un div, mas no es mandatorio.

saludos ^^

Por Dano

BOFH

4273 de clabLevel

14 tutoriales
4 articulos
10 ejemplos

Genero:Masculino   Bastard Operators From Hell Premio_Secretos

Lugar estratégico para vigilarte

firefox
Citar            
MensajeEscrito el 30 Dic 2006 08:53 pm
algunos enlaces de utilidad:
http://jeffhowden.com/code/css/forms/
http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/
http://www.skyrocket.be/2006/01/09/semantic-horizontal-forms/

Por fael

BOFH

2443 de clabLevel

3 tutoriales
2 articulos

 

firefox
Citar            
MensajeEscrito el 02 Ene 2007 12:28 pm
En fin señores, aqui vuelvo de nuevo a retomar el tema

Despues de haber reformado el formulario y organizarlo mediante label y fieldset resulta que no consigo dejar centrados los campos,lo intente haciendo:

Código :

fieldset p {
margin: 0 auto;
}


pero no funciono, asi que elimine el parrafo del formulario, en que estoy fallando para no poderlos centrar?

a continuacion os dejo los enlaces al html y al css en cuestion:

http://noctam.ifastnet.com/contacto.html

http://noctam.ifastnet.com/css/contacto.css

Por noctam

Claber

197 de clabLevel



 

firefox
Citar            
MensajeEscrito el 03 Ene 2007 02:15 pm
Prueba con un

Código :

fieldset p {
text-align:center;
}

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Premio_Secretos Team Cristalab

Front-end Developer en Washington, DC

firefox
Citar            
MensajeEscrito el 03 Ene 2007 11:07 pm
Gracias NEO_JP eso ya lo probe y no me dio resultado, lo que me hace al poner eso es centrarme los label con los campos de texto, pero no me centra los campos de texto con el fieldset que es lo que busco. alguna otra solucion? yo estoy sin ideas

Por noctam

Claber

197 de clabLevel



 

firefox

 

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