Skip to content

Chapter 1: Creating HTML Forms (KompoZer) 📝

This cheat sheet covers the essential tags, attributes, and KompoZer steps for Chapter 1 of the GSEB Std 12 Computer Studies syllabus.

🎯 Key Concepts

  • Form: A container used to collect user input.
  • KompoZer: An open-source, WYSIWYG (What You See Is What You Get) web editor.
  • GSEB Context: Focuses on basic form design and data collection methods.

🛠️ HTML Form Elements & Attributes

Tag Key Attributes Detailed Description
<form> action, method, name The main container. name is used to refer to the form in scripts.
<input> type, name, value, checked Universal input tag. value defines the default data or button text.
<label> for Links text to an input field using its id. Improves accessibility.
<textarea> rows, cols, name Multi-line text input. rows (height) and cols (width).
<select> name, size, multiple Drop-down list. size shows multiple rows; multiple allows multiple selection.
<option> value, selected Single item in a list. selected makes it the default choice.

Input Types (type="...")

  • text: Single-line text. Use maxlength to limit character count.
  • password: Masked text (dots/stars). Use for sensitive data.
  • radio: Circular button for single selection from a group (must share same name).
  • checkbox: Square box for multiple selections.
  • submit: Button that triggers the action URL.
  • reset: Button that clears all fields to their initial values.

⚙️ Form Methods: GET vs POST

Feature GET Method POST Method
Default Yes, it is the default method. No.
Data in URL Visible (e.g., ?name=vishnu). Invisible (sent in HTTP body).
Size Limit Limited (around 2048 characters). No size limit (suitable for large files).
Security Insecure (not for passwords). More secure for sensitive data.

🖥️ KompoZer Toolbars & Modes

Toolbars

  • Composition Toolbar: Used for creating new files, opening, saving, and publishing.
  • Format Toolbar 1 & 2: Used for formatting text (bold, italic, bullets, alignment).
  • Edit Toolbar: Used for quick editing tasks.
  • Page Tab Bar: Used to switch between multiple open web pages.

Edit Mode Tabs (Bottom of Screen)

  1. Normal: Similar to a browser view. Shows table outlines.
  2. HTML Tags: Shows specific HTML tags for elements.
  3. Source: Shows the raw HTML code (for manual editing).
  4. Preview: Shows exactly how it will look in a browser (scripts might not run).

💡 Board Focus: High-Weightage Points 👔

  • MCQ Alert: The <label> tag uses the for attribute to match an input's id.
  • MCQ Alert: In <textarea>, the content goes between the opening and closing tags.
  • MCQ Alert: The action attribute defines where the data goes; method defines how.
  • MCQ Alert: To make a radio button selected by default, use the checked attribute.
  • KompoZer Tip: Use the "Form Properties" dialog to set the form's Name, Action, and Method.

Board Exam Secret

GSEB often asks about the "initial values" of a form. Remember that the Reset button doesn't just empty the form; it reverts it to the values it had when the page loaded!

Std 12 Hub | Next: Chapter 2 Cheat Sheet