HTML5 Forms and Form Processing in PHP

A text field (edit box) called "firstname", initially blank:

<input type="text" name="firstname">

Enter your first name:

A text field with a default (already filled-in value):

<input type="text" name="school" value="Niagara College">

Your school is

A password field (edit box) called "secret", which shows asterisks as you type, for privacy:

<input type="password" name="secret">

What is your secret password?

A checkbox, which gets sent as "email=on" when it is checked:

<input type="checkbox" name="email">

Send confirmation by mail

A checkbox, which gets sent as "snailmail=yes" when it is checked:

<input type="checkbox" name="snailmail" value="yes">

Send confirmation by Canada Post

Checkboxes are not sent when they are unchecked.

A checkbox that is already checked:

<input type="checkbox" name="prevaddress" checked="checked">

Mailing address is same as residence

A group of radio buttons; they all have the same name, but different values. One should be initially marked "checked":

<input type="radio" name="question10" value="a" checked="checked">
<input type="radio" name="question10" value="b">
<input type="radio" name="question10" value="c">
<input type="radio" name="question10" value="d">
<input type="radio" name="question10" value="e">

Question 10.

Rate your satisfaction with this product:

1. Very satisfied
2. Satisfied
3. Neutral
4. Dissatisfied
5. Very dissatisfied

A second group of radio buttons:

<input type="radio" name="question11" value="yes" checked="checked">
<input type="radio" name="question11" value="no">

Question 11.

Have you ever been to Disney World? Yes No

A pop-up menu:

<select name="flavour">
  <option value="0" selected="selected">--Choose a flavour--</option>
  <option value="100">Vanilla</option>
  <option value="102">Strawberry</option>
  <option value="106">Rum and Raisin</option>
  <option value="114">Peach and Orange</option>
</select>

Your favourite flavor of ice cream? --Choose a flavour-- Vanilla Strawberry Rum and Raisin Peach and Orange

A multi-line text field, so that the user can type in a paragraph.  The number rows and columns can be specified:

<textarea name="comments" rows="10" cols="78">
</textarea>

Comments

A "hidden" input field, that is not shown in the browser window, but can be used to send additional information to a CGI app:

<input type="hidden" name="source" value="http://somesite.tld/">

A submit button, that sends the encoded form data to the CGI app. The "name" attribute is optional; the "value" attribute is the text shown on the button itself:

<input type="submit" value="Go!">

A reset button, which sets input fields to "default" values, or clears them if there are no default values. No information is sent to the server or CGI app.

<input type="reset" value="Start Over">

End the form:

</form>