Html表单布局

时间：2018-05-23 09:43:32

标签： html layout alignment

我想要实现的目标：

  1. 我创建了一个html表单
  2. 我希望这个领域能够彼此并排。
  3. 我在网上找到了一些代码，（http://livetyping.capcloud.com/blog/forms-the-compleat-guide-part-1-layout-and-alignment.html）
  4. 我已经在NAME，EMAIL和DEPARTMENT上尝试了这些目的。

  5. 但是，代码对我不起作用，我找不到问题。

     <form>
<div class="row">
    <div class="large-8 small-centered columns">
        <fieldset>
            <legend>KIT EXHANGE REQUISITION FORM</legend>
            <div class="row">
                <div class="small-6 columns">
                    <label for="NAME">NAME</label>
                    <input type="text" name="NAME" id="NAME"/> <br />
                    <br>
                </div>

                <div class="small-6 columns">
                    <label class="EMAIL">EMAIL</label>
                    <input type="email" name="EMAIL" id="EMAIL"/> <br />
                    <br>
                </div>
            </div>
            <div class="row">
                <div class="small-6 columns">
                    <label class="DEPARTMENT">DEPARTMENT</label>
                    <select name="DEPARTMENT" id="DEPARTMENT">
                        <option>HR</option>
                        <option>DMS</option>
                        <option>RIM</option>
                    </select><br />
                    <br>
                </div>

                <div class="small-6 columns">
                    <label class="PURPOSE">PURPOSE</label>
                    <select name="PURPOSE" id="PURPOSE">
                        <option>NEW KIT</option>
                        <option>EXCHANGE KIT</option>
                    </select><br />
                </div>
            </div>
            <div class="row">
                <div class="small-12 columns">
                    <br>
                    <label class="SHIRT1">SHIRT 1</label>
                    <select name="SHIRT1" id="SHIRT1" onchange="enableQuantity(this.value, 'QTY1')">
                        <option value=""></option>
                        <option vale="XS">XS</option>
                        <option value="S">S</option>
                        <option value="M">M</option>
                        <option value="L">L</option>
                        <option value="XL">XL</option>
                        <option value="2XL">2XL</option>
                        <option value="3XL">3XL</option>
                        <option value="4XL">4XL</option>
                        <option value="5XL">5XL</option>
                        <option value="6XL">6XL</option>
                        <option value="7XL">7XL</option>
                    </select><br />
                </div>
            </div>
            <div class="row">
                <br>
                <div class="small-12 columns">
                    <label class="QTY1">QTY</label>
                    <SELECT name="QTY1" id="QTY1" disabled>
                        <option value=""></option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                    </SELECT> <br />
                </div>
            </div>
            <div class="row">
                <br>
                <div class="small-12 columns">
                    <label class="PANT1">PANTS 1</label>
                    <select name="PANT1" id="PANT1" onchange="enableQuantity(this.value, 'QTY2')">
                        <option value=""></option>
                        <option value="24">24</option>
                        <option value="25">25</option>
                        <option value="26">26</option>
                        <option value="27">27</option>
                        <option value="28">28</option>
                        <option value="29">29</option>
                        <option value="30">30</option>
                        <option value="31">31</option>
                        <option value="32">32</option>
                        <option value="33">33</option>
                        <option value="34">34</option>
                        <option value="35">35</option>
                        <option value="36">36</option>
                        <option value="37">37</option>
                        <option value="38">38</option>
                        <option value="39">39</option>
                        <option value="40">40</option>
                        <option value="41">41</option>
                        <option value="42">42</option>
                        <option value="43">43</option>
                        <option value="44">44</option>
                        <option value="45">45</option>
                        <option value="46">46</option>
                        <option value="47">47</option>
                        <option value="48">48</option>
                    </select><br />
                </div>
                <br>
            </div>
            <div class="row">
                <div class="small-12 columns">
                    <label class="QTY2">QTY</label>
                    <select name="QTY2" id="QTY2" disabled>
                        <option value=""></option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                    </select> <br />
                </div>
            </div>
            <div class="row">
                <br>
                <div class="small-12 columns">
                    <label class="SHIRT2">SHIRT 2</label>
                    <select name="SHIRT2" id="SHIRT2" onchange="enableQuantity(this.value, 'QTY3')">
                        <option value=""></option>
                        <option value="XS">XS</option>
                        <option value="S">S</option>
                        <option value="M">M</option>
                        <option value="L">L</option>
                        <option value="XL">XL</option>
                        <option value="2XL">2XL</option>
                        <option value="3XL">3XL</option>
                        <option value="4XL">4XL</option>
                        <option value="5XL">5XL</option>
                    </select> <br />
                </div>
            </div>
            <div class="row">
                <br>
                <div class="small-12 columns">
                    <label class="QTY3">QTY</label>
                    <SELECT name="QTY3" id="QTY3" disabled>
                        <option value=""></option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                    </SELECT><br />
                </div>
            </div>
            <div class="row">
                <br>
                <div class="small-12 columns">
                    <label class="PANT2">PANTS 2</label>
                    <select name="PANT2" id="PANT2" onchange="enableQuantity(this.value, 'QTY4')">
                        <option value=""></option>
                        <option value="28">28</option>
                        <option value="29">29</option>
                        <option value="30">30</option>
                        <option value="31">31</option>
                        <option value="32">32</option>
                        <option value="33">33</option>
                        <option value="34">34</option>
                        <option value="35">35</option>
                        <option value="36">36</option>
                        <option value="37">37</option>
                        <option value="38">38</option>
                        <option value="39">39</option>
                        <option value="40">40</option>
                        <option value="41">41</option>
                        <option value="42">42</option>
                        <option value="43">43</option>
                        <option value="44">44</option>
                        <option value="45">45</option>
                        <option value="46">46</option>
                        <option value="47">47</option>
                        <option value="48">48</option>
                    </select><br />
                </div>
            </div>
            <div class="row">
                <br>
                <div class="small-12 columns">
                    <label class="QTY4">QTY</label>
                    <select name="QTY4" id="QTY4" disabled>
                        <option value=""></option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                    </select><br />
                </div>
            </div>
            <div class="row">
                <br>
                <div class="small-12 columns">
                    <label class="SAFETYSHOES">SAFETY SHOES</label>
                    <select name="SAFETYSHOES" id="SAFETYSHOES" onchange="enableQuantity(this.value, 'QTY5')">
                        <option value=""></option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                    </select>
                    <br />
                </div>
            </div>
            <div class="row">
                <br>
                <div class="small-12 columns">
                    <label class="QTY5">QTY</label>
                    <select name="QTY5" id="QTY5" disabled>
                        <option value=""></option>
                        <option value="1">1</option>
                    </select><br />
                </div>
            </div>
            <div class="row">
                <br>
                <div class="small-12 columns">
                    <label class="JACKET">JACKET</label>
                    <select name="JACKET" id="JACKET" onchange="enableQuantity(this.value, 'QTY6')">
                        <option value=""></option>
                        <option value="S">S</option>
                        <option value="M">M</option>
                        <option value="L">L</option>
                        <option value="XL">XL</option>
                    </select><br />
                </div>
            </div>
            <div class="row">
                <br>
                <div class="small-12 columns">
                    <label class="QTY6">QTY</label>
                    <select name="QTY6" id="QTY6" disabled>
                        <option value=""></option>
                        <option>1</option>
                    </select><br />
                </div>
            </div>
            <div class="row">
                <br>
                <div class="small-12 columns">
                    <label class="SEFETYVEST">SAFETY VEST</label>
                    <select name="SAFETYVEST" id="SAFETYVEST">
                        <option></option>
                        <option>1</option>
                    </select><br />
                </div>
            </div>
            <div class="row">
                <br>
                <div class="small-12 columns">
                    <label class="POUCH">POUCH</label>
                    <select name="POUCH" id="POUCH">
                        <option></option>
                        <option>1</option>
                    </select><br />
                </div>
            </div>
            <div class="row">
                <br>
                <div class="small-12 columns">
                    <label class="LANYARD">LANYARD</label>
                    <select name="LANYARD" id="LANYARD">
                        <option></option>
                        <option>1</option>
                    </select><br />
                </div>
            </div>
            <div class="row">
                <br>
                <div class="small-12 columns">
                    <label class="RR">REASONS/REMARKS</label>
                    <br>
                    <textarea name="RR" id="RR" cols="40" rows="8" placeholder="Fill this if you are exchanging kit"></textarea>
                    <br />
                </div>
            </div>
            <div class="row">
                <br>
                <input type="button" id="b1" onClick="insert_value()" value="Insert"></input>
        </fieldset>
    </div>
