如何制作2列HTML5表单?

如何制作2列HTML5表单?,html,forms,css,multiple-columns,Html,Forms,Css,Multiple Columns,我在我的网站上有一张预订表,我拥有一家豪华轿车公司 但是为了节省我的网站空间,我想知道如何制作一个2栏的表单 这是我现在的表格: <form method="post" id="myForm" action="send2.php" class="sendmail" onsubmit="return validateForm()" style="text-align:center;"> <h1 class="lead" align="ce

我在我的网站上有一张预订表,我拥有一家豪华轿车公司

但是为了节省我的网站空间,我想知道如何制作一个2栏的表单

这是我现在的表格:

            <form method="post" id="myForm" action="send2.php" class="sendmail" onsubmit="return validateForm()" style="text-align:center;">

        <h1 class="lead" align="center" style="font-size:35; font-weight:800">RESERVE TRIP</h1>


<ul li><h1 class="lead" align="center" style="color:black;font-weight:bold;list-style:none;">Contact Information</h1></ul li>

<ul li style="list-style:none">

    <li> 

        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />





                        <p>

                            <table>

  <td><p><label>Full Name:<input type="text" id="name" name="name" style="margin:10px; width:285px; height:15px"></td>

  <td><p><label>Company Name:<input type="text" id="company" name="company" style="margin:10px; width:340px; height:15px"></label></p>

    </table> 

     <table align="center">

                <tr>

                    <td class="width:110px; height:15px">

                    <p><label>Phone #:<input type="text" id="phone" name="phone" placeholder="###-###-####" style="margin:10px; width:100px; height:15px">



                    </td>

                    <td class="width:70px; height:15px">

                    <p><label>E-mail:<input type="text" id="email" name="email" style="margin:10px; width:220px; height:15px">



                    </td>



                </tr>

                <tr>

                    </td>

                </tr>

                </table>



    </li>

</ul>

<ul li><h1 class="lead" align="center" style="font-weight:bold;color:black;list-style:none">Pick-Up Information</h1></ul li>





<ul li style="list-style:none">

    <li>


                <option selected="">--</option>

                                        <option>AM</option>

                                        <option>PM</option>

                                    </select></td>



                        </p>                       

            </table>






                    <table align="center">

                <tr>

                    <td class="width:110px; height:15px">

                        <label style="font-size:15px">Airport Name: <span class="error"></span></label>                                                             

                        <td class="width30">

                        <input type="text" id="rtairport" name="rtairport" class="input85" style="width:180px; margin:10px" value="">

                        </td>

                        </td>

                    <td class="width:110px; height:15px" align="center">

                        <label style="font-size:15px">Airline/Code:</label>                         

                        <td class="width30">                            

                <input type="text" id="rtairline" name="rtairline" class="input85" style="width:75px; margin:10px" value="">

                    </td>

                    </td>

                    <td class="width:70px; height:15px">                            

                    <label style="font-size:15px">Flight #:</label>

                    <td class="width30">

                    <input type="text" id="rtfnumber" name="rtfnumber" class="input85" style="width:40px;margin:10px" value="">

                    </td>

                    </td>   



                </tr>

                <tr>

                    <td>

                </tr>

                </td>

            </table>




        <br>


<li><h1 class="lead" align="center" style="font-weight:bold;color:black;list-style:none">Drop-Off Information</h1></li>

<ul li style="list-style:none">


        <center><p><label>Full Address:<input type="text" id="rtstreet" name="rtstreet" style="margin:10px; width:360px; height:15px"></label></p></center>

                    <table align="center">

                <tr>

                    <td class="width:110px; height:15px">

                        <label style="font-size:15px">Airport Name: <span class="error"></span></label>                                                             

                        <td class="width30">

                        <input type="text" id="doairport" name="doairport" class="input85" style="width:200px; margin:10px" value="">

                        </td>

                        </td>

                    <td class="width:110px; height:15px" align="center">

                        <label style="font-size:15px">Airline/Code:</label>                         

                        <td class="width30">                            

                <input type="text" id="doairline" name="doairline" class="input85" style="width:75px; margin:10px" value="">

                    </td>

                    </td>

                    <td class="width:70px; height:15px">                            

                    <label style="font-size:15px">Flight #:</label>

                    <td class="width30">

                    <input type="text" id="dofnumber" name="dofnumber" class="input85" style="width:40px;margin:10px" value="">

                    </td>



            </table>



</div>


</ul></li>

预约旅行
    联系信息
  • 全名: 公司名称:

    电话: 电邮:
提取信息
  • -- 是 颗粒物

    机场名称: 航空公司/代码: 航班号:
  • 下车信息
    • 完整地址:

      机场名称: 航空公司/代码: 航班号:

任何帮助/建议都会有帮助。谢谢。

做两个
s。这将是两列。然后,在css中添加
float:left
。如果您需要更多帮助,只需询问。

将表单字段放在两个单独的div中,并将其向左浮动。还要确保设置它们的宽度并使它们彼此相邻。

您需要支持哪些浏览器?如果您可以使用在旧浏览器中无法使用的半实验性CSS3功能,只需使用。

看起来您需要对表进行一些处理

一般表格式可能如下所示

<form action="checkInput.php" method="POST">
<table border="1px solid #C00">
    <tr>
        <th colspan="2">Table Heading</th>
    </tr>
    <tr>
        <td>Column 1</td><td>Column 2</td>
    </tr>
    <tr>
        <td>An Input for Column 1
            <input class="inputCSS" type="text" id="col1input" placeholder="Input Column 1" />
        </td>
        <td>An Input for Column 2
            <input class="inputCSS" type="text" id="col2input" placeholder="Input Column 2" />
        </td>
    </tr>
    <tr>
        <td>Another row down for<br>Column 1</td><td>Another row down for<br>Column 2</td>
    </tr>
</table>
</form>

表格标题
第1列第2列
第1列的输入
第2列的输入

列1的下一行
列2的下一行
此示例显示标题“表标题”和3行2列。如果按照(表格行)和(单个单元格)的模式,则可以在此2列格式上展开。然后你可以根据自己的喜好调整它。另外,在相同的表中保持所需的列对齐,以便浏览器为您对齐


一旦您开始了解如何键入表格,2列表格就不难了。

我是否要在两个s中都添加float:left?不,只需在左边添加您想要的表格。