HTML Forms and Input

Code samples for making a form and styling it.

For a fuller explanation and reference visit HTML Dog (beginner tutorial) or HTML Dog (advanced tutorial) or W3 Schools or W3 Schools (HTML 5 input types) or W3 Schools (HTML 5 form elements) or W3 Schools (HTML 5 form attributes) or W3C Recommendation (HTML 4.01) or W3C Working Draft for HTML 5.

For help on handling form submission visit My PHP Form or HTML Form Guide (saving to text file) or HTML Form Guide (saving to database).

Below is a list and short description of the different elements available for forms.

1. The form tag contains all the form elements:

<form>
</form>

2. The fieldset groups elements together and creates a nice border around them:

<fieldset>
</fieldset>

3. The legend appears at the top, typically breaking the fieldset border:

<legend>This is my form</legend>

4. A table is the best way I have found to lay out the form:

<table>
	<tr>
		<td>
		</td>
		<td>
		</td>
	</tr>
</table>

5. Labels:

<label>Name:</label>

Or better:

<label for="name">Name:</label>

6. Text boxes:
Note: The 'for' attribute in the label corresponds to the 'id' attribute in the input element.

<input id="name" class="textbox" type="text" name="name" value="Name" maxlength="50" />

I'm tired of searching, just give me the solution!

1. HTML:

<form action="#" method="post">
<fieldset>
<legend>Mitglieder filtern</legend>
<table border="0" cellspacing="0" cellpadding="2">
	<tr>
		<td><label for="anrede">Anrede:</label></td>
		<td>
			<select id="anrede" class="in_select">
				<option value="null"></option>
				<option value="herr" selected="selected">Herr</option>
				<option value="frau">Frau</option>
			</select>
		</td>
	</tr>
	<tr>
		<td><label for="vorname">Vorname:</label></td>
		<td><input id="vorname" class="in_text" type="text" name="vorname" value="Vorname" maxlength="50" /></td>
	</tr>
	<tr>
		<td><label for="nachname">Nachname:</label></td>
		<td><input id="nachname" class="in_text" type="text" name="nachname" value="Nachname" maxlength="50" /></td>
	</tr>
	<tr>
		<td><label for="number">Mitglnr.:</label></td>
		<td><input id="number" class="in_text" type="text" name="number" value="Mitglnr." maxlength="10" /></td>
	</tr>
	<tr>
		<td><label for="plz">PLZ:</label></td>
		<td><input id="plz" class="in_text" type="text" name="plz" value="PLZ" maxlength="5" /></td>
	</tr>
	<tr>
		<td><label for="ort">Ort:</label></td>
		<td><input id="ort" class="in_text" type="text" name="ort" value="Ort" maxlength="50" /></td>
	</tr>
	<tr>
		<td><label for="bezirk">Bezirk:</label></td>
		<td>
			<select id="bezirk" class="in_select">
				<option value="null"></option>
				<option value="baden-w">Baden-Württemberg</option>
				<option value="bayern">Bayern</option>
				<option value="berlin">Berlin</option>
				<option value="brandenburg">Brandenburg</option>
				<option value="bremen">Bremen</option>
			</select>
		</td>
	</tr>
	<tr>
		<td><label for="ortsverwaltung">Ortsverwaltung:</label></td>
		<td>
			<select id="ortsverwaltung" class="in_select">
				<option value="null"></option>
				<option value="1">01</option>
				<option value="2">02</option>
				<option value="3">03</option>
				<option value="4">04</option>
				<option value="5">05</option>
			</select>
		</td>
	</tr>
	<tr>
		<td><label for="comments">Comments:</label></td>
		<td><textarea id="comments" class="in_text" name="comments" rows="6" cols="20" >Enter your comments here...</textarea></td>
	</tr>
	<tr>
		<td>Are you:</td>
		<td>
			<p><input id="male" class="in_radio" type="radio" name="areyou" value="male" /><label for="male">Male</label></p>
			<p><input id="female" class="in_radio" type="radio" name="areyou" value="female" /><label for="female">Female</label></p>
			<p><input id="asexual" class="in_radio" type="radio" name="areyou" value="asexual" checked="checked" /><label for="asexual">Asexual</label></p>
		</td>
	</tr>
</table>

<p>
<fieldset>
<legend>Films you like</legend>
<table border="0" cellspacing="0" cellpadding="2">
	<tr>
		<td width="130px">Select as many as you like:</td>
		<td>
			<p><label for="drama">Drama</label><input id="drama" class="in_check" type="checkbox" name="drama" value="drama" />
			<br /><label for="action">Action</label><input id="action" class="in_check" type="checkbox" name="action" value="action" />
			<br /><label for="comedy">Comedy</label><input id="comedy" class="in_check" type="checkbox" name="comedy" value="comedy" />
			<br /><label for="horror">Horror</label><input id="horror" class="in_check" type="checkbox" name="horror" value="horror" />
			<br /><label for="scifi">Sci-fi</label><input id="scifi" class="in_check" type="checkbox" name="scifi" value="scifi" /></p>
		</td>
	</tr>
</table>
</fieldset>
</p>

<select name="country">
	<optgroup label="Africa">
		<option value="gam">Gambia</option>
		<option value="mad">Madagascar</option>
		<option value="nam">Namibia</option>
	</optgroup>
	<optgroup label="Europe">
		<option value="fra">France</option>
		<option value="rus">Russia</option>
		<option value="uk">UK</option>
	</optgroup>
	<optgroup label="North America">
		<option value="can">Canada</option>
		<option value="mex">Mexico</option>
		<option value="usa">USA</option>
	</optgroup>
</select>
<p><input type="file" /></p>

<p><input type="image" src="transnetlogo.gif" /></p>

<p><input type="button" value="I am just a button with a lot of text" /></p>

<p><input type="submit" value="Panic" /></p>

<p><input type="reset" /></p>
</fieldset>
</form>

2. CSS:

 

Home