Блог

Главная - Вопросы по программированию - Получение встроенных имен текстовых полей и текстовых полей

Получение встроенных имен текстовых полей и текстовых полей

#html #alignment #html-table #element #inline

#HTML #выравнивание #html-таблица #элемент #встроенный

Вопрос:

Ниже приведен мой код, который я использовал для создания HTML-формы! В настоящее время имена текстовых полей и текстовые поля следуют одно за другим. Например: сетевой адаптер и его текстовое поле не являются встроенными.

Если я использую два <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:

Я думаю, это то, что вы ищете. Я в основном заменил все div теги span тегами. Элемент span, естественно, будет встроенным, в то время как divs попытается перейти к следующей строке.

             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;
            };  
 input.textfill {
  float: right;
}  
 <body bgcolor="#E6E6FA">
  <form id=orders name="orders" action="orders_action.php" method="post" enctype="multipart/form-data" onsubmit="return Validate(this);">
    <table align="">
      <tr>
        <td height="40">
          <br>
          <span class="headingbox" id="hBoxNIC"> National ID </span>
          <span style="width:100%;text-align:center;">
            <input type="text" placeholder="920290505v" maxlength="13" name=NIC required autofocus />
          </span>
        </td>
      </tr>
      <tr>
        <td height=50>
          <span class="headingboxs">Pick up</span>
          <input type=radio name=DP required value="Pickup">
          <span style="  float: right;">
            <span class="headingboxs">
              Delivery</span>
          <input class="textfill" type=radio name=DP required value="Delivery" onmouseup="textbox(this)" />
          </span>
          <br>
          <br>
        </td>
      </tr>
      <tr>
        <td height="50">
          <span class="headingbox">Expected Time </span>
          <span 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>
          </span>
          <span class="poperror" id="timeerror2"> Pharmacy is opened from 9AM to 10PM </span>
        </td>
      </tr>
      <tr>
        <td height="50">
          <span class="headingbox" id="hBoxPN"> Phone Number </span>
          <span style="width:100%;text-align:center;">
            <input type="text" maxlength=10; autofocus name=Tele />
            <br>
          </span>
          <span class="error" id="phoneerror"> error occured </span>
          <br>
        </td>
      </tr>
      <tr>
        <td height="50">
          <span class="headingbox" id="hBoxEM"> E-mail </span>
          <span style="width:100%;text-align:center;">
            <input type="text" autofocus name=Email placeholder="xxx@gmail.com" />
            <br>
          </span>
          <span class="error" id="emailerror"> error occured </span>
          <br>
        </td>
      </tr>
      <tr>
        <td height="50" width=330>
          <br>
          <span class="headingbox"> Prescription Copy-1</span>
          <span 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=" " />
          </span>
        </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>

Комментарии:

1. спасибо, но я не хочу, чтобы они были выровнены по текстовым полям, выровненным друг под другом! у вас они немного искажены

2. вы хотите, чтобы все они были выровнены по левому краю ниже их desc вот так ?

3. Это тоже было изначально так! я хочу, чтобы он был встроенным и близко друг к другу, т.е. jsfiddle.net/k9spo7ru вместе со стихиями в полном порядке! не одно за другим! например, имя текстового поля и текстовое поле в одной строке! и текстовое поле в следующей строке находится чуть ниже текстового поля предыдущей строки! я имел в виду, что текстовое поле электронной почты находится непосредственно под полем номера телефона! т.е. они оба выровнены по вертикали!