Wraps input field in input group container that allows prepending and
 appending text or html. Example:

   text_field(:value, bootstrap: {prepend: "$.$$"}})
   text_field(:value, bootstrap: {append: {html: "<button>Go</button>"}}})
3429
def draw_input_group(bootstrap, errors, &block)
      prepend_html  = draw_input_group_content(bootstrap, :prepend)
      append_html   = draw_input_group_content(bootstrap, :append)

      help_text = draw_help(bootstrap.help)

      # Not prepending or appending anything. Bail.
      if prepend_html.blank? && append_html.blank?
        content = capture(&block)
        content << errors     if errors.present?
        content << help_text  if help_text.present?
        return content
      end

      content = "".html_safe
      content << content_tag(:div, class: "input-group") do
        concat prepend_html if prepend_html.present?
        concat capture(&block)
        concat append_html  if append_html.present?
        concat errors       if errors.present?
      end
      content << help_text if help_text.present?
      content
    end
669701
function makeInputText(type, classes, placeholder, defaultValue, func, useCapture, listners) {
  let workClasses = [];
  if (classes !== null) {
    workClasses = workClasses.concat(classes);
  }

  let ele = null;
  if (type === "text") {
    workClasses.push("input-text");
    ele = createElementWithClass("input", workClasses);
  } else if (type === "search") {
    workClasses.push("input-search");
    ele = createElementWithClass("input", workClasses);
  } else if (type === "textarea") {
    workClasses.push("input-textarea");
    ele = createElementWithClass("textparea", workClasses);
  } else {
    return null;
  }
  ele.type = type;
  if (placeholder !== null) {
    ele.placeholder = placeholder;
  }
  if (defaultValue !== null) {
    ele.defaultValue = defaultValue;
  }

  if (!isEmptyObject(func)) {
    listners.push(setEventListener(ele, "input", func, useCapture));
  }
  return ele;
}
1112675
public function recursiveRender()
    {
        $field_input = $this->template->cloneRegion('InputField');
        $field_no_label = $this->template->cloneRegion('InputNoLabel');
        $labeled_group = $this->template->cloneRegion('LabeledGroup');
        $no_label_group = $this->template->cloneRegion('NoLabelGroup');

        $this->template->del('Content');

        foreach ($this->elements as $el) {

            // Buttons go under Button section
            if ($el instanceof \atk4\ui\Button) {
                $this->template->appendHTML('Buttons', $el->getHTML());
                continue;
            }

            if ($el instanceof \atk4\ui\FormLayout\Generic) {
                if ($el->label && !$el->inline) {
                    $template = $labeled_group;
                    $template->set('label', $el->label);
                } else {
                    $template = $no_label_group;
                }

                if ($el->width) {
                    $template->set('width', $el->width);
                }

                if ($el->inline) {
                    $template->set('class', 'inline');
                }
                $template->setHTML('Content', $el->getHTML());

                $this->template->appendHTML('Content', $template->render());
                continue;
            }

            // Anything but fields or explicitly defined fields gets inserted directly
            if (!$el instanceof \atk4\ui\FormField\Generic || !$el->layoutWrap) {
                $this->template->appendHTML('Content', $el->getHTML());
                continue;
            }

            $template = $field_input;
            $label = $el->caption ?: $el->field->getCaption();

            // Anything but fields gets inserted directly
            if ($el instanceof \atk4\ui\FormField\CheckBox) {
                $template = $field_no_label;
                $el->template->set('Content', $label);
                /*
                $el->addClass('field');
                $this->template->appendHTML('Fields', '<div class="field">'.$el->getHTML().'</div>');
                continue;
                 */
            }

            if ($this->label && $this->inline) {
                $el->placeholder = $label;
                $label = $this->label;
                $this->label = null;
            } elseif ($this->label || $this->inline) {
                $template = $field_no_label;
                $el->placeholder = $label;
            }

            // Fields get extra pampering
            $template->setHTML('Input', $el->getHTML());
            $template->trySet('label', $label);
            $template->trySet('label_for', $el->id.'_input');
            $template->set('field_class', $el->getFieldClass());

            if ($el->field->required) {
                $template->append('field_class', 'required ');
            }

            if (isset($el->width)) {
                $template->append('field_class', $el->width.' wide ');
            }

            if ($el->hint && $template->hasTag('Hint')) {
                $hint = new \atk4\ui\Label([null, 'pointing', 'id'=>$el->id.'_hint']);
                if (is_object($el->hint) || is_array($el->hint)) {
                    $hint->add($el->hint);
                } else {
                    $hint->set($el->hint);
                }
                $template->setHTML('Hint', $hint->getHTML());
            } elseif ($template->hasTag('Hint')) {
                $template->del('Hint');
            }

            $this->template->appendHTML('Content', $template->render());
        }

        // Now collect JS from everywhere
        foreach ($this->elements as $el) {
            if ($el->_js_actions) {
                $this->_js_actions = array_merge_recursive($this->_js_actions, $el->_js_actions);
            }
        }
    }
