复选框文本未显示[HTML]

时间:2016-03-01 09:30:20

标签: html

不确定为什么我的文本框文字没有显示。任何线索?

<div id="orderForm">
        <h1> create your own 'za </h1>
        <form name="pizzaOrderForm" action="http://yoda.cs.uwec.edu/CS268/students/HARDTR/processForm.php" method="post" onsubmit="return !!(validatePizzaSize() & validateToppings() & validateTextArea())">
            <table id="formTable">
                <tr>
                    <td id="formLabel">Size:</td>
                    <td><select name="size" id="pizzaSize">
                        <option value="">Choose a size</option>
                        <option value="s">Small</option>
                        <option value="m">Medium</option>
                        <option value="l">Large</option>
                        <option value="r">Ryan Sized</option>
                    </select></td>
                </tr>
                <tr>
                    <td id="formLabel">Toppings:</td>
                        <td>
                            <input type="checkbox" name="pepperoni" value="pep">Pepperoni<br>
                            <input type="checkbox" name="sausage" value="sau">Sausage<br>
                            <input type="checkbox" name="onion" value="oni">Onion<br>
                            <input id="jalap" type="checkbox" name="jalapeno" value="jal">Jalapeno<br>
                            <input type="checkbox" name="greenpep" value="gp">Green Pepper<br>
                        </td>
                </tr>
                <tr>
                    <td id="formLabel">Comments:</td>
                    <td>
                    <textarea id="textAreaComment"  name="comments" rows="3" cols="40"></textarea>
                    </td>
                </tr>
                <tr>
                    <td>
                        <form name="submit">
                        <input type="submit" name="submit" value="Place Order"><br>
                    </td>
                    <td>
                    <input type="reset" value="Reset"><br>
                    </td>
                </tr>
            </table>
        </form>
    </div>

这是一张图片:enter image description here

修改:源代码:http://pastebin.com/6Xm75RgS

6 个答案:

答案 0 :(得分:3)

添加<span style="color:#FFF">并且有效

<input  type="checkbox" name="pepperoni" value="pep"><span style="color:#FFF">Pepperoni</span><br>
<input type="checkbox" name="sausage" value="sau"><span style="color:#FFF">Sausage</span><br>
<input type="checkbox" name="onion" value="oni"><span style="color:#FFF">Onion</span><br>
<input id="jalap" type="checkbox" name="jalapeno" value="jal"><span style="color:#FFF">Jalapeno</span><br>
<input type="checkbox" name="greenpep" value="gp"><span style="color:#FFF">Green Pepper</span><br>

只需在style="color:#FFF"

添加<td>即可
<td style="color:#FFF">
 <input  type="checkbox" name="pepperoni" value="pep"> Pepperoni <br>
 <input type="checkbox" name="sausage" value="sau"> Sausage <br>
 <input type="checkbox" name="onion" value="oni"> Onion <br>
 <input id="jalap" type="checkbox" name="jalapeno" value="jal"> Jalapeno <br>
 <input type="checkbox" name="greenpep" value="gp"> Green Pepper <br>
</td>

结果

enter image description here

答案 1 :(得分:1)

<input type="checkbox" name="checkboxname" id="id_of_checkbox" value="value">
<label for="id_of_checkbox">Text</label>

这样,通过单击标签

也可以选中/取消选中复选框

答案 2 :(得分:0)

只需在html

中替换以下代码即可
<td>
  <select name="size" id="pizzaSize">
    <option value="">Choose a size</option>
    <option value="s">Small</option>
    <option value="m">Medium</option>
    <option value="l">Large</option>
    <option value="r">Ryan Sized</option>
 </select>
</td>

替换为此代码

 <td style="color:#fff;">
  <select name="size" id="pizzaSize">
    <option value="">Choose a size</option>
    <option value="s">Small</option>
    <option value="m">Medium</option>
    <option value="l">Large</option>
    <option value="r">Ryan Sized</option>
 </select>
</td>

答案 3 :(得分:0)

我甚至不在代码中看到一个文本框?也许你可以查看你在桌子中间打开的提交<form>。这可能会给你带来麻烦。

答案 4 :(得分:0)

您提供的代码会在黑色背景上显示黑色文字。

如果您尝试选择该文字但是忽略了您的color: #ffffff;

,则该文字就在那里

如果您将文本包装在标签标签中,那么您将能够更好地设置它们的样式,例如

<label>Text</label>

然后在你的样式表中

label{
  color:#fff;
}

答案 5 :(得分:0)

您的复选框已显示,但您尚未标记它们。使用Label标签指定每个标签代表的内容。 例如:

<label>Check_BoxName</label><input type="checkbox" value="Checkbox_val" name="Checkbox_name" />