HTML Forms

Forms


In the HTML world... the server sends data to you in the way of a HTML Document. Your browser parses that document and renders it as a web page on your screen.

Sounds good but how would you send data back to the server?

For that we have the HTML Form brought to us by the good folks at The Force... (The Internet Engineering Task Force or IETF).

In reality the Form tag is a container for form Elements... but it does specify two neccassary attributes that are needed to process the data...

action

Sepecifies a URL that points to a procedure that will process the data.

Each form has a mechanism that triggers the browser to package up and ship the data to the server that will receive it. Usually a button of type submit.

When that mechanism is triggered the browser packages the form data in name value pairs and sends it to whatever procedure is named in the URL specified by this attribute.

method

This attribute determines how the browser will package up the data. There are two options:

  • GET will package the data in the URL (as attributes)
  • POST will store the data internal to the request in one large parameter string

There are consideration for each... but POST is better.

This would be a basic form or form container:

<form action="http://example.com/formProcess" method="POST">
</form>

CREATED 2020-09-12 08:12:16.0

010-00-02-C5

UPDATED 2020-09-12 08:12:28.0

Attributes


There are a few other attributes you may want to use... like the target (where the results are going to be displayed). This is a list of the attributes for the form tag:

Attribute Values Description
accept-charset charset The character set the form should use (UTF-8)
action URL Where the form data goes when the submit button is clicked
autocomplete on
off
Should the browser complete fields based on past input
enctype application/x-www-form-urlencoded
multipart/form-data
text/plain
How the form data is going to be encoded when sent to the server
method GET
POST
How the data is going to be packed up when sent to the server. Get puts the data in the URL as parameters while POST encorporates the data in the transaction.
name text The name of the form. This is used by the fields or elements of the form
novalidate none Tells the browser not to validate any of the data. See the input elements
rel external
help
license
next
nofollow
noopener
norefferer
opener
prev
search
Relationship of the form to a linked resource
target _blank
_self
_parent
_top
framename
Where the data is going to be displayed

The form element also supports the HTML Gobal Attributes

CREATED 2020-09-12 08:59:22.0

010-00-02-C6

UPDATED 2020-09-19 10:32:52.0

Events


Events generally point at a script.    onBlur='losingFocusScript(this)' But it can also support inline javascript...    onBlur="document.getElementById('someElementId').value='FocusLost'.


The form tag supports these events...

Name Fires when...
onBlur the element looses focus
onChange when the elements value changes
onContextMenu when the context menu is triggered
onFocus when the element gains focus
onInput when data is entered
onInvalid when the element is invalid
onReset when a reset action is initialted
onSearch when input is made in a search field
onSelect when an item has been selected in an element
onSubmit when a submit button has been clicked

The form element also supports the HTML Gobal Events

CREATED 2020-09-19 10:32:36.0

010-00-03-18

UPDATED 2020-09-19 10:32:45.0

Knowledge

L
I
N
K
S

DBID: db.wam

Page Server: Ithica

©2012 Leistware Data Systems

      Hello anonymous