如何将我的小提琴代码转移到我的网站？

时间：2013-08-05 21:09:40

标签： jquery html5 css3 jsfiddle

在我的网站上，我有一个下拉预订表格。在我的表单上，我想添加额外的按钮进行点击，这样就可以出现一个单独的表单。

我使用jsfiddle来帮助我创建代码，这是我的代码：

http://jsfiddle.net/Q5RW6/embedded/

HTML CODE 

<div id=nav>
    <ul>
        <ul>

            <label id=form1-control>Address</label>
        </ul>
        <ul>
            <label id=form2-control>Airport</label>
        </ul>
        <ul>
            <label id=form3-control>Landmark/Hotel</label>
        </ul>
    </ul>
</div>
<div id=forms>
    <div id=form1>
        <form method=post action="">
            <label>Street Address:</label>
            <input type=text name=name>
            <tr>
                <p>
                    <td class="width:110px; height:15px">
                        <label>City:
                            <input type=text id=city name=city>
                    </td>
                    <td class="width:70px; height:15px">
                        <p>
                            <label>State:
                                <input type="text" id="state" name="state">
                    </td>
                    <td>
                        <p>
                            <label>Zip Code:
                                <input type="text" id="zip" name="zip">
                        </p>
                    </td>
            </tr>
            <tr>
                </td>
            </tr>
            </table>
            </p>
            <p>
                <label>Date <span class=""> * </span> 
                </label>
                <input type="text" id="calendar" name="calendar" style="height:25px" />
            </p>
            <p>
                <label>Time</label>
                <select id="time" name="time" style="height:25px; width:55px">
                    <option>--</option>
                    <option>01</option>
                    <option>02</option>
                    <option>03</option>
                    <option>04</option>
                    <option>05</option>
                    <option>06</option>
                    <option>07</option>
                    <option>08</option>
                    <option>09</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                </select>
                <select id="time2" name="time2" style="height:25px; width:55px">
                    <option selected="">--</option>
                    <option>00</option>
                    <option>01</option>
                    <option>02</option>
                    <option>03</option>
                    <option>04</option>
                    <option>05</option>
                    <option>06</option>
                    <option>07</option>
                    <option>08</option>
                    <option>09</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                    <option>13</option>
                    <option>14</option>
                    <option>15</option>
                    <option>16</option>
                    <option>17</option>
                    <option>18</option>
                    <option>19</option>
                    <option>20</option>
                    <option>21</option>
                    <option>22</option>
                    <option>23</option>
                    <option>24</option>
                    <option>25</option>
                    <option>26</option>
                    <option>27</option>
                    <option>28</option>
                    <option>29</option>
                    <option>30</option>
                    <option>31</option>
                    <option>32</option>
                    <option>33</option>
                    <option>34</option>
                    <option>35</option>
                    <option>36</option>
                    <option>37</option>
                    <option>38</option>
                    <option>39</option>
                    <option>40</option>
                    <option>41</option>
                    <option>42</option>
                    <option>43</option>
                    <option>44</option>
                    <option>45</option>
                    <option>46</option>
                    <option>47</option>
                    <option>48</option>
                    <option>49</option>
                    <option>50</option>
                    <option>51</option>
                    <option>52</option>
                    <option>53</option>
                    <option>54</option>
                    <option>55</option>
                    <option>56</option>
                    <option>57</option>
                    <option>58</option>
                    <option>59</option>
                </select>
                <select id="time3" name="time3" style="height:25px; width:55px">
                    <option selected="">--</option>
                    <option>AM</option>
                    <option>PM</option>
                </select>
            </p>
            <p>
                <table align="center">
                    <tr>
                        <td class="width:110px;">
                            <label style="font-size:13px">Passenger #: <span class='error'></span>
                            </label>
                            <td class="width30">
                                <input type="number" id="passengers" name="passengers" style="width:50px;margin:3px">
                            </td>
                        </td>
                        <td class="width:70px; height:15px">
                            <label style="font-size:13px">Luggage #:</label>
                            <td class="width30">
                                <input type="number" id="luggages" name="luggages" style="width:50px; margin:3px">
                            </td>
                        </td>
                        <td class="width:50px;" colspan="2">
                            <label style="font-size:13px">Car Seat:</label>
                        </td>
                        <td class="width30">
                            <input type="number" id="seat" name="seat" style="width:50px; margin:3px">
                        </td>
                    </tr>
                    <tr>
                        <td>
                    </tr>
                    </td>
                </table>
        </form>
    </div>
    <div id=form2>
        <form method=post action="">
            <td class="width:110px; height:15px">
                <label style="font-size:13px">Airport Name: <span class='error'></span>
                </label>
                <td class="width30">
                    <input type="text" id="airport" name="airport" class="input85" style="width:110px; margin:10px" value="" />
                </td>
            </td>
            <td class="width:70px">
                <label style="font-size:13px">Airline/Code:</label>
                <td class="width30">
                    <input type="text" id="airline" name="airline" class="input85" style="width:60px; margin:10px" value="" />
                </td>
            </td>
            <td class="width:50px" colspan="2">
                <label style="font-size:13px">Flight #:</label>
            </td>
            <td class="width:30">
                <input type="text" id="fnumber" name="fnumber" class="input85" style="width:40px;margin:10px" value="" />
            </td>
            </tr>
            <tr>
                </td>
            </tr>
            </table>
            <table align="center">
                <tr>
                    <td class="width:110px;">
                        <label style="font-size:13px">Passenger #: <span class='error'></span>
                        </label>
                        <td class="width30">
                            <input type="number" id="passengers" name="passengers" style="width:50px;margin:3px">
                        </td>
                    </td>
                    <td class="width:70px;">
                        <label style="font-size:13px">Luggage #:</label>
                        <td class="width30">
                            <input type="number" id="luggages" name="luggages" style="width:50px; margin:3px">
                        </td>
                    </td>
                    <td class="width:50px;" colspan="2">
                        <label style="font-size:13px">Car Seat:</label>
                    </td>
                    <td class="width30">
                        <input type="number" id="seat" name="seat" style="width:50px; margin:3px">
                    </td>
                </tr>
                <tr>
                    <td>
                </tr>
                </td>
            </table>
        </form>
    </div>
    <div id=form3>
        <form method=post action="">
            <label>Full Address:</label>
            <input type=text name=name style=width:280px>
        </form>
    </div>
</div>

问题 如何将代码正确地传输到我的网站以使一切正常？

1 个答案:

答案 0 :(得分：0)

其中一些取决于您使用的是哪种浏览器，但是来自Mac上的Safari或Chrome：

  • 使用上面的嵌入式链接
  • 点击结果
  • 在其中一个按钮上打开上下文菜单，然后选择inspect element。

  • 在<html>代码中找到<iframe>代码

    Html element under iframe

  • 打开html元素的上下文菜单，然后选择copy as html

    Context menu

这应该复制完整的html doc结果，允许您将其粘贴到您选择的编辑器中。

它将有一个你可能想要删除的额外样式表引用：

  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
相关问题
最新问题