956452
public static AppendInsert append(String field, AppendInsertLiteral value) {
        return new AppendInsert("$append", field).more(value);
    }
769874
function render(element, opts) {
    opts = opts || {};

    var prepend = opts.prepend;
    var model = opts.model || {};
    var indentLevel = opts.indentLevel || 0;
    var isPretty = opts.isPretty;
    var jtPrintIndent = isPretty ? '\t' : '';
    var jtPrintNewline = isPretty ? '\n' : '';
    var indent = '', i, len, prop;
    var p = [];  // p is going to be our concatenator for the HTML string

    // if no element, then no HTML so return empty string
    if (!element) { return ''; }

    // if already a string, just return it
    if (utils.isString(element)) { return element; }

    // if an array, wrap it
    if (utils.isArray(element)) { element = naked(element, null); }

    // set the indentation level to the current indent
    if (isPretty && indentLevel) {
        for (i = 0; i < indentLevel; i++) {
            indent += jtPrintIndent;
        }
    }

    // if we are prepending some string, add it first
    if (prepend) {
        p.push(indent, prepend, jtPrintNewline);
    }

    // starting tag open
    if (element.tag) {
        p.push(indent, '<', element.tag);
    }

    // all tag attributes
    if (element.attributes) {
        for (prop in element.attributes) {
            if (element.attributes.hasOwnProperty(prop)) {

                if (element.attributes[prop] === null) {
                    p.push(' ', prop);
                }
                else {
                    p.push(' ', prop, '="', element.attributes[prop], '"');
                }
            }
        }
    }

    // if no children or text, then close the tag
    if (element.tag && !element.children && (element.text === undefined || element.text === null)) {

        // for self closing we just close it, else we add the end tag
        if (selfClosing.indexOf(element.tag) > -1) {
            p.push('/>', jtPrintNewline);
        }
        else {
            p.push('></', element.tag, '>', jtPrintNewline);
        }
    }
    // else we need to add children or the inner text
    else {

        // if a tag (i.e. not just a string literal) put end bracket
        if (element.tag) { p.push('>'); }

        // if children, we will need to recurse
        if (element.children) {
            if (element.tag) { p.push(jtPrintNewline); }

            // recurse down for each child
            for (i = 0, len = element.children.length; i < len; ++i) {
                p.push(render(element.children[i], {
                    indentLevel:    element.tag ? indentLevel + 1 : indentLevel,
                    isPretty:       isPretty,
                    model:          model
                }));
            }

            if (element.tag) { p.push(indent); }
        }

        // if text, simply add it
        if (element.text !== null && element.text !== undefined) { p.push(element.text); }

        // finally if a tag, add close tag
        if (element.tag) {
            p.push('</', element.tag, '>', jtPrintNewline);
        }
    }

    return p.join('');
}
192746
def button_for_js(label, js, html_options={})
      tag(:input, {type: 'button', value: label, onClick: js}.merge(
        html_options))
    end
317562
function FormInput(props: Props): React.Node {
  const {
    className,
    name,
    icon,
    position = "prepend",
    valid,
    tick,
    invalid,
    cross,
    error,
    placeholder,
    value,
    min,
    max,
    minlength,
    maxlength,
    checked,
    onChange,
    onMouseEnter,
    onMouseLeave,
    onPointerEnter,
    onPointerLeave,
    onFocus,
    onBlur,
    onKeyPress,
    onKeyUp,
    onKeyDown,
    onCopy,
    onCut,
    onPaste,
    disabled,
    readOnly,
    autoFocus,
    required,
    label,
  } = props;
  const type = props.type || "text";

  const classes = cn(
    {
      "form-control": type !== "checkbox" && type !== "radio",
      "custom-control-input": type === "checkbox" || type === "radio",
      "is-valid": valid,
      "state-valid": tick,
      "is-invalid": invalid || !!error,
      "state-invalid": cross || !!error,
    },
    className
  );

  const feedback = error || props.feedback;

  const allInputProps = {
    name,
    className: classes,
    type,
    placeholder,
    value,
    min,
    max,
    minlength,
    maxlength,
    disabled,
    readOnly,
    autoFocus,
    required,
    onChange,
    onMouseEnter,
    onMouseLeave,
    onPointerEnter,
    onPointerLeave,
    onFocus,
    onBlur,
    onKeyPress,
    onKeyUp,
    onKeyDown,
    onCopy,
    onCut,
    onPaste,
  };

  const contents = !icon ? (
    <React.Fragment>
      {type === "checkbox" || type === "radio" ? (
        <input {...allInputProps} checked={checked} />
      ) : (
        <input {...allInputProps} />
      )}
      {feedback && <span className="invalid-feedback">{feedback}</span>}
    </React.Fragment>
  ) : (
    <React.Fragment>
      <div className="input-icon">
        {position === "prepend" && (
          <span className="input-icon-addon">
            <Icon name={icon} />
          </span>
        )}
        <input {...allInputProps} />
        {position === "append" && (
          <span className="input-icon-addon">
            <Icon name={icon} />
          </span>
        )}
      </div>
      {feedback && <span className="invalid-feedback">{feedback}</span>}
    </React.Fragment>
  );

  return label ? <FormGroup label={label}>{contents}</FormGroup> : contents;
}
55306
def add_bootstrap_class(field):
    
    if not isinstance(field.field.widget, (
        django.forms.widgets.CheckboxInput,
        django.forms.widgets.CheckboxSelectMultiple,
        django.forms.widgets.RadioSelect,
        django.forms.widgets.FileInput,
        str
    )):
        field_classes = set(field.field.widget.attrs.get('class', '').split())
        field_classes.add('form-control')
        field.field.widget.attrs['class'] = ' '.join(field_classes)
    return field
1176776
def caseadilla_text_field form, obj, attribute, options = {}
      caseadilla_form_tag_wrapper(form.text_field(attribute, strip_caseadilla_options(options_hash_with_merged_classes(options, 'form-control'))), form, obj, attribute, options).html_safe
    end
102251
def element(label = '&nbsp;', value = '', type = 'text_field', &block)
      value += @template.capture(&block) if block_given?
      %{
        <div class='control-group'>
          <label class='control-label'>#{label}</label>
          <div class='controls'>
            #{value}
          </div>
        </div>
      }.html_safe
    end
444635
def inputs(form_args):
    
    element = []
    for name, value in form_args.items():
        element.append(
            '<input type="hidden" name="{}" value="{}"/>'.format(name, value))
    return "\n".join(element)
308785
function TagsInput(element, options) {
    this.itemsArray = [];

    this.$element = $(element);
    this.$element.hide();

    this.isSelect = (element.tagName === 'SELECT');
    this.multiple = (this.isSelect && element.hasAttribute('multiple'));
    this.objectItems = options && options.itemValue;
    this.placeholderText = element.hasAttribute('placeholder') ? this.$element.attr('placeholder') : '';
    this.inputSize = Math.max(1, this.placeholderText.length);

    this.$container = $('<div class="bootstrap-tagsinput"></div>');
    this.$input = $('<input type="text" placeholder="' + this.placeholderText + '"/>').appendTo(this.$container);

    this.$element.after(this.$container);

    var inputWidth = (this.inputSize < 3 ? 3 : this.inputSize) + "em";
    this.$input.get(0).style.cssText = "width: " + inputWidth + " !important;";
    this.build(options);
  }
1248607
function form(bind, el, param, value) {
  var node = element('input');

  for (var key in param) {
    if (key !== 'signal' && key !== 'element') {
      node.setAttribute(key === 'input' ? 'type' : key, param[key]);
    }
  }
  node.setAttribute('name', param.signal);
  node.value = value;

  el.appendChild(node);

  node.addEventListener('input', function() {
    bind.update(node.value);
  });

  bind.elements = [node];
  bind.set = function(value) { node.value = value; };
}
928515
function FormWithSingleInputAndButton({
  formProps,
  inputProps,
  buttonProps,
}: Props): React.Node {
  const button = React.createElement(Button, buttonProps);
  return (
    <Form {...formProps}>
      <Form.InputGroup inputProps={inputProps} append={button} />
    </Form>
  );
}
457722
function() {
      // Build the inputEx field
      this._inputExField = inputEx(this._inputExFieldDef);
      this.getContainerEl().appendChild(this._inputExField.getEl());
		
		// Locals for Save/Cancel Buttons
		this.LABEL_SAVE = inputEx.messages.saveText;
		this.LABEL_CANCEL = inputEx.messages.cancelText;
   }
114680
def prepend_field(self, field_name, list_value):
    """"""
    return self._single_list_field_operation(field_name, list_value, prepend=True)
1359577
function(input, options) {
        input = $(input);

        if (input.prop('tagName').toLowerCase() !== 'input') {
            throw new Error('TypeAhead must be initialized on an input field');
        }

        var self = this;

        options = this.setOptions(options, input);
        this.element = this.createElement()
            .attr('role', 'listbox')
            .aria('multiselectable', false);

        // The input field to listen against
        this.input = input;

        // Use default callbacks
        $.each({ sorter: 'sort', matcher: 'match', builder: 'build' }, function(key, fn) {
            if (options[key] === false) {
                return;
            }

            var callback;

            if (options[key] === null || $.type(options[key]) !== 'function') {
                callback = self[fn];
            } else {
                callback = options[key];
            }

            options[key] = callback.bind(self);
        });

        // Prefetch source data from URL
        if (options.prefetch && $.type(options.source) === 'string') {
            var url = options.source;

            $.getJSON(url, options.query, function(items) {
                self.cache[url] = items;
            });
        }

        // Enable shadow inputs
        if (options.shadow) {
            this.wrapper = this.render(this.options.shadowTemplate);

            this.shadow = this.input.clone()
                .addClass('is-shadow')
                .removeAttr('id')
                .prop('readonly', true)
                .aria('readonly', true);

            this.input
                .addClass('not-shadow')
                .replaceWith(this.wrapper);

            this.wrapper
                .append(this.shadow)
                .append(this.input);
        }

        // Set ARIA after shadow so that attributes are not inherited
        input
            .attr({
                autocomplete: 'off',
                autocapitalize: 'off',
                autocorrect: 'off',
                spellcheck: 'false',
                role: 'combobox'
            })
            .aria({
                autocomplete: 'list',
                owns: this.element.attr('id'),
                expanded: false
            });

        // Initialize events
        this.addEvents([
            ['keyup', 'input', 'onLookup'],
            ['keydown', 'input', 'onCycle'],
            ['clickout', 'element', 'hide'],
            ['resize', 'window', $.debounce(this.onHide.bind(this))]
        ]);

        this.initialize();
    }