</div>

    6. 以下是完整代码：

          <!DOCTYPE html>

  <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
 <head>
<meta charset="utf-8" />
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>

        var script_url = "https://script.google.com/macros/s/AKfycbytxdFwhdpMGS5ClOZfUCfIKoUSi0-pZhkLGnispZs5d9nNZ2-h/exec";

    // Make an AJAX call to Google Script
    function insert_value() {
        var NAME = $("#NAME").val();
        var EMAIL = $("#EMAIL").val();
        var DEPARTMENT = $("#DEPARTMENT").val();
        var PURPOSE = $("#PURPOSE").val();
        var SHIRT1 = $("#SHIRT1").val();
        var QTY1 = $("#QTY1").val(); 
        var PANT1 = $("#PANT1").val();
        var QTY2 = $("#QTY2").val();
        var SHIRT2 = $("#SHIRT2").val();
        var QTY3 = $("#QTY3").val();
        var PANT2 = $("#PANT2").val();
        var QTY4 = $("#QTY4").val();
        var SAFETYSHOES = $("#SAFETYSHOES").val();
        var QTY5 = $("#QTY5").val();
        var JACKET = $("#JACKET").val();
        var QTY6 = $("#QTY6").val();
        var SAFETYVEST = $("#SAFETYVEST").val();
        var POUCH = $("#POUCH").val();
        var LANYARD = $("#LANYARD").val();
        var RR = $("#RR").val();

        var url = script_url + "?callback=ctrlq&EMAIL=" + EMAIL + "&NAME=" + NAME + "&DEPARTMENT=" + DEPARTMENT + "&PURPOSE=" + PURPOSE + "&SHIRT1=" + SHIRT1 + "&QTY1=" + QTY1 + "&PANT1=" + PANT1 + "&QTY2=" + QTY2 + "&SHIRT2=" + SHIRT2 + "&QTY3=" + QTY3 + "&PANT2=" + PANT2 + "&QTY4=" + QTY4 + "&SAFETYSHOES=" + SAFETYSHOES + "&QTY5=" + QTY5 + "&JACKET=" + JACKET + "&QTY6=" + QTY6 + "&SAFETYVEST=" + SAFETYVEST + "&POUCH=" + POUCH + "&LANYARD=" + LANYARD + "&RR=" +RR + "&action=insert";


        var request = jQuery.ajax({
            crossDomain: true,
            url: url,
            method: "GET",
            dataType: "jsonp"
        });

    }

    function enableQuantity(selectValue, qtyEle) {
        document.getElementById(qtyEle).disabled = selectValue ? false : true;
    }


    </script>
</head>
<body>
<form>


</form>

1 个答案:

答案 0 :(得分：0)

尝试使用此

.columns{
  width:300px;
  float:left;
}
相关问题
最新问题