HTML表单字段横向排列问题求助：参考代码无法生效

Hey there! Let's get your form fields aligned side-by-side as you want. It looks like you're leveraging the Foundation framework's grid system, but a few missing pieces and small errors are keeping your layout from working correctly. Here's what you need to fix:

1. Include the Foundation Framework #

The row and columns classes you're using are part of the Foundation CSS framework—without loading Foundation's styles, these classes won't apply any layout styling. Add this to the <head> of your HTML document to include the latest Foundation CSS (and optional JS for extra functionality):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js" crossorigin="anonymous"></script>

2. Fix Label Attribute Errors #

Your labels for fields like EMAIL, DEPARTMENT, and PURPOSE are using the class attribute instead of the required for attribute. The for attribute links the label to its corresponding input/select by matching the element's id, which is critical for accessibility and proper form behavior.

For example, change:

<label class="EMAIL">EMAIL</label>

to:

<label for="EMAIL">EMAIL</label>

3. Correct Typos in Form Elements #

There's a typo in one of your SHIRT1 options—vale="XS" should be value="XS". This typo would prevent that option from working correctly when selected.

Corrected Full Form Code #

Here's the revised version of your form with all fixes applied:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Kit Exchange Requisition</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css" crossorigin="anonymous">
</head>
<body>
<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 for="EMAIL">EMAIL</label> 
                        <input type="email" name="EMAIL" id="EMAIL"/> 
                        <br /> 
                        <br> 
                    </div> 
                </div> 
                <div class="row"> 
                    <div class="small-6 columns"> 
                        <label for="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 for="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 for="SHIRT1">SHIRT 1</label> 
                        <select name="SHIRT1" id="SHIRT1" onchange="enableQuantity(this.value, 'QTY1')"> 
                            <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> 
                            <option value="6XL">6XL</option> 
                            <option value="7XL">7XL</option> 
                        </select><br /> 
                    </div> 
                </div> 
                <div class="row"> 
                    <br> 
                    <div class="small-12 columns"> 
                        <label for="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 for="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 for="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 for="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> 
                            <option value="6XL">6XL</option> 
                            <option value="7XL">7XL</option> 
                        </select><br /> 
                    </div> 
                </div> 
            </fieldset> 
        </div> 
    </div> 
</form>
<script>
    // Don't forget to include your enableQuantity function!
    function enableQuantity(selectedValue, quantityId) {
        const quantitySelect = document.getElementById(quantityId);
        quantitySelect.disabled = selectedValue === "";
    }
</script>
</body>
</html>

Final Notes #

• After adding the Foundation CSS, your NAME/EMAIL and DEPARTMENT/PURPOSE fields will display side-by-side as intended.
• I also added the missing enableQuantity function to make your quantity selectors work correctly when a size is chosen.

内容的提问来源于stack exchange，提问作者user9739730