Problem with form formatting

Asked

Viewed 44 times

0

Good morning guys, I have a certain problem in the newsletter form of my site.

I have done several researches trying to solve the problem, but the lack of knowledge of the area I think is making me impossible. rsrs

The form basically takes Name, Email and the send button.

By default comes one underneath the other and would like to convert it to one next to the other.

I managed to reach this point using float, but the fields are "glued" to each other and I would need to put a margin.

The code is as follows::

    <div class="campos" id="nome" style="float:left" style="margin:5px" style="width:200px"
     style="align:left">
  <p>
    <label>Nome</label>
    <input type="text" name="FNAME" placeholder="Digite seu nome."
    required="">
</p>
</div>

<div class="campos" id="email" style="float:left" style="margin:5px" style="width:200px"
     style="align:center">
 <p>
   <label>E-mail</label>
    <input type="email" name="EMAIL" placeholder="Digite seu e-mail"
    required="">
</p>
</div>

<div class="campos" id="inscrever" style="float:left" style="width:200px" style="align:right">
<p>
    <input type="submit" value="Inscrever">
</p>
</div>

The website address is: http://159.203.130.115/wesley/wordpress/

Could you help me give a "tidy"?

html css form input float

  • Already used margin and padding?

  • Good morning Wmomesso, yes, but no changes.

2 answers

0

You can add a margin-right (right bank) for the inputs (fields) of the form, as shown below:

#inscricao input {
    margin-right: 15px;
}
<div id="inscricao">

  <div class="campos" id="nome" style="float:left" style="margin:5px" style="width:200px"
       style="align:left">
    <p>
      <label>Nome</label>
      <input type="text" name="FNAME" placeholder="Digite seu nome."
      required="">
  </p>
  </div>

  <div class="campos" id="email" style="float:left" style="margin:5px" style="width:200px"
       style="align:center">
   <p>
     <label>E-mail</label>
      <input type="email" name="EMAIL" placeholder="Digite seu e-mail"
      required="">
  </p>
  </div>

  <div class="campos" id="inscrever" style="float:left" style="width:200px" style="align:right">
  <p>
      <input type="submit" value="Inscrever">
  </p>
  </div>

</div>

I put them all inside one div not to apply the margin to others inputs page, but only to inputs who are inside the div 'registration'.

  • Good morning Leandro, first of all thank you very much for the return. .

  • @Wrteletronics It may be that it is cached in the browser, so it did not show any changes. I suggest that after inserting the CSS I mentioned above, refresh the page through the shortcuts CTRL+R and CTRL+F5 so that the changes in CSS are loaded correctly.

  • Leandro, it worked by applying the modifications mentioned above by William. I believe I was missing the repeat of "Style" all the time, I suppose that’s what was affecting. The simple modification of : <div class="fields" id="email" style="float:left" style="width:200px" style="align:center style="margin-right:15px"> <div class="fields" id="email" style="float:left; margin: 20px;"> Solved the issue

0


Add this code in css:

.campos {
    margin: 5px;
}

which will solve your problem, try to insert in the div where the Submit button has a 

<label>&nbsp;</label>

this will solve the button alignment problem.

  • This label solved one of the problems, really aligned the button. Thank you.

  • CSS didn’t solve the other problem? you wanted the fields a little separate or in some other way?

  • Didn’t solve, just wanted to separate them a little.

  • You must be placing the CSS in a file that is not called on this page or it may be cached, do the following on the Divs where you have the field name, email and put <div class="fields" id="name" style="float:left; margin: 5px;"> do this with the 3 Divs (remember to keep their ids).

  • Magnificent! It’s come to just the point I needed. I’m very grateful to you. Thank you.

  • Imagine, I just ask you to signal the answer as useful, so it can be seen by other people with the same problem as you and help them.

Show 1 more comment

Browser other questions tagged html css form input float

You are not signed in. Login or sign up in order to post.