HTML Form - 1
attributes 'action' and 'method' of <form> element Form Control: <input> element
HTML Form - 1
An interactive form division is defined by a <form>
element in the HTML document to submit data to the server. Besides text contents, a HTML form
should contain child form control elements, that is <input>, <select>, <textarea>,
<button> for user input.
attributes 'action' and 'method' of <form> element
Attributes 'action' and 'method' are the two required attributes of
the <form> form. The 'action' attribute specifies the server-side form
handler used to process the input form. The 'method' specifies the HTTP method
used to submit the input form. For the attribute 'method', there are two
submission methods, "get", and "post" and the "get' method is the default.
Code Sample of form division:
<form action="http://sideway.hk/" method="get">
<p>
Form with no control element
</p>
</form>
HTML web page:
Form Control: <input> element
The <input> element is the key child control element of the
<form> element. The <input> element is used to define the most common control
element of a form. The control type is specified by the attribute 'type' of the
<input> element. The possible values of attribute 'type' are "text", "password",
"checkbox", "radio", "submit", "reset", "file", "hidden", image", and "button".
The default value of the attribute 'type' is "text".
Control types of <input> element:
The "text" control 'type' is used to define a single line text input
field in the form.
The "password" control 'type' is used to define a single line text
input field as the "text" control type in the form. The input text is the value
of the "password" control but the value is rendered as asterisks to hide the
entered characters.
The "checkbox" control 'type' is used to define an input checkbox in
the form. A checkbox is a "on-off" toggle switch which can be toggled by the
user. A checkbox is checked when the checkbox is toggled "on".
One or more checkboxs can share the same control 'name' attribute in a form. One
or more checkboxes in the form can be checked by user. Therefore, several values
can be checked by the user for the same control 'name' attribute. But only
the values of "on" checkbox controls are submitted when a form is submitted.
The "radio" control 'type' is used to define a radio input button in
the form. A radio button is a "on-off" toggle switch which can be toggled by the
user. A radio button is checked when the radio button is toggled "on".
Although one or more radio buttons can share the same control 'name' attribute
in a form. And one or more radio buttons in the form can be checked by user.
Unlike the "checkbox" control, for a set of radio buttons with the same
control 'name' attribute, only one radio button can be selected to switch "on",
while all others will be switched "off".
And similar to "checkbox" control type, only the values of "on" radio
button controls are submitted when a form is submitted.
Code Sample of "radio" control 'type'
<form action="http://sideway.hk"> Select one of the following:<br> <input type="radio" name="choice" value="choice1">choice 1<br> <input type="radio" name="choice" value="choice2">choice 2<br> <input type="radio" name="choice" value="choice3">choice 3<br> </form>
HTML web page:
The "submit" control 'type' is used to define a submit button in the
form. When a submit button is activated, the form data is submitted to the
server.
For simple form submission, only one submit button is needed. However more
submit buttons can also be used in a form as a choice of form submission. This
can be done by sharing the submit button with same 'name' attribute but with
different 'value' attribute. The value of submit button can then be submitted
together with the form submission for processing.
<form action="http://sideway.hk"> Input Text: <input type="text" name="txtinput"><br> <input type="submit" name="checkout" value="Confirmed"> to submit or <input type="submit" name="checkout" value="Quit"> to
exit without change </form>
HTML web page:
The "reset" control 'type' is used to define a reset button in the
form. When a reset button is activated, all form controls are reset to their
initial values.
The "file" control 'type' is used to define a file select control in
the form. A text input field and a "Browse..." button is created by the
"file" control for file upload. When the "file" control 'type' is
activated, a "file upload" GUI is displayed for the user to choose file to
upload.
The "hidden" control 'type' is used to define a hidden control in the
form. A hidden control is not rendered by the browser. Therefore the control and
its value is not visible for the user. However, hidden controls can be used to
store default values by authors for exchanging information between client and
server.
The "image" control 'type' is used to define a graphical submit button
in the form. The standard "button" is rendered as the specified image. Besides,
when the graphical submit button is activated by a pointing device, the values
of clicking coordinates measured from the top left corner of the image are also
submitted.
For simple form submission, only one
image is needed. However more
images can also be used in a form as a choice of form submission. This
can be done by assigning different 'name' attribute for different image
source. The name of image source can then be submitted
together with the form submission for processing.
<form action="http://sideway.hk"> Input Text: <input type="text" name="txtinput"><br> press <input type="image" src="../../../../images/arrowlt.gif" > or <input type="image" src="../../../../images/arrowrt.gif" > to submit </form>
HTML web page:
The "button" control 'type' is used to define a push button in the
form. A clickable button is created with no default function like other specific
functional button. However, the 'event' attributes of each clickable button can
be used to activate the associated clinet-side scripts when the event of the
button to trigger
Code Sample of "button" control 'type'
<form action="http://sideway.hk"> press <input type="button" onclick="window.open('http://sideway.hk')" > to open a new window </form>
Nu Html Checker 
53 
na 
na