CODEWITHSUNDEEP
htmlcssforms
user6889472
user6889472

Reputation:

Form Input element sizing

I want to make a two column layout form. but I am getting a problem i.e input elements of form are not equally divided in size(width) and also responsive. I want it to be responsive and also equally width with gap between them.

Attached Code Below

@import url('https://fonts.googleapis.com/css?family=Montserrat');

h2 {
  font-family: Montserrat;
  font-size: 3em;
  line-height:50px;;
}
form {
  width:70%;
  margin: 10% auto;
}
input[type="text"]{
  display: block;
  height: 30px;
  width: 47%;
  float:left;
}
form > input:nth-child(3){
  margin-left: 31px;
  margin-right:0;
}
textarea {
  width:100%;
  box-sizing: border-box;
  margin: 30px 0;
}
input[placeholder="Name"],input[placeholder="E-mail"]{
  padding: 10px;
  letter-spacing: 5px;
  font-family: Montserrat;
}
textarea[placeholder="Message"]{
  letter-spacing:5px;
  padding: 10px;
  font-family: Montserrat;
}
/*
input , textarea {
  border-width: 0 0 2px 0;
  border-color: #000;
}*/
form input,textarea:focus {
  outline:none;
}
<section id="contact-page">
  
  <form>
  <h2>Contact Us</h2>
  <input type="text" placeholder="Name">
   
  <input type="text" placeholder="E-mail">
   
  <textarea name="message" placeholder="Message" rows="6"></textarea>
    
  </form>
</section>

Upvotes: 0

Views: 82

Answers (6)

Satyam Pathak
Satyam Pathak

Reputation: 6912

Well ! i tried to figure out your problem and just gave a try to make it responsive.

Max-width and Max-height

The max-width property is used to set the maximum width of an element.

The max-width can be specified in length values, like px, cm, etc., or in percent (%) of the containing block, or set to none (this is default. Means that there is no maximum width).

Using max-width instead, in this situation, will improve the browser's handling of small windows. similarly for height

You can remove margin: 0 auto; if you want don't want your content centred

@import url('https://fonts.googleapis.com/css?family=Montserrat');
h2 {
  white-space: auto;
  font-family: Montserrat;
  font-size: 3em;
  line-height: 50px;
  ;
}

form {
  width: 70%;
  margin: 0 auto;
}

input[type="text"] {
  max-height: 30px;
  max-width: 47%;
}

textarea {
  max-width: 100%;
  box-sizing: border-box;
  margin: 10px 0;
}

input[placeholder="Name"],
input[placeholder="E-mail"] {
  padding: 10px;
  letter-spacing: 5px;
  font-family: Montserrat;
  margin-bottom: 10px;
}

textarea[placeholder="Message"] {
  letter-spacing: 5px;
  padding: 10px;
  font-family: Montserrat;
}


/*
input , textarea {
  border-width: 0 0 2px 0;
  border-color: #000;
}*/

form input,
textarea:focus {
  outline: none;
}
<section id="contact-page">

  <form>
    <h2>Contact Us</h2>
    <input type="text" placeholder="Name">

    <input type="text" placeholder="E-mail">

    <textarea name="message" placeholder="Message" rows="6"></textarea>

  </form>
</section>

Upvotes: 0

Farzin Kanzi
Farzin Kanzi

Reputation: 3435

Remove float for inputs and add a wrapper div as below

h2 {
  font-family: Montserrat;
  font-size: 3em;
  line-height:50px;;
}
form {
  width:70%;
  margin: 10% auto;
}
#email{
  display: block;
  height: 30px;
  width: 30%;
  float:left;
  margin:0;
  margin-left:2%;
}
#name{
  display: block;
  height: 30px;
  width: 30%;
 
}
form > input:nth-child(3){
  margin-left: 31px;
  margin-right:0;
}
textarea {
  width:100%;
  box-sizing: border-box;
  margin: 30px 0;
}
input[placeholder="Name"],input[placeholder="E-mail"]{
  padding: 10px;
  letter-spacing: 5px;
  font-family: Montserrat;
}
textarea[placeholder="Message"]{
  letter-spacing:5px;
  padding: 10px;
  font-family: Montserrat;
}
/*
input , textarea {
  border-width: 0 0 2px 0;
  border-color: #000;
}*/
form input,textarea:focus {
  outline:none;
}
<section>
<form>
 <h2>Contact Us</h2>
<div style="display: flex; justify-content: space-between;">
  <input type="text" placeholder="Name">

  <input type="text" placeholder="E-mail">
</div>
<textarea name="message" placeholder="Message" rows="6"></textarea>

</form>
</section>

Upvotes: 0

Maulik
Maulik

Reputation: 785

Example :

h2 {
  font-family: Montserrat;
  font-size: 3em;
  line-height:50px;;
}
form {
  width:70%;
  margin: 10% auto;
}
#email{
  display: block;
  height: 30px;
  width: 30%;
  float:left;
  margin:0;
  margin-left:2%;
}
#name{
  display: block;
  height: 30px;
  width: 30%;
  float:left;
}
form > input:nth-child(3){
  margin-left: 31px;
  margin-right:0;
}
textarea {
  width:100%;
  box-sizing: border-box;
  margin: 30px 0;
}
input[placeholder="Name"],input[placeholder="E-mail"]{
  padding: 10px;
  letter-spacing: 5px;
  font-family: Montserrat;
}
textarea[placeholder="Message"]{
  letter-spacing:5px;
  padding: 10px;
  font-family: Montserrat;
}
/*
input , textarea {
  border-width: 0 0 2px 0;
  border-color: #000;
}*/
form input,textarea:focus {
  outline:none;
}
<section id="contact-page">
  
  <form>
  <h2>Contact Us</h2>
  <input type="text" placeholder="Name" id='name'>
   
  <input type="text" placeholder="E-mail" id='email'>
   
  <textarea name="message" placeholder="Message" rows="6"></textarea>
    
  </form>
</section>

Upvotes: 0

mtr.web
mtr.web

Reputation: 1515

Your selector form > input:nth-child(3) is a problem because it counts the h2 as the first, making the email-input the third and adding left-margin to it.

Once that is gone, I added margin: 30px 0; to the existing input['text'] selector, to match what you had applied to the textarea, and you may want different values, but everything is lined up and evenly spaced:

JS Fiddle

Upvotes: 0

Sikandar_ali
Sikandar_ali

Reputation: 174

Try This

 <form>
    <div class="col-sm-6 col-xs-12 form-group">
        <input type="text" name="" class="form-control">
    </div>
    <div class="col-sm-6 col-xs-12 form-group">
        <input type="email" name="" class="form-control">
    </div>
    <div class="col-sm-12 form-group">
        <textarea name="" cols="" rows="10" class="form-control"></textarea>
    </div>
<form>

Just add this to your form section and also add the required files for botstrap

1- Jquery

2- Bootsrap.min.css

Bootsrap Documentation

JS fiddle

Upvotes: 1

patm
patm

Reputation: 110

If possible use Bootstrap with Grids, if not easy solution will be add div like this:

Bootstrap Grid LinK: https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

<form>
      <h2>Contact Us</h2>
      <div>
      <input type="text" placeholder="Name">
      </div>
      <div>
      <input type="text" placeholder="E-mail">
      </div>
      <textarea name="message" placeholder="Message" rows="6"></textarea>

      </form>

Upvotes: 0

Related Questions