HyperText Markup Language/Forms

HTML forms are an easy way to gather data from the end user. Processing them requires a server-side scripting language or (in some cases when limited interaction is to be provided within a single page) a client-side scripting language such as JavaScript.

Here is a simple form:

<form id="" action="" method="post">
 <fieldset>
  <legend>Personal details</legend>

  <label for="first">First name</label>
  <input type="text" name="first" id="first"><br />

  <label for="family">Family name</label>
  <input type="text" name="family" id="family"><br />

  <input type="submit" name="personal">

 </fieldset>
</form>

Here's an explanation -

id: The name of the form or control.
action: The URL of a server-side script which can process the data.
method: The method used to send the information. Two methods are supported, POST and GET. POST is the preferred method except for simple searches which generally use GET. Use with server-side languages.
fieldset: Form controls are normally contained in a fieldset element. Complex forms may have multiple fieldsets. Fieldsets can contain other fieldsets.
legend: Each fieldset begins with a legend element. The content of the element is used as a title placed in the border of the fieldset.
label for="": A label for is a single form control. The value of the for attribute must match the id attribute of a form control in the same form.
input type="" name ="" id="": various types of input controls. Supported types are - submit, text, password, checkbox, radio, reset, file, hidden, image and button. The name attribute is used by the server to identify which piece of data was entered in a given box on the form. The id attribute is used to match an input with its label. The name and id attributes normally have identical values for text inputs but different values for checkbox and radio inputs.
select: There is also a SELECT element for drop down lists and a TEXTAREA element for multi-line text input.

This simple example uses <br /> tags to force newlines between the different controls. A real-world form would use more structured markup to layout the controls neatly.

Formatting with CSS

The HTML

The HTML for this form is amazingly simple and you do not have to create hundreds of divs all aligned left and right; this will cause a lot of frustration and a lot of debugging as various browsers still interpret CSS code differently.

<form>

	<label for="name">Name</label>
	<input id="name" name="name"><br />

	<label for="address">Address</label>
	<input id="address" name="address">

</form>

The CSS

The CSS for this code is a little bit more interesting:

label,input {
	float: left;
	width: 150px;
	display: block;
	margin-bottom: 10px;
}

label {
	width: 75px;
	text-align: right;
	padding-right: 20px;
}

br {
	clear: left;
}

Let's explain the code

label,input {
	float: left;
	width: 150px;
	display: block;
	margin-bottom: 10px;
}

The CSS for the label has four sections to it:

float: the float command is used to establish that the label is floated to the left hand side of the form
width: this defines how big the label must be, keeping all the labels at a fixed width keeps everything in a nice ordered line.
display: the element will be displayed as a block-level element, with a line break before and after the element
margin-bottom: by adding a margin to the bottom of this label it insures that labels are positioned nicely one under another with a nice padding between each

label {
	width: 75px;
	text-align: right;
	padding-right: 20px;
}

width: again this is to define a fixed width giving everything a nice defined unity.
Text-align: align the text right keeps everything away from the left aligned labels again keeping things in unison.
Padding-right: this means that there is a nice padding on the right keeping things once again fine tuned.

br {
	clear: left;
}

clear: this is the most important part without the clear:left nothing will align properly this basically makes everything within each element sequence align underneath each other and to the left.

For more details, see the HyperText Markup Language/Tag List/form section of this book.

External links

Forms in HTML Documents, w3.org
HTML Forms, w3schools.com
HTML forms - Learn web development, developer.mozilla.org
Form (HTML), en.wikipedia.org