CODEWITHSUNDEEP
html
Dongbae
Dongbae

Reputation: 31

Checkbox Text Not Showing [HTML]

Not sure why my textbox text isn't showing. Any clue?

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

Here is a picture: enter image description here

Edit: source code: http://pastebin.com/6Xm75RgS

Upvotes: 0

Views: 6336

Answers (6)

WowThatsLoud
WowThatsLoud

Reputation: 113

I don't even see a textbox in the code? And maybe you can look at the submit <form> you open in the middle of your table. That could give trouble.

Upvotes: 0

Omari Victor Omosa
Omari Victor Omosa

Reputation: 2879

Added <span style="color:#FFF"> and it worked 

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

OR just add style="color:#FFF" at the <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>

Result

enter image description here

Upvotes: 3

Nnitiwe
Nnitiwe

Reputation: 1

Your Check-boxes have been displayed you just haven't labeled them. Use the Label tag to specify what each label stands for. for example:

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

Upvotes: -1

Ben
Ben

Reputation: 171

The code you have supplied results in black text on a black background.

The text is there if you try to select it but it is ignoring your color: #ffffff;

if you wrap your text in label tags you will then be able to style them better e.g.

<label>Text</label>

then in your stylesheet

label{
  color:#fff;
}

Upvotes: -1

Dhaval Patel
Dhaval Patel

Reputation: 1106

Just replace below code in your 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>

Replace with this code

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

Upvotes: 0

Bart
Bart

Reputation: 547

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

This way the checkbox will also be checked/unchecked by clicking the label

Upvotes: 0

Related Questions