内联获取文本框名称和文本框

时间:2016-10-10 17:49:19

标签: html alignment html-table element inline

以下是我用来制作html表单的代码!目前,文本框名称和文本框是一个接一个。 例如:NIC及其文本框不是内联的。

如果我为一对元素使用两个<td>标签,虽然它们变成了内联,但它们相距甚远!我该如何纠正这个问题?

 <html>
    <head>
        <style>input.textfill {
            float: right;
        }</style>
        </head>

         <body bgcolor="#E6E6FA">
            <form id=orders name="orders" action="orders_action.php" method="post" enctype="multipart/form-data"  onsubmit="return Validate(this);">

                <table align="Center"  >

                   <tr><td height="40"><br>
                <div class="headingbox" id="hBoxNIC" > National ID  </div>
                <div style="width:100%;text-align:center;">
                <input type="text" placeholder="920290505v" maxlength="13" name=NIC required   autofocus  />
                       </div>

                </td></tr>
                <tr><td height=50 ><div class="headingboxs">Pick up</div>
                    <input   type=radio name=DP  required value="Pickup">

    <div style="  float: right;"><div class="headingboxs">
        Delivery</div>
                        <input  class="textfill" type=radio name=DP required value="Delivery" onmouseup="textbox(this)" /></div><br><br></td></tr>


    <tr><td height="50"><div class="headingbox" >Expected Time </div>
                <div style="width:100%;text-align:center;">
                <input type="time" id=time  autofocus name=DPTime    onfocusout="hid('timeerror2');" onfocus="show('timeerror2');"min="09:00:00" max="22:00:00" /><br>
                </div>

                   <div class="poperror" id="timeerror2"> Pharmacy is opened from 9AM to 10PM  </div>
        <script>
    var input =  document.getElementById('time');
    function validateTime (element) {

    var minTime = element.min;
    var maxTime = element.max
    var value = element.value + ':00'

    if(minTime > value || value > maxTime) {
    console.log("Time is outside of min/max.");
    }

    }       

    </script>  

                    </td></tr>


    <tr><td height="50"><div class="headingbox" id="hBoxPN"> Phone Number </div>
                <div style="width:100%;text-align:center;">

                <input type="text" maxlength=10;  autofocus name=Tele /><br>
                </div>
                <div class="error" id="phoneerror" > error occured </div><br></td></tr>





                <tr><td height="50"><div class="headingbox" id="hBoxEM"> E-mail </div>
                <div style="width:100%;text-align:center;">
                <input type="text"  autofocus name=Email placeholder="xxx@gmail.com"    /><br>
                </div>
                <div class="error" id="emailerror" > error occured </div><br>

                    </td></tr>
                             <tr>
                        <td height="50" width=330><br><div class="headingbox"> Prescription Copy-1</div> <div id="kids">

    <input id="uploadFile" class="disableInputField" placeholder="Choose File" disabled="disabled" />


    <label class="fileUpload">
        <input id="uploadBtn" type="file" class="upload" name=Image1 />
        <span class="uploadBtn">Upload</span>
    </label>



            <input type="button" id="add" onclick="addkid()" value="+" />

          </div></td></tr>
                    <script>
                    document.getElementById("uploadBtn" ).onchange = function()  {
                document.getElementById("uploadFile").value = this.value;
            };
        </script>


            </div></td></tr>

                <tr><td colspan=5 align=center>
                    <input class="button" type=submit name=submit value=Place >
                    <input class="button" type=reset name=reset value=Cancel> </td></tr>
                </table>

                  </form>



        </body>
    </html>

1 个答案:

答案 0 :(得分:0)

我认为this正是您所寻找的。我基本上用null标签替换了所有GC.SuppressFinalize标签。 span元素自然会在线,而div将尝试向下移动到下一行。

&#13;
&#13;
div
&#13;
span
&#13;
            var input = document.getElementById('time');

            function validateTime(element) {

              var minTime = element.min;
              var maxTime = element.max
              var value = element.value + ':00'

              if (minTime > value || value > maxTime) {
                console.log("Time is outside of min/max.");
              }

            }

            document.getElementById("uploadBtn").onchange = function() {
              document.getElementById("uploadFile").value = this.value;
            };
&#13;
&#13;
&#13;