Form formatting problem

Navigation
0

Good morning, I have a problem with the newsletter form of my site.

I've done several searches 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 submit button.

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

I managed to get to that point using float, but the fields are "pasted" into 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 site address is: link

Could you help me make a "tidy"?

    
asked by anonymous 13.11.2017 / 12:57

2 answers

0

Add this code in css: 

.campos {
    margin: 5px;
}

that will solve your problem, try inserting in the div where you have the submit button 

<label>&nbsp;</label>

This will solve the button alignment problem.

    
13.11.2017 / 13:08
0

You can add margin-right (right margin) to 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 all within div to not apply margin to other inputs of page, but only to inputs that are within div 'inscription'.

    
13.11.2017 / 13:04
Convert java.util.date to java.sql.Date Make Global Selection in the Application