Creating Input Text using Css and HTML

Question

I Need to have a div tag with two rows of text boxes.

The first row has 3 input text boxes with width and height calculated based on percentage.

Likewise in second row i need 2 input text boxes. As i have two input boxes, the area should be broken into 2 blocks of 50% each.

I am new to CSS and HTML.

I have tried a bit of code. but, didn't work!

#div1
{
    position: absolute;
}
#div1 text
{
    display:inline;
    float:left;
    margin:33%
}
#div2
{
    position: relative;
}
#div2 text
{
    display:inline;
    float:left;
    margin:50%
}
</style>
</head>
<body>
    <div id="div1">
        <input type="text" name="txtbox1" class="clstxtbox1"/>
        <input type="text" name="txtbox2" class="clstxtbox1" />
        <input type="text" name="txtbox2" class="clstxtbox1" />
    </div>
    <div id="div2">
        <input type="text" name="txtbox1" class="clstxtbox2" />
        <input type="text" name="txtbox2" class="clstxtbox2" />
    </div>
</body>

Can anyone help me

there are 3 answers and you did not accept one.do you accept one answer or do you add an image in your mind ? — ADH - THE TECHIE GUY
– ADH - THE TECHIE GUY, Commented Dec 22, 2016 at 11:07

Mohammad Usman · Accepted Answer · 2016-12-22 11:05:31Z

2

You can use css3 flexbox:

HTML:

<div class="input-holder">
  <input type="text" name="txtbox1" class="clstxtbox1"/>
  ...
  ...
  <input type="text" name="txtbox2" class="clstxtbox1" />
</div>

CSS:

.input-holder {
  display: flex;
}

.input-holder input {
  flex-grow: 1;
}

.input-holder {
  margin-bottom: 10px;
  display: flex;
}

.input-holder input {
  flex-grow: 1;
}

<div class="input-holder">
  <input type="text" name="txtbox1" class="clstxtbox1"/>
  <input type="text" name="txtbox2" class="clstxtbox1" />
  <input type="text" name="txtbox2" class="clstxtbox1" />
</div>
<div class="input-holder">
  <input type="text" name="txtbox1" class="clstxtbox2" />
  <input type="text" name="txtbox2" class="clstxtbox2" />
</div>

Here is another variant:

HTML:

<div class="input-holder">
  <div>
    <input type="text" name="txtbox1" class="clstxtbox1"/>
  </div>
  ...
  ...
  <div>
    <input type="text" name="txtbox2" class="clstxtbox1" />
  </div>
</div>

CSS:

.input-holder {
  display: flex;
}

.input-holder div {
  flex-grow: 1;
}

.input-holder div input {
  display: block;
  width: 100%;
}

.input-holder {
  margin-bottom: 10px;
  display: flex;
}

.input-holder div {
  padding: 5px;
  flex-grow: 1;
}

.input-holder div input {
  display: block;
  width: 100%;
}

<div class="input-holder">
  <div>
    <input type="text" name="txtbox1" class="clstxtbox1"/>
  </div>
  <div>
    <input type="text" name="txtbox2" class="clstxtbox1" />
  </div>
  <div>
    <input type="text" name="txtbox2" class="clstxtbox1" />
  </div>
</div>
<div class="input-holder">
  <div>
    <input type="text" name="txtbox1" class="clstxtbox2" />
  </div>
  <div>
    <input type="text" name="txtbox2" class="clstxtbox2" />
  </div>
</div>

edited Dec 22, 2016 at 11:05

answered Dec 22, 2016 at 10:50

Mohammad Usman

39.6k20 gold badges99 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

19 Comments

Jishnu V S Over a year ago

can you tell me , how to add this hidden snippet

Bhavin Shah Over a year ago

meta.stackoverflow.com/questions/271762/…

Mohammad Usman Over a year ago

In first line of snippet  Change hide: true as false.

Mohammad Usman Over a year ago

@JishnuVS Have you got it?

Sundar Stalin Over a year ago

@MuhammadUsman you have got it man but iwant the 2 row textbox to occupy the width of first .

|

Vishal Rajendran · Accepted Answer · 2016-12-22 10:53:27Z

0

I guess you can use table tags inside your div tags.

Your answer can look somewhat like below,

<body>
  <div id="div1">
    <table>
      <tr>
        <td>
          <input type="text" name="txtbox1" class="clstxtbox1" />
        </td>
        <td>
          <input type="text" name="txtbox2" class="clstxtbox1" />
        </td>
        <td>
          <input type="text" name="txtbox2" class="clstxtbox1" />
        </td>
      </tr>
    </table>
  </div>
  <div id="div2">
    <table>
      <tr>
        <td>
          <input type="text" name="txtbox1" class="clstxtbox2" />
        </td>
        <td>
          <input type="text" name="txtbox2" class="clstxtbox2" />
        </td>
        <tr>
    </table>
  </div>
</body>

Later you can adjust the length and width of the td tags according to your wish. Hope this helps.

answered Dec 22, 2016 at 10:53

Vishal Rajendran

415 bronze badges

1 Comment

Sundar Stalin Over a year ago

i dont want to display in table

Bhavin Shah · Accepted Answer · 2016-12-22 10:54:01Z

0

.second_row{
  margin-top:20px;
}

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
 <div class="container">
 <div class="row">
<div class="col-md-4 col-sm-4 col-xs-4">
<input class="form-control" type="text" name="txtbox1" class="clstxtbox1"/>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<input class="form-control" type="text" name="txtbox2" class="clstxtbox2"/>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<input class="form-control" type="text" name="txtbox3" class="clstxtbox3"/>
</div>
 </div>
 
 
 <div class="row second_row">
<div class="col-md-6 col-sm-6 col-xs-6">
<input class="form-control" type="text" name="txtbox1" class="clstxtbox1"/>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<input class="form-control" type="text" name="txtbox2" class="clstxtbox2"/>
</div>

</div>

Hope this helps.

answered Dec 22, 2016 at 10:54

Bhavin Shah

2,4824 gold badges24 silver badges36 bronze badges

3 Comments

Sundar Stalin Over a year ago

Hi can i know how to do in css

Bhavin Shah Over a year ago

you can do using flexbox as @MuhammadUsman has given. if you don't want to use much CSS the you can use bootstrap CSS Library.

Sundar Stalin Over a year ago

Ok I am not exposed to bootstrap now my requirement was to do with css if you asked an requirement for muhammed if you can resolve it well and good

Collectives™ on Stack Overflow

Creating Input Text using Css and HTML

3 Answers 3

19 Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

19 Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related