Question

I have made a simple table form here in jsfiddle.

I also put my code here:

<table>
     <tr>
        <td class="field_label">name</td>
        <td>*</td>
        <td>
         <input type="text">
        </td>
        <td>
         <input type="text">
        </td>

      </tr>

      <tr>
        <td>email</td>
        <td>*</td>
        <td colspan="2">
           <input type="text"> 
        </td>
      </tr>
</table>

Two questions:

1. As you see, I use colspan="2" in email input field <td> to make the text field length the same as name fields which occupy two columns, but it does not work, why?

2. How can I set default value in the input field and set default value color to be gray ?

Answer 1

Regarding question 1.: The column holding the input for the second table row will be 2 columns long (as you could see if you were showing borders for the table columns); however, input fields have a default width in every browser – meaning that the input will show at exactly the same width as the one input above; that’s why you probably think colspan isn’t working.

Add a size attribute to the input tag, or a width css property, e.g. like this:

<table>
 <tr>
    <td class="field_label">name</td>
    <td>*</td>
    <td><input type="text"></td>
    <td><input type="text"></td>
  </tr><tr>
    <td>email</td>
    <td>*</td>
    <td colspan="2"><input type="text" style="width:99%;" ></td>
  </tr>
</table>

As for 2., the default value of an input can be set by using the value attribute:

<input type="text" name="ID" value="101" />

As shown in the example, you should also use at least the name attribute (to be able to reference the input from JavaScript or PHP); and to make it html5 valid, you should close the tag with /> (since you don’t have a separate closing </input> tag).

Changing the text color can be done by adding CSS styles; either in the input itself, or via the id or class attributes; the following would e.g. make the text color in the input light gray:

<input type="text" style="color:#CCC;" >

Be sure to check out how to specify CSS styles in general (e.g. inline, or by id or class), and how to specify colors with CSS.