Search code examples
htmlhtml-tableplaceholderhtml-input

HTML Table Placeholder Error

Why my placeholder isnt in line ? and why it isnt showing full text?

http://jsfiddle.net/56mTX/

<body>
    <div>
        <form method="post" action="">
            <table border="1" width="200">
                <tr>
                    <th colspan="6" align="center"> <b>Mini Calculator</b>
                    </th>
                </tr>
                <tr>
                    <td Colspan="6">
                        <input id="txtvalueone" type="text" placeholder="Please Enter The First Value Here" />
                    </td>
                </tr>
                <tr>
                    <td Colspan="6">
                        <input id="txtvaluetwo" type="text" placeholder="Please Enter The Second Value Here" />
                    </td>
                </tr>
                <tr>
                    <td colspan="6">
                        <input id="txtresult" type="text" placeholder="Result Here" disabled/>
                    </td>
                    <tr>
                        <tr>
                            <TD>
                                <INPUT id="btnAdd" type="button" value="Add" onclick="txtresult.value = eval(parseFloat(txtvalueone.value) + parseFloat(txtvaluetwo.value))" />
                            </TD>
                            <TD>
                                <INPUT id="btnSubtract" type="button" value="Subtract" onclick="txtresult.value = eval(parseFloat(txtvalueone.value) - parseFloat(txtvaluetwo.value))" />
                            </TD>
                            <TD>
                                <INPUT id="btnMultiply" type="button" value="Multiply" onclick="txtresult.value = eval(parseFloat(txtvalueone.value) * parseFloat(txtvaluetwo.value))" />
                            </TD>
                            <TD>
                                <INPUT id="btnDivide" type="button" value="Divide" onclick="txtresult.value = eval(parseFloat(txtvalueone.value) / parseFloat(txtvaluetwo.value))" />
                            </TD>
                            <TD>
                                <INPUT id="btnreset" type="reset" value="Reset" />
                            </TD>
                        </tr>
            </TABLE>
        </FORM>
    </DIV>
</BODY>

Please Update It TO JSFiddlle if possible

Solution

  • it´s because the input haven't the appropriate size.

    try this

    http://jsfiddle.net/56mTX/2/

    add the css for make it bigger, and it´s done 

    input[type="text"]{
    width:100%;
    display:block;
}