INFO PAGE

Forms

Overview

Forms allow users to submit information to the site. This information is usually sent to a server script and saved in a database. Sometimes JavaScript will be used to process the form in the Browser. That would be more for personalization for instance where user settings are stored in Cookies or LocalStorage, for instance.

There is a form tag that holds all the form elements. Then each element has a tag and parameters such as the tags and parameters listed below. For samples of the new HTML 5 tags and parameters, see the SURVEY example.

BASIC FORM TAGS

01 <form method=post action=URL> The main form tag. Method can be post or get. Post is invisble and holds more data. Get shows on the command line and can be bookmarked or shared. The action parameter is the URL where the form data is sent.

02 <input name=id type=text value="start value" size=40> A basic text input. The name parameter is required to receive the data on the server.

03 <input name=id type=checkbox checked> A checkbox for individual boolean.

04 <input name=id type=radio checked> A radiobutton for multiple discrete options.

05 <select name=id multiple size=10> A pulldown menu - size makes this a select box. Do not include a size for a single line pulldown.

06 <option selected>Option One</option> An option tag - these are nested in the select to make the options for the select. This one will be selected.

07 <option value="2">Option Two</option> Another option - this one has a custom value rather than its label for a value.

08 <textarea name=id rows=5 cols=50>start value</textarea> A multi-line text area

09 <input name=id type=hidden value="extra info"> A hidden field for passing extra information not seen on the form.

10 <input name=id type=submit value="Submit"> A button that will submit the form.

HTML 5 FORM INPUT TYPES

11 type=number to let user pick numbers.

12 type=range to make a slider.

13 type=color to let user pick a color.

14 type=date to let user pick a date.

15 type=email auto checks email format.

16 type=url auto checks url format.

HTML 5 FORM INPUT PARAMETERS

17 min, max, step works with number and range.

18 placeholder adds text to start.

19 autocomplete suggests previous values.

20 required must fill in this field.

21 pattern tests with a regular expression.

22 list points to datalist tag for options.

HTML 5 FORM TAGS

23 <datalist id=myList> A hidden tag that keeps <option> tags for the list parameter.