A Basic Form
The code
HTML
<form action="someScript" method="post">
<fieldset>
<legend>Personal Information</legend>
<label for="firstname">Firstname</label>
<input type="text" name="firstname">
<label for="lastname">Lastname</label>
<input type="text" name="lastname">
<input type="submit" value="Submit">
<input type="reset" value="Clear">
</fieldset>
</form>
The action attribute tells your form where to find the server side script written in a web programming language that handles the data.
The method tells the browser how to pass the data, GET = via the URL and POST = behind the scenes. Post is preferred and inherently more secure.
Fieldset is a way to logically group data. Say you were going to create a form that asked for name, age, birthdate, credit card number, billing address, and expiration date you would probably want to put a fieldset around the personal information and another one around the credit information. This both visually (puts a thin border around your data) and logically separates your data.
Legend actually says what the Fieldset implies, a name for the grouping of data.
Label is a tag that labels each field. It is important to use this tag rather than a paragraph tag because label holds more semantic meaning here. Meaning that it is not a paragraph its a label. Using this helps drastically for blind and disabled users as well.
Example
By adding this CSS
input.text{
display:block;
margin:0.5em 0;
border:1px solid #bbb;
width:300px;
padding:5px
}
input.text:focus{border:1px solid #666}
Example with CSS
More Form Elements
- Text
- Boolean
- Multiple Choice
- Submitting
- Accessibility
- Client-side Validation