Question

我有一个HTML表单（保存为.php页面，因为其中有一个小片段），我需要将其与WordPress一起使用。将源代码简单地输入到新的WP页面中会引发语法错误，因此我使用了iframe，它可以整体上起作用。

我的问题是，在移动设备上，iframe是水平延伸的。我启用了滚动条，但是我希望表单在移动设备的屏幕内垂直呈现。我已经尝试了各种视口元标记，但无法正常工作。我已经在表单页面html和WP页面中尝试过它们。

我该怎么办？

HTML表单是（没有用于所有验证的JavaScript等）：

<form name="frm1">

  
  <table style="width:100%">
    <tr>
      <td>Mobile No:</td>
      <td><input name="to" id="to" type="text" /></td>
      <td>Date of Procedure:</td>
      <td><input name="dateofprocedure" value="<?php echo date("d/m/Y"); ?>" type="text" id="dateofprocedure"/></td>
       <td>MRN:</td>
      <td><input name="customstring" id="mrn" type="text" /></td>
    </tr>

    <tr>
      <td>Surgical Procedure:</td>
      <td><select id="surgicalprocedure"> 
        <option value="EFL">Epidural for Labour</option>
        <option value="C-section">Caesarian Section</option>
        <option value="MRP">Manual Removal of Placenta</option>
        <option value="Instr-Deliv">Instrumental Delivery</option>
        <option value="CS-Failed-Instr">Caesarian after Failed Instrumental</option>
        <option value="Peri-Repair">Perineal Repair</option>
        <option value="Haemostasis">Bleeding Haemostatis</option>
        <option value="ECV">ECV</option>
        <option value="NA">Not applicable</option>
</select>
        </td>
      <td>Priority:</td>
      <td><select id="priority"> 
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="Notapplicable">Not applicable</option>
</select>
        </td>
      <td>Anaes Surname:</td>
      <td><input name="anaes" id="anaes" type="text" />
        </td>
    </tr>

    <tr>
      <td>Neuraxial Anaesthesia:</td>
      <td><select id="neuraxial"> 
        <option value="EFL">Epidural for Labour</option>
        <option value="EpiTopUp">Epidural Top Up</option>
        <option value="Spinal">Spinal</option>
        <option value="CSE">CSE</option>
        <option value="None">None</option>
</select>
        </td>
    </tr>
    <tr>
      <td>GA Provided?</td>
      <td><select id="ga"> 
        <option value="No">No</option>
        <option value="Yes">Yes</option>
</select>
        </td>
    </tr>
        <tr>
      <td>Block Provided?</td>
      <td><select id="ra"> 
        <option value="No">No</option>
        <option value="Yes">Yes</option>
        <option value="Attempted">Attempted</option>
</select>
        </td>
        <td><input type="button" value="SUBMIT" onClick="doall()"></td>

    </tr>

  
</table> 

</form>

iframe行是：

<iframe src="https://newcastleproms.org.uk/obsfinal.php" width="100%" height="200px" frameborder="0" scrolling="yes"></iframe>

CSS是：

 <style type="text/css">

    
 th, td {
    
    padding: 10px;}
  

 input[type=text] { 
  
  box-sizing: border-box;
   border: 2px solid #3380C4;
  border-radius: 8px;
}
    
    

select {
     
  box-sizing: border-box;
  border: 2px solid #3380C4;
  border-radius: 8px;
}    
    
input[type=button] {
  background-color: #1367BF;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}
    
    
    </style>

iframe表单水平滚动移动设备

0 个答案: