customising individual form fields

[jhatter]

Hi,

Using the html and style below, for forms I have created, please can someone show how I can customise it to do the following:

1) extend just the "message" input box so that the height is (say) 3 times more than the other input boxes?

2) make it compulsory to complete name and email in the form and include a small graphic to indicate this.

Thanks in anticipation of your response.



<form method="post" action="fieldset.html">
<fieldset>
<legend> Press &amp; Media Enquiries</legend>

<div>
<label for="fullname">Name:</label>
<input type="text" name="fullname" id="fullname" class="txt" />
</div>

<div>
<label for="fullname">Publication:</label>
<input type="text" name="Publication" id="Publication" class="txt" />
</div>

<div>
<label for="email">Email address:</label>
<input type="text" name="email" id="email" class="txt" />
</div>

<div>
<label for="telephone">Telephone:</label>
<input type="text" name="telephone" id="telephone" class="txt" />
</div>

<div>
<label for="message">Message:</label>
<input type="text" name="message" id="message" class="txt" />
</div>
</fieldset>

<div>
<input type="submit" name="btnSubmit" id="btnSubmit" value="Submit" class="btn" />
</div>
</form>



h1 { font: Verdana, Arial, Helvetica, sans-serif; }

input.txt {
color:#00008B;
background-color:#E3F2F7;
border:1px inset #00008B;
width:200px;
}

input.btn {
color:#00008B;
background-color:#ADD8E6;
border:1px inset #00008B;
}

form div {
clear:left;
margin:0;
padding:0;
padding-top:5;
}

form div label {
float:left;
width:40%;
font: bold 0.9em Verdana, Arial, Helvetica, sans-serif;
}

fieldset {
border: 1px dotted #61B5CF;
margin-top:1.4em;
padding:1em;
}

legend {
font: bold 0.8em Verdana, Arial, Helvetica, sans-serif;
color: #999999;
background-color:#FFFFFF;
}

[Nile]

For the message, just add this:


style="500px"

To the message input, as for the auto-form-checking, you'd need to search around google using keywords like "javascript auto form checking"

[jhatter]

Thanks for your reply, excuse my ignorance but where exactly do I put the style="500px" ?

[Nile]

<label for="message">Message:</label>
<input type="text" name="message" id="message" class="txt" style="width:500px"/>
</div>