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.

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