• Documentation

    Elanat Documentation
    The most important feature of Elanat is its add-ons-oriented structure. Add-ons-oriented structure allows you to create your own Add-ons without conflicting with Eanat core.

    WebForms Core Technology - Input place

    Input Place (WebForms Selector Language – WSL)

    Input Place is a selector abstraction used by WebForms Core to identify one or more HTML elements that will be modified, queried, or bound to events at runtime.

    In WebForms APIs, InputPlace is typically represented as a string parameter, but it can also be constructed programmatically using the InputPlace helper class.

    Input Place supports both the WebForms Selector Language (WSL)—a lightweight selector language designed by Elanat—and standard CSS selector patterns.

    Note: WebForms Core also defines an Output Place pattern, which follows the same conceptual model but is used for rendering and output targeting.

    Input Place Selection Modes

    1- Selection by id (WSL)

    2- Selection by name (WSL)

    3- Selection by tag name (WSL)

    4- Selection by class name (WSL)

    5- Selection by query (CSS Selector)

    6- Selection of multiple tags by query (CSS Selector)

    7- Selection current (WSL)

    8- Selection target (WSL)

    9- Selection root (WSL)

    10- Selection window (WSL)

    11- Selection head (WSL)

    12- Selection screen orientation (WSL)

    13- Selection upper (WSL)

    We can also nest some of the above input places

    We can specify InputPlace in two ways:


    1- Using the InputPlace class

    The InputPlace class is a class that is added in the same file as the WebForms class. The InputPlace class has static methods that can access all modes for selecting tags.

    2- Writing the input place pattern directly

    Writing the input place pattern directly is more professional and produces less code, but it may be difficult for beginners to understand.

    Selecting Tag(s)

    The code below shows an HTML page, and the examples that follow are based on this page.

    Example
    Selecting by id

    Using the Id method on the InputPlace class, we can set the InputPlace parameter in the methods of the WebForms class.
    InputPlace.Id(Id)

    Example:

    By writing the input place pattern directly, we can also set the InputPlace parameter in the methods of the WebForms class. The id string is written directly.
    Id

    Example:

    Selecting by name

    Using the Name method on the InputPlace class, we can set the InputPlace parameter in the methods of the WebForms class.
    InputPlace.Name(Name, {Index})

    Example:

    You can also specify the index. If you don't specify the index, 0 is assumed and it will determine the first tag.

    You can also specify all tags by name.

    By writing the input place pattern directly, we can also set the InputPlace parameter in the methods of the WebForms class. The name string is written inside open and close parentheses.
    (Name)

    Example:

    You can also specify the index. The number written after the closing parentheses specifies the index. If you don't specify the index, 0 is assumed and it will determine the first tag.

    You can also specify all tags by name. To select all tags, enter an asterisk (*) after the closing parentheses character.

    Selecting by tag name

    Using the Tag method on the InputPlace class, we can set the InputPlace parameter in the methods of the WebForms class.
    InputPlace.Tag(Tag, {Index})

    Example:

    You can also specify the index. If you don't specify the index, 0 is assumed and it will determine the first tag.

    You can also specify all tags by tag name.

    By writing the input place pattern directly, we can also set the InputPlace parameter in the methods of the WebForms class. The tag name is written between the less than and greater than characters.
    <Tag>

    Example:

    You can also specify the index. The number written after the greater than character specifies the index. If you don't specify the index, 0 is assumed and it will determine the first tag.

    You can also specify all tags by tag name. To select all tags, enter an asterisk (*) after the greater than character.

    Selecting by class name

    Using the Class method on the InputPlace class, we can set the InputPlace parameter in the methods of the WebForms class.
    InputPlace.Class(Class, {Index})

    Example:

    You can also specify the index. If you don't specify the index, 0 is assumed and it will determine the first tag.

    You can also specify all tags by class name.

    By writing the input place pattern directly, we can also set the InputPlace parameter in the methods of the WebForms class. The class name is written between the braces characters.
    {Class}

    Example:

    You can also specify the index. The number that is written after the closing bracket character determines the index. If you don't specify the index, 0 is assumed and it will determine the first tag.

    You can also specify all tags by class name. To select all tags, enter an asterisk (*) after the closing bracket character.

    Selecting by query

    Using the Query method on the InputPlace class, we can set the InputPlace parameter by css selector in the methods of the WebForms class.
    InputPlace.Query(Query)

    Example:

    By writing the input place pattern directly, we can also set the InputPlace parameter in the methods of the WebForms class. The asterisk (*) character must be written before writing the query string.
    *Query

    Example:

    Note: When writing the query pattern directly, you must use the string ($[eq];) instead of the equals character (=).

    Selecting by query all

    Using the QueryAll method on the InputPlace class, we can set the InputPlace parameter in the methods of the WebForms class. Using this method, we can select multiple tags by css selector.
    InputPlace.QueryAll(Query)

    Example:

    By writing the input place pattern directly, we can also set the InputPlace parameter in the methods of the WebForms class. The open square brackets character ([) must be written before writing the query string.
    [Query

    Example:

    Note: When writing the query all pattern directly, you must use the string ($[eq];) instead of the equals character (=).

    Example:
    Instead of input[type=radio]
    Use input[type$[eq];radio]
    Selecting by current

    Using the Current field on the InputPlace class, we can set the InputPlace parameter in the methods of the WebForms class. Current selects only the tag whose event was fired, regardless of the child tag.
    InputPlace.Current

    Example:

    By writing the input place pattern directly, we can also set the InputPlace parameter for current tag, by writing the dollar sign character ($).
    $

    Example:

    Selecting by target

    Using the Target field on the InputPlace class, we can set the InputPlace parameter in the methods of the WebForms class. Target selects the tag whose event was fired. If the event tag contains multiple child tag, Target selects the last nested tag in the event tag.
    InputPlace.Target

    Example:

    By writing the input place pattern directly, we can also set the InputPlace parameter for target tag, by writing the exclamation mark character (!).
    !

    Example:

    Note: Current refers to the element that owns the event handler, while Target refers to the deepest nested element that triggered the event.

    Selecting by root

    Using the Root field on the InputPlace class, We can choose the document.
    InputPlace.Root

    Example:

    By writing the input place pattern directly, we can also set the InputPlace parameter for document, by writing the tilde character (~).
    ~

    Example:

    Note: Normally, the root selects the document object. If you use the transient DOM property for a tag, the root selects the same tag.

    Selecting by window

    Using the Window field on the InputPlace class, We can choose the window.
    InputPlace.Window

    Example:

    By writing the input place pattern directly, we can also set the InputPlace parameter for window, by writing the backtick character (`).
    `

    Example:

    Note: Window selection allows binding events outside the DOM lifecycle, such as resize and scroll.

    Selecting by head

    Using the Head field on the InputPlace class, we can set the head section in HTML as InputPlace parameter in the methods of WebForms class.
    InputPlace.Head

    Example:

    By writing the input place pattern directly, we can set the head section in HTML as InputPlace parameter in the methods of WebForms class by writing the caret character (^).
    ^

    Example:

    Selecting by screen orientation

    Using the ScreenOrientation field on the InputPlace class, we can choose the screen orientation.
    InputPlace.ScreenOrientation

    Example:

    By writing the input place pattern directly, we can also set the InputPlace parameter for screen orientation, by writing the percent character (%).
    %

    Example:

    Note: ScreenOrientation is useful for responsive and device-aware behaviors.

    Selecting by upper

    Using the Upper field on the InputPlace class, We repeat the previously entered InputPlace.
    InputPlace.Upper

    Example:

    By writing the input place pattern directly, we can also set the InputPlace parameter above in subsequent methods of the WebForms class, by writing the dash character (-).
    -

    Example:

    Note: Using upper reduces bandwidth usage.

    Selecting by nested input place

    Using the AppendPlace extension method on the InputPlace class, we can set the InputPlace parameter in the methods of the WebForms class. Using this method, we can select the tag through the parent.
    InputPlace.AppendPlace(InputPlace)

    Example:

    By writing the input place pattern directly, we can also set the InputPlace parameter in the methods of the WebForms class. Each input place must be separated by a vertical bar character.
    |

    Example:

    Selecting parent tag

    Using the AppendParent extension method on the InputPlace class, we can set the InputPlace parameter in the methods of the WebForms class. Using this method, we can select the parent tag.
    InputPlace.AppendParent(InputPlace)

    Example:

    In the example above, the color of the parent tag (here the "form" tag) becomes light green.

    We can select the parent tag by directly writing the input place pattern. The slash character (/) must be added before InputPlace.
    /

    Example:

    Note: We can use the slash character (/) repeatedly to select higher parent tags.

    Note: AppendPlace traverses downward (child selection), while AppendParent traverses upward in the DOM tree.

    Design Notes

    • WSL is not a DOM selector replacement; it is a server-driven targeting language optimized for minimal payload and deterministic execution.
    • Direct InputPlace patterns reduce payload size compared to object-based construction and are recommended for production use.
    • The Upper (-) selector allows command chaining without resending selectors, significantly reducing network bandwidth.
    • Current ($) and Target (!) enable precise event-context targeting without relying on fragile DOM traversal.
    • Nested InputPlace patterns provide explicit traversal and avoid ambiguity common in complex CSS selectors.

    • Elanat is a leading company in the field of development and efficiency of web-based systems, which plays an important role in the development of the web in the world by providing free and open source frameworks, tools and libraries. CodeBehind Framework, WebForms Core technology, Elanat CMS and WebFormsJS are part of Elanat's bold and revolutionary products.

      Download