IT 413 - Web Systems and Technologies

Form Submission Methods

• GET Method: Submits data as URL parameters; ideal for non-secure data and query strings.

  • Sensitive data should never be sent using GET, as it is visible in the URL.
  • URL length is limited (2048 characters).
  • Convenient for bookmarking.

• POST Method: Sends data in the body of the HTTP request; recommended for secure data.

  • No size limitations allow for large data submissions.
  • POST submissions cannot be bookmarked.

Required Attributes

• Name Attribute: Mandatory for each input field; without it, the value won’t be sent.

Form Attributes Overview

• accept-charset: Defines character encodings for form submission.
• action: URL to send form data upon submission.
• autocomplete: Enables or disables autocomplete feature.
• enctype: Specifies encoding for data submission (only for POST method).
• method: HTTP method for form data submission (GET or POST).
• name: Specifies the form's name.
• novalidate: Bypasses form validation on submission.
• rel: Describes relationship between linked resource and document.
• target: Determines where to display the response after form submission.

HTML Form Elements

• Common elements within <form>:
  • <input>, <label>, <textarea>, <select>, <button>

Label Element

• Element: <label>, enhances accessibility by linking text to form elements via for attribute.
• Improves usability for screen-readers.

Select Element

• Element: <select> defines a drop-down list with multiple <option> elements.
• Default behavior: The first option is selected.
• Use selected attribute to set a pre-selected option.
• Use multiple attribute to enable multiple selections.

Textarea Element

• Element: <textarea> defines a multi-line input field.
  • Attributes:
    • rows: Number of visible lines.
    • cols: Width of the textarea.
    • Can also be styled via CSS.

Button Element

• Element: <button> defines a clickable button; always specify type attribute.
• Default value for type if omitted is "submit".

Various Input Types

• Range: Input type for sliders, with optional min, max, and step attributes.
• Search: Serves as a typical text input for search fields.
• Tel: Designated for phone number inputs, typically formatted.
• Time: Allows users to select a time without a time zone.
• Url: Used for URLs; can auto-validate input.
• Week: Enables week and year selection.

Input Attributes

• value: Sets an initial value for an input field.
• readonly: Prevents modification of the field but allows reading and copying its value.
• disabled: Renders the field unclickable and does not send its value upon submission.
• size: Defines visible width of input fields in number of characters.
• maxlength: Limits the maximum number of characters that can be entered.

Important Notes

• Always consider security when choosing between GET and POST methods for form submissions.

• Each input element should have an associated name attribute to ensure data is sent correctly.### Input Attributes in HTML Forms

• JavaScript Feedback: Form attributes alone do not provide user feedback; JavaScript is essential for alerts and validations.

• max and min Attributes:

  • Specify minimum and maximum allowable values for input fields.
  • Applicable to input types: number, range, date, datetime-local, month, time, and week.
  • Combine these attributes to define a legal value range.

• multiple Attribute:

  • Allows users to enter multiple values in an input field.
  • Works with input types: email and file.

• pattern Attribute:

  • Defines a regular expression to validate input field values upon form submission.
  • Compatible with input types: text, date, search, url, tel, email, and password.
  • Use the title attribute to help users understand the expected format.

• placeholder Attribute:

  • Provides a short hint or sample value that describes the expected input format.
  • Visible in input fields before user interaction.
  • Works with input types: text, search, url, tel, email, and password.

• required Attribute:

  • Ensures an input field must be completed before form submission.
  • Works with various input types, including text, email, password, checkboxes, and files.

• step Attribute:

  • Defines legal number intervals for inputs. For example, step="3" restricts valid numbers to multiples of 3.
  • Best used alongside max and min attributes to enforce a range.

• autofocus Attribute:

  • Automatically focuses on a specified input field when the page loads.

• height and width Attributes:

  • Specify the dimensions of HTML elements.
  • Important for images to prevent layout changes during loading.

• list Attribute:

  • References a datalist element that contains predefined options for the associated input field.

• autocomplete Attribute:

  • Controls whether a form or input field should enable or disable autocomplete functionality, improving user experience by suggesting previously entered values.