How Does Stackoverflow Make Its Tag Input Field

How does stackoverflow make its Tag input field?

What I would do is:

• Create a master DIV with a border (like here the border 1px solid #000)
• After, inside this DIV, I will create another DIV (float: left;), another DIV (float: right) and an input inside the right div.

When you write inside the input and let's say you select HTML, it creates a span in the left DIV and reduces the width of the right div to match the remaining size. Of course, inside your span there's the text HTML with the delete sign.

You could do it easily using jQuery.

Example:

<div id="master_div">
    <div id="categories">

    </div>
    <div id="input">
        <input type="text" value="" />
    </div>
</div>

And you write some jQuery / JS

Making A Search Tag Input Field

There are loads of Jquery plugins out there you can use. Since you wanna use Javascript, this is easy.

Some libraries:

• http://xoxco.com/projects/code/tagsinput/
• https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/

Both of these will require jQuery.

Edit: Something else you might wanna do:
use https://harvesthq.github.io/chosen/. With some JS you could use this too, and have a cleaner UI.

HTML Input - already filled in text

The value content attribute gives the default value of the input element.

^{- http://www.w3.org/TR/html5/forms.html#attr-input-value}

To set the default value of an input element, use the value attribute.

<input type="text" value="default value">

bootstrap tags input tag value is not submitting with form

In the documentation of the link you provided informs that this puglin was designed for Bootstrap 2.3.2 and 3. By the tag of your question, I saw that you are using 4.

And others people having issues using it on Bootstrap 4.

I uploaded a small example based on your form and method for Github, but using version 3 of Bootstrap and it worked as expected.

An alternative could be this. They fix the compatibility problem with bootstrap 4 based on the plugin you used initially

EDIT:

After your answer's update using Nodws/bootstrap4-tagsinput I made a small test using this plugin and I was able to reproduce the problem.

When analyzing the request.form sent, I noticed that with this version of the plugin the key tags are coming in duplicate.

ImmutableMultiDict([('vendor_name', u'vendor'), ('solution_name', u'solution'), ('tags', u''), ('tags', u'tag1,tag2')])

Because of that you dont get any value when your route parser the form to dict.

I replicate your code with this another version of plugin and now is working as expected.

The complete example continues on my Github.

How to add value to select tag from input field?

You need to use appendChild Js function and also assign a value and innerHTML to your newly option created option.

You can either use .text .textContent to you new option as well.

Run snippet below to see it working.

function myFunction() {
  var addvar = document.getElementById("add_val").value;
  var select = document.getElementById("mySelect")
  var x = document.getElementById("mySelect");
  var option = document.createElement("option");
  option.value = addvar;
  option.textContent = addvar;
  select.appendChild(option);
  //Clear Input
  document.getElementById("add_val").value = '';
}

<form>
  <select id="mySelect" size="8">
    <option>Apple</option>
    <option>Pear</option>
    <option>Banana</option>
    <option>Orange</option>
  </select>
</form>

<input type="text" id="add_val" name="add_val">
<button type="button" onclick="myFunction()">Insert option</button>

html how do I make required fields in forms

The required attribute can simply be included like this:

<input required>

So in your case, remove the attribute tag:

<input name="Forename" type="text" required id="Forename2" onkeyup="allLetter(this)"/>

What is the purpose of the html form tag

What you are missing is an understanding of semantic markup, and the DOM.

Realistically, you can pretty much do whatever you want with HTML5 markup, and most browsers will parse it. Last time I checked, WebKit / Blink even allows pseudo-elements inside <input> elements, which is a clear violation of the spec - Gecko not so much. However, doing whatever you like with your markup will undoubtably invalidate it as far as semantics are concerned.

Why do we put <input> elements inside of <form> elements? For the same reason we put <li> tags inside of <ul> and <ol> elements - it's where they belong. It's semantically correct, and helps to define the markup. Parsers, screen readers, and various software can better understand your markup when it is semantically correct - when the markup has meaning, not just structure.

The <form> element also allows you to define method and action attributes, which tell the browser what to do when the form is submitted. AJAX isn't a 100% coverage tool, and as a web developer you should be practicing graceful degradation - forms should be able to be submitted, and data transferred, even when JS is turned off.

Finally, forms are all registered properly in the DOM. We can take a peek at this with JavaScript. If you open up your console on this very page, and type:

document.forms

You'll get a nice collection of all the forms on the page. The searchbar, the comment boxes, the answer box - all proper forms. This interface can be useful for accessing information, and interacting with these elements. For example, forms can be serialized very easily.

Here's some reading material:

• Semantic HTML
• HTML forms guide

Note: <input> elements can be used outside of forms, but if your intention is to submit data in any way, you should be using a form.

---

This is the part of the answer where I flip the question around.

How am I making my life harder by avoiding forms?

First and foremost - container elements. Who needs 'em, right?!

Certainly your little <input> and <button> elements are nested inside some kind of container element? They can't just be floating around in the middle of everything else. So if not a <form>, then what? A <div>? A <span>?

These elements have to reside somewhere, and unless your markup is a crazy mess the container element can just be a form.

No? Oh.

At this point the voices in my head are very curious as to how you create your event handlers for all these different AJAX situations. There must be a lot, if you need to cut down on your markup to save bytes. Then you must create custom functions for each AJAX event that corresponds to each 'set' of elements - which you must have to target individually or with classes, right? Theres no way to really group these elements generically, since we've established that they just kind of roam around the markup, doing whatever until they are needed.

So you custom code a few handlers.

$('#searchButton').on('click', function (e) {  e.preventDefault();
  var search = $('#mySearch');
  $.ajax({    url: 'http://example.com/text',    type: 'GET',    dataType: 'text',    data: 'query=' + search.val(),    success: function (data) {      console.log(data);    }  });});

$('#login').on('click', function (e) {  e.preventDefault();  var user = $('#username'),      pass = $('#password'),      rem = $('#remember');    $.ajax({    url: 'http://example.com/login',    type: 'POST',    data: user.add(pass, rem).serialize(),    dataType: 'text',    success: function (data) {      console.log(data);    }  });});

<!-- No containers, extra markup is silly. -->
<input type="text" id="mySearch" value="query" /><button id="searchButton">Search</button><input type="text" id="username" name="username" value="user" /><input type="password" id="password" name="password" value="pass" /><input type="checkbox" id="remember" name="remember" checked /> stay logged in<button id="login">Login</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

How to make HTML input tag only accept numerical values?

HTML 5

You can use HTML5 input type number to restrict only number entries:

<input type="number" name="someid" />

This will work only in HTML5 complaint browser. Make sure your html document's doctype is:

<!DOCTYPE html>

See also https://github.com/jonstipe/number-polyfill for transparent support in older browsers.

JavaScript

Update: There is a new and very simple solution for this:

It allows you to use any kind of input filter on a text <input>,
including various numeric filters. This will correctly handle
Copy+Paste, Drag+Drop, keyboard shortcuts, context menu operations,
non-typeable keys, and all keyboard layouts.

See this answer or try it yourself on JSFiddle.

For general purpose, you can have JS validation as below:

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

<input name="someid" type="number" onkeypress="return isNumberKey(event)"/>

If you want to allow decimals replace the "if condition" with this:

if (charCode > 31 && (charCode != 46 &&(charCode < 48 || charCode > 57)))

Source: HTML text input allow only numeric input

JSFiddle demo: http://jsfiddle.net/viralpatel/nSjy7/

How to show tag in the browser?

To get the text to appear "code like" you should put it in a <pre> tag. However, to use characters that are specific to the language you are using, you can use HTML character codes as seen here.

For instance to write a div tag and have it show up without being rendered you could write <div>. This will show as <div> in the browser.

< will be rendered as <, and > will be rendered as >.

Most code editors can do this for you if you don't want to spend the time changing each character to it's respective code. For instance, I use WebStorm and there is a plugin called "String Manipulator" that will change as much code as I want with one click of a button.

---

Related Topics