Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
259 views
in Technique[技术] by (71.8m points)

Making input form boxes horizontal in HTML

I been doing some html code in a few days now, but i can't figure out how to make the it all in a horizontal look, just like this exsampel:

ID     Name     Commodity    Weight    Tolerance
Box     Box      drop down    box          box

So box stands for "input form" ofc, and a drop down should be full of names of commodities from my database.

Right now, i have this code so far:

<body>

<div id="header">
    <h2 align="center" style="color: #FFFFFF">Edit Recept</h2>
</div>

<div id="content">
    <div id="form-wrapper">
        <form method="post" action="Front">

        <table>

                <tr>
                    <td>ID: <td> 
                    <td><input type="text" name="Id" />
                </tr>

                <tr>
                    <td>Name:<td>
                    <td><input type="text" name="name" />
                </tr>

        </table>

        <table>
                <tr>

                <p>     </p>
                <p>Add commodities to your recept: <p>
                </tr>
                <tr>

                    <td>Select commodity:<td>
                    <td><select>
                            <option value="" disabled="disabled" selected="selected">Please select Commodity</option>
                            <option value="1">One</option>
                            <option value="2">Two</option>
                        </select>
                </tr>

                <tr>

                    <td>Weight:<td>
                    <td><input type="text" name="tolerance" />
                </tr>

                <tr>
                    <td>Tolerance:<td>
                    <td><input type="text" name="name" />
                </tr>
                <tr>
                    <td><input type="submit" value="Add" /><td> 
                <tr>    
        </table>
                <br>
                <input type="submit" value="Save" /> 
                <input type="reset" value="Cancel" />
                <input type="hidden" name="whichPage" value="prescription"/>


        </form>

    </div>
    <p align="center">
        Enter the new values and press save to make the change 
    </p>
</div>

Is there a trick how to do it easy?? My goal is to make it like i described on the top, and then add a button which will add a new line of input boxes under the other if you want to store more commodities in the same prescription.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Just make your labels all in one single row of the table, then the input fields for those labels should be jsut under in a second row. So you will have a colomn based input just as you wish, here is a fiddle as a sample.

<div id="header">
  <h2 align="center" style="color: #FFFFFF">Edit Recept</h2>
</div>

<div id="content">
<div id="form-wrapper">
  <form method="post" action="Front">

    <table>

      <tr>
        <td>ID </td>
        <td>Name</td>
        <td>Select commodity</td>
        <td>Weight</td>
        <td>Tolerance</td>

      </tr>

      <tr>
        <td><input type="text" name="Id" /></td>
        <td><input type="text" name="name" /></td>
        <td><select>
          <option value="" disabled="disabled" selected="selected">Please select Commodity</option>
          <option value="1">One</option>
          <option value="2">Two</option>
        </select></td>
        <td><input type="text" name="tolerance" /></td>
        <td><input type="text" name="name" /></td>
      </tr>
    </table>

    <br />
    <input type="submit" value="Save" />
    <input type="reset" value="Cancel" />
    <input type="hidden" name="whichPage" value="prescription"/>
  </form>

</div>
<p align="center">
  Enter the new values and press save to make the change
</p>
</div>

Note: You should pay attention to the closing tags for table element markups as you are missing some and introducing an open tag instead of a closing one in some rows.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...