<form method="[POST|GET]" action="myFilePath" name="myForm">

HTML forms are containers that hold various input elements and submit user data to a server for processing. The form element itself defines how and where the data should be sent.

The value of the attribute "METHOD" specifies the HTTP method to execute. The two most common methods are GET and POST:

• GET: Appends form data to the URL as query parameters. Best for non-sensitive data and small amounts of information.
• POST: Sends form data in the request body. Best for sensitive data, large amounts of information, or when modifying server data.

If this attribute is not specified, the GET method will be executed by default.

The value of the attribute "ACTION" specifies the path for a resource on the server that will process the form data.
The path works the same way as an hyperlink:

• Absolute path:
  If the path in the attribute "ACTION" starts by the "/" character, that's an absolute path for the resource requested.
  
  Example:
  

  <form action="/tutorials/index.htm">

  Is equivalent to:
  

  <form action="http://localhost/tutorials/index.htm">

• Relative path:
  If the web page (which contains the form attribute) is located somewhere on the server, let say :
  

  /[RELATIVE_PATH_OF_THE_CURRENT_PAGE]/

  Then, the resource requested must have the following path on the server :

  /[RELATIVE_PATH_OF_THE_CURRENT_PAGE]/myFilePath

  Example:
  

  <form action="tutorials/index.htm">

  Is equivalent to:
  

  <form action="http://localhost/[RELATIVE_PATH_OF_THE_CURRENT_PAGE]/tutorials/index.htm">

There can be more than one form on the same web page, but only one form can be submitted at once. Each form operates independently and maintains its own set of form controls.

HTML code:

<input type="text" name="myText1" value="aaa" readonly disabled />

Text input controls create single-line text fields for user input. They are the most common form elements and support various attributes for customization:

• name: Identifies the field when form data is submitted
• value: Sets the default text that appears in the field
• readonly: Prevents user modification while keeping the field focusable
• disabled: Prevents user interaction and excludes the field from form submission
• placeholder: Displays hint text when the field is empty
• maxlength: Limits the number of characters that can be entered

This control won't be sent with the form parameters, because it has the attribute "DISABLED".

HTML code:

<input type="password" name="myPassword1" value="bbb" />

Password input controls are similar to text inputs but mask the entered characters for security purposes. The characters are typically displayed as dots or asterisks to prevent shoulder surfing.

Key characteristics of password fields:

• Text is visually obscured but transmitted as plain text unless using HTTPS
• The field value is not restored when using browser back/forward navigation
• Autocomplete behavior may be restricted by browsers for security
• Should always be used with secure connections (HTTPS) in production

HTML code:

<input type="hidden" name="myHidden1" value="ccc" />

Hidden input controls store data that needs to be submitted with the form but should not be visible or editable by the user. They are commonly used for:

• Storing session tokens or CSRF protection tokens
• Maintaining state information across form submissions
• Passing additional context or metadata to the server
• Tracking form versions or timestamps

Hidden fields are included in form submissions but do not appear in the browser's rendered page. They can be viewed in the HTML source, so they should not contain sensitive information that users shouldn't see.

...
HTML code:

<textarea name="myTextarea1" rows="5" cols="35">
...
</textarea>

Textarea controls provide multi-line text input areas, ideal for longer content such as comments, descriptions, or messages. Unlike input elements, textarea uses opening and closing tags with the default content placed between them.

Important attributes:

• rows: Specifies the visible number of text lines
• cols: Specifies the visible width in characters
• wrap: Controls how text wrapping behaves (soft, hard, off)
• resize: CSS property that controls whether users can resize the textarea

Modern browsers typically allow users to resize textarea elements by dragging the corner, unless disabled through CSS.

HTML code:

<input type="radio" name="myRadio1" value="0" checked />
<input type="radio" name="myRadio1" value="1" />

Radio buttons allow users to select exactly one option from a group of mutually exclusive choices. They are ideal for questions where only one answer is permitted.

Key characteristics:

• All radio buttons in a group must share the same "name" attribute
• Each radio button should have a unique "value" attribute
• Only one radio button in a group can be selected at a time
• The "checked" attribute pre-selects a default option
• Clicking on labels associated with radio buttons will also select them

If there are multiple radio buttons with the same name on the same form, then only one can be selected. Selecting a different radio button automatically deselects the previously selected one.

HTML code:

<input type="checkbox" name="myCheckbox1" value="0" checked disabled />
<input type="checkbox" name="myCheckbox1" value="1" />

Checkbox controls allow users to select zero, one, or multiple options from a set of choices. Unlike radio buttons, checkboxes operate independently and multiple selections are permitted.

Behavior and characteristics:

• Each checkbox can be checked or unchecked independently
• Multiple checkboxes can share the same name to create groups
• The "checked" attribute pre-selects the checkbox
• The "disabled" attribute prevents user interaction
• Unchecked checkboxes are not included in form submissions

If the two checkboxes are checked then the parameter string generated from this set of checkboxes will look like this:

myCheckbox1=0&myCheckbox1=1

This demonstrates how multiple values with the same name are transmitted when multiple checkboxes in a group are selected.

V1 V2 V3

HTML code:

<select name="mySelect1">
    <option value="A">V1</option>
    <option value="B" selected>V2</option>
    <option value="C">V3</option>
</select>

Single-selection dropdown controls (select elements) provide a compact way to offer multiple choices while saving screen space. They display one option at a time and expand to show all available options when clicked.

Structure and behavior:

• The <select> element contains multiple <option> elements
• Each option has a "value" attribute (sent to server) and display text
• The "selected" attribute pre-selects a default option
• Only one option can be selected at a time
• Options can be grouped using <optgroup> elements

In this case the parameter string generated will look like this:

mySelect1=B

The value attribute of the selected option is what gets transmitted, not the display text.

V1 V2 V3

HTML code:

<select name="mySelect2" multiple>
    <option value="A" selected>V1</option>
    <option value="B">V2</option>
    <option value="C" selected>V3</option>
</select>

Multiple-selection dropdown controls allow users to select several options simultaneously. The "multiple" attribute transforms the select element's behavior and appearance.

Key differences from single-selection dropdowns:

• Multiple options can be selected simultaneously
• The control typically displays as a list box rather than a dropdown
• Users hold Ctrl (or Cmd on Mac) to select multiple non-adjacent options
• Users hold Shift to select ranges of adjacent options
• The "size" attribute can control the number of visible options

In this case the parameter string generated will look like this:

mySelect2=A&mySelect2=C

Each selected option generates a separate name-value pair in the form submission, similar to how multiple checkboxes with the same name behave.

HTML code:

<input type="button" name="myButton1" value="button" onclick="call_js_function();" />

Button controls create clickable buttons that perform custom actions through JavaScript. Unlike submit or reset buttons, regular buttons have no default behavior and require JavaScript event handlers to function.

Common uses for button controls:

• Triggering JavaScript functions for form validation
• Dynamic form manipulation (adding/removing fields)
• Opening modal dialogs or popup windows
• Performing calculations or data processing
• Navigation actions that don't involve form submission

The "onclick" attribute is commonly used to specify JavaScript code that executes when the button is clicked. Modern web development often uses event listeners instead of inline event attributes.

HTML code:

<input type="submit" name="mySubmit1" value="submit" />

Submit button controls trigger form submission when clicked. They are essential for sending form data to the server for processing. When activated, they cause the browser to collect all form data and send it to the URL specified in the form's action attribute.

Submit button characteristics:

• Automatically triggers form submission without requiring JavaScript
• Can be customized with different text using the "value" attribute
• Multiple submit buttons can exist in one form with different names/values
• Form validation (if present) runs before submission occurs
• Can be disabled to prevent form submission when conditions aren't met

If multiple submit buttons exist in a form, the name and value of the clicked button are included in the submitted data, allowing server-side code to determine which button was pressed.

HTML code:

<input type="reset" name="myReset1" value="reset" />

Reset button controls restore all form elements to their initial default values when clicked. This provides users with a quick way to clear their input and start over without manually clearing each field.

Reset button behavior:

• Restores all form controls to their original default values
• Clears any user-entered text from input fields and textareas
• Resets radio buttons and checkboxes to their initial checked state
• Returns select elements to their default selected options
• Does not submit the form or send any data to the server

Reset buttons are less commonly used in modern web applications, as users often prefer more granular control over clearing specific fields rather than resetting the entire form.