Jump to main content.

Forms, Template 3

Other Links

Note: These styles apply to Template 3 pages. Here's a page showing how form elements look in Template 4.

Use this style of form to create nice simple forms with CSS. Using this method is not required, but may come in handy.

How-To

  1. The styles are dependent upon several elements and one class:
    • <label>
    • <input>
    • class="form"
  2. The label element, additionally, improves accessibility. Try clicking on the words next to the boxes—note that the boxes get selected and are ready for your input.

Code

<form method="post" action="/cgi-bin/mail.cgi" name="sampleform" class="form">
	<p><label for="name">Name:</label>
		<input type="text" tabindex="1" id="name" name="Name: " /></p>
	<p><label for="org">Organization:</label>
		<input type="text" tabindex="2" id="org" name="Org: " /></p>
	<p><label for="email">Email:</label>
		<input type="text" tabindex="3" id="email" name="Email: " /></p>
	<p><label for="message">Message:</label>
		<textarea tabindex="4" id="message" name="Message: " cols="50" rows="5"></textarea></p>
	<p><input id="formsubmit" tabindex="5" type="submit" value="Send Comments" />
	<input type="hidden" name="tssms" value="your tssms account here" />
	<input type="hidden" name="mailtofile" value="name of mailto file" />
	<input type="hidden" name="Subject" value="Comments form the web site" />
	<input type="hidden" name="Next" value="link to 'next' page" /></p>
</form>

For help with these pages, contact the Web Redesign Workgroup.

Local Navigation

Jump to main content.