Forms

HTML “forms” are used to pass data to a server. The form tag can have the following attributes (plus more, including the “global” ones like class and “event” attributes):

  • action – specifies the url to which the submitted data should be sent
  • autocomplete – (new feature) on or off
  • method – get or post: specifies the HTTP method to use when sending form-data
  • name – specifies the name of a form
  • target – _blank, _self, _parent, or _top. Specifies where to display the response received after submitting the form

The following code enables the visitor to pick a colour by clicking on a colour palette. Quite where the info on the choice submitted goes I do not yet know. There is much more to learn about this!

Form 1 – colour palette.

Pick a colour:

Other “input type” choices are: button, checkbox, color, date, datetime, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week. There are many new features for forms in html5….meaning they may not be supported by all (older) browsers. There are also many other “inputs” other than “type” (see online documentation – but some of these, eg size, seem to be a bit finnicky)

A “submit” button is used to send form data to a server. The data is sent to the page specified in the form’s action attribute (blank in this case). The file defined in the action attribute usually does something with the received input. You can see here that when you press the submit button your choices appear in the browser address bar – more on this later.

Form 2 – entering a number (invalid entries will result in a screen prompt).

The following data submission not yet working…..

Enter a number:


For certain types a default value can be entered. This example uses input type “text” which has styling giving the input box a partial drop shadow……

Form 3 – text entry with default…several inputs grouped together in a “fieldset”

Your Favourite Flora

Enter the name of your favourite flower:

Enter the name of your favourite fruit:

(I am not yet sure how I would line up the above boxes nicely)

Form 4 – pick from a list of choices.

Pick your favourite from the following:



..and this seems to be an alternative way of doing the same thing (with Fiat selected as a default value…perhaps that is the difference?):


I am not including “submit” buttons from here on…..

Form 5 – entering a username and password

(Characters entered are asterisked out)

Username:

Password:

Form 6 – “radio” buttons: user can choose one option only

Indicate your favourite colour below (one only!):

Red
White
Blue

Form 7 – checklist: user can choose zero or any number of the options below

I have a bike
I have a car

Form 8 – creating an area where user can enter text….the box has a fixed size but unlimited text can be entered; it scrolls.

Enter the previous line of html all on one line; otherwise break tags appear in the text area round your default text.

Form 9 – with a button


Also of interest:
Security: The “keygen” element provides a secure way to authenticate users – see online documentation.
The “output” element makes it possible to show the result of a calculation.

The form tag is a block element

Below is a form added using the built-in contact form option:

A more complex form with a “Captcha” can be created using a plug-in.