Forms

Forms are an excellent way to allow you to collect input from your users. For the sake of brevity, we will show multiple form controls at once.

Form Intro

To begin creating a form, one should use the form, fieldset, and legend elements to define the forms' structure. The form element is what defines the html form and contains all other form controls (like a container). The fieldset separates and groups related controls in a form. The legend specifies a caption for a fieldset element.


				

				
<form name="formintro" id="formintro">
				
<fieldset>
				
<legend>First Group</legend>
				
<p>FORM CONTROLS GO HERE...</p>
				
</fieldset>
				
<fieldset>
				
<legend>Second Group</legend>
				
<p>MORE FORM CONTROLS GO HERE...</p>
				
</fieldset>
				
</form>

would result in:

Form Controls

Forms can have many controls such as labels, text inputs (also known as textboxes), textareas, drop-down lists, radio buttons, checkboxes, number inputs (also known as spinners) and buttons.


				

				
<form name="myform" id="myform" method="post" action="http://webdevbasics.net/scripts/demo.php">
				
<fieldset>
				
<legend>Control Examples</legend>
				
<p><label for="txtbox">Textbox:</label>
				
<input type="text" name="txtbox" id="txtbox" required="required" placeholder="Enter text here"></p>
				
<p><input type="checkbox" name="chkgroup" id="item1" value="item1">
				
<label for="item1">Checkbox #1</label>
				
<br><input type="checkbox" name="chkgroup" id="item2" value="item2">
				
<label for="item2">Checkbox #2</label>
				
<br><input type="checkbox" name="chkgroup" id="item3" value="item3">
				
<label for="item3">Checkbox #3</label></p>
				
<p>Dropdown box: <select size="1" name="num" id="num">
				
<option value="unspecified" selected="selected"> - </option>
				
<option value="1">1</option>
				
<option value="2">2</option>
				
<option value="3">3</option>
				
<option value="4">4</option>
				
</select></p>
				
<p>Number Input (also known as a spinner) <input type="number" name="numselect" id="numselect" min="1" max="10"></p>
				
<p><input type="radio" name="rdgroup" id="radiobtn1" value="radio1" checked>
				
<label for="radiobtn1">Radio Option #1</label>
				
<br><input type="radio" name="rdgroup" id="radiobtn2" value="radio2">
				
<label for="radiobtn2">Radio Option #2</label>
				
<br><input type="radio" name="rdgroup" id="radiobtn3" value="radio3">
				
<label for="radiobtn3">Radio Option #3</label></p>
				
<p><textarea name="message" id="message" rows="10" placeholder="Text areas are great for email and messages that would take paragraphs to express!"></textarea></p>
				
<p><input type="submit" value="Send" id="send">
				
<input type="reset" value="Reset" id="reset"></p>
				
</fieldset>
				
</form>

would result in:

Summary

As you can see, the form element and its many controls make for a very powerful and useful html element. Textboxes are useful for short strings and small bits of data. Checkboxes can be used for when you want to give users the choice to select multiple options from a group of choices. Radio buttons can be used for when you want to give users only one choice out of many. Dropdowns work similar to radio buttons, except they would be more compact in presentation. Number inputs (spinners) also work similar to radio buttons and dropdown lists, only in a different format. Text areas are good for long messages, such as the body of an email. Finally, buttons can process (or reset) the form when it is fully filled out.

Within the form controls, many tag attributes can be used to modify the behavior of the controls before and after form submission

action - The script that handles form data when the form is submitted
autofocus - Which element gets initial focus when the page is loaded (Used mainly on textboxes)
for - Specifies which form control the label is bound to
id - Specifies a unique ID to an html element
max and min - Refers to the maximum and minimum values of an input
method - Refers to the HTTP method used when sending form data (POST is the default)
name - Specifies the name of an element; when used for checkboxes and radio buttons, same names on said elements group them together
placeholder - Specifies what text should be displayed (usually used for textboxes/textareas)
required - Specifies that an element MUST be filled out prior to submission
rows - Specifies how many rows should be visible on screen in a textarea
size - Specifies the visible size of an input
type - Used to designate the type of form control to use
value - Used to designate the value of a form element