Sideway
output.to from Sideway
Draft for Information Only

Content

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 with no control element

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.

    Code Sample of "text" control 'type'
    <form action="http://sideway.hk">
    Input Text: <input type="text" name="txtinput">
    </form>
    HTML web page:
    Input Text:
  • 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.

    Code Sample of "password" control 'type'
    <form action="http://sideway.hk">
    Password: <input type="password" name="password">
    </form>
    HTML web page:
    Password:
  • 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.

    Code Sample of "checkbox" control 'type'
    <form action="http://sideway.hk">
    Order:<br>
    <input type="checkbox" name="itema">item a<br>
    <input type="checkbox" name="itemb">item b<br>
    Remark:<br>
    <input type="checkbox" name="remark" value="rem1">rem 1<br>
    <input type="checkbox" name="remark" value="rem2">rem 2<br>
    <input type="checkbox" name="remark" value="rem3">rem 3<br>
    </form>
    HTML web page:
    Order:
    item a
    item b
    Remark:
    rem 1
    rem 2
    rem 3
  • 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:
    Select one of the following:
    choice 1
    choice 2
    choice 3
  • 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.

    Code Sample of single "submit" control 'type'
    <form action="http://sideway.hk">
    Input Text: <input type="text" name="txtinput"><br>
    <input type="submit">
    </form>
    HTML web page:
    Input Text:
    Code Sample of muiltiple "submit" control 'type'
    <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:
    Input Text:
    to submit or to exit without change
  • 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.

    Code Sample of "reset" control 'type'
    <form action="http://sideway.hk">
    Input Text: <input type="text" name="txtinput"><br>
    <input type="reset">
    <input type="submit">
    </form>
    HTML web page:
    Input Text:
  • 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.

    Code Sample of "file" control 'type'
    <form action="http://sideway.hk">
    Select file to upload: <input type="file" name="fileinput"><br>
    <input type="submit" value="Submit">
    </form>
    HTML web page:
    Select 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.

    Code Sample of "hidden" control 'type'
    <form action="http://sideway.hk">
    <input type="hidden" name="userid> value="1111">
    Select file to upload: <input type="file" name="fileinput"><br>
    <input type="submit" value="Submit">
    </form>
    HTML web page:
    Select file to upload:
  • 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.

    Code Sample of single "image" control 'type'
    <form action="http://sideway.hk">
    Input Text: <input type="text" name="txtinput"><br>
    press <input type="image" src="../../../../images/ltarrow.gif" > to submit
    </form>
    HTML web page:
    Input Text:
    press to submit
    Code Sample of multiple "image" control 'type'
    <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:
    Input Text:
    press or to submit
  • 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>
    HTML web page:
    press to open a new window
 

©sideway

ID: 110300030 Last Updated: 4/4/2011 Revision: 1 Ref:

close

References

  1. http://www.w3.org/TR/1999/REC-html401-1999, 1999, HTML 4.01 Specification: W3C Recommendation, updated 24 December 1999
close

Latest Updated LinksValid XHTML 1.0 Transitional Valid CSS!Nu Html Checker Firefox53 Chromena IExplorerna
IMAGE

Home 5

Business

Management

HBR 3

Information

Recreation

Hobbies 8

Culture

Chinese 1097

English 339

Reference 79

Computer

Hardware 249

Software

Application 213

Digitization 32

Latex 52

Manim 205

KB 1

Numeric 19

Programming

Web 289

Unicode 504

HTML 66

CSS 65

SVG 46

ASP.NET 270

OS 429

DeskTop 7

Python 72

Knowledge

Mathematics

Formulas 8

Algebra 84

Number Theory 206

Trigonometry 31

Geometry 34

Coordinate Geometry 2

Calculus 67

Complex Analysis 21

Engineering

Tables 8

Mechanical

Mechanics 1

Rigid Bodies

Statics 92

Dynamics 37

Fluid 5

Fluid Kinematics 5

Control

Process Control 1

Acoustics 19

FiniteElement 2

Natural Sciences

Matter 1

Electric 27

Biology 1

Geography 1


Copyright © 2000-2024 Sideway . All rights reserved Disclaimers last modified on 06 September 2019