如何制作2列HTML5表单?

时间:2013-12-22 00:01:34

标签: html5 forms css3 multiple-columns

我的网站上有预订表格,我有一家豪华轿车公司。

但为了节省我网站的空间,我想知道如何制作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>

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

4 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:0)

制作两个<div>个。这些将是两列。然后,在他们的CSS中,添加float: left。如果您需要更多帮助,请询问。

答案 2 :(得分:0)

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

答案 3 :(得分:-1)

看起来你需要对表进行一些工作

通用表格格式可能类似于

<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>

此示例显示标题“表格标题”和3行2列。如果您使用&lt; tr&gt;跟随模式(表格行)和&lt; td&gt; (单个单元格)您可以扩展此2列格式。然后你可以根据自己的喜好调整它。另外,将要排列的列保持在同一个表中,以便浏览器为您排列

一旦你开始了解如何键入表格,那么2列表格就不会很难了。