Avatar of hidrau
Flag for Brazil asked on

What is the better way to create a form with fields and labels?

Hello guys

It is simple doubt but it is driving me crazy.

I need to create a form with some fields on it, I am using table but table doesn't give me a good align. My fields not always gets aligned.

I thank any help.


Avatar of undefined
Last Comment

8/22/2022 - Mon

For exemplo:

How to align these forms correctly:

<form action="" method="post" id="inscricao">

    <label>Nome:<input name="nome" type="text" id="nome" size="60"></label>
    <br />
    <label>Empresa:<input type="text" name="nome" size="20"/></label>
    <label>Função:<input type="text" name="nome" size="15"/></label>
    <br />
    <label>Endereço:<input type="text" name="nome" size="40"/></label>
    <label>N°:<input type="text" name="nome" size="3"/></label>
    <br />
    <label>Complemento:<input type="text" name="nome" size="25"/></label>
    <label>Bairro:<input type="text" name="nome" size="15"/></label>
    <br />
    <label>Cidade:<input type="text" name="nome" size="30"/></label>
    <label>Estado:<input type="text" name="nome" size="15"/></label>
    <br />
    <label>Tel. Fixo:<input type="text" name="nome" size="20"/></label>
    <label>Tel. Celular:<input type="text" name="nome" size="20"/></label>
    <br />
    <label>Email:<input type="text" name="nome" size="60"/></label>
    <br />
      <input name="button" type="reset"  id="b_limpar" value="Limpar" />
      <input name="button" type="submit" id="b_enviar" value="Enviar" />

Open in new window

Wouter Boevink

Putting the input inside the label is not valid in html.
I don't see any table?

I gave an example with labels and inputs.

Many say that the better way is doing with Css. I usually use table but it is not always perfectly aligned.

I'd like any example so that I could learn
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
Wouter Boevink

If you want to set the width for labels with a css class named 'editorlabel'
 #editorlabel { width: 200px } /* the width of the label */

<label class="editorlabel">Nome:</label><input name="nome" type="text" id="nome" size="60">

OR if you want to set the same width for all the labels

 label { width: 200px } /* the width of the label */

<label>Nome:</label><input name="nome" type="text" id="nome" size="60">

I recommend the first option


Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Coast Line

can you use tables

Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.