Bootstrap tags input is an input box that automatically convert typed text into tags or tokens when a certain key pressed like Enter Key or Comma. The tags input feature is very user friendly as it highlighted information right on the box and replaces conventional comma separated text in input box. You can implement Bootstrap tags input in your projects for the input box when you needed multiple details from a source like persons skills etc.
So in this tutorial you will learn how to implement Bootstrap tags input with PHP and MySQL. The tutorial explained in easy steps with live demo and link to download source code.
Also, read:
- Load Dynamic Content in Bootstrap Popover with Ajax, PHP & MySQL
- Bootstrap Contact Form with Captcha using Ajax and PHP
- Multi Select Dropdown with Checkbox using Bootstrap, jQuery and PHP
As we have covered this tutorial with live demo to save a developer details with name and skills. So the file structure for the example is following.
- index.php
- save.php
- custom_tags_input.js
Steps1: Create Database Tables
As in this example, we will save details into MySQL database table. So first we will create MySQL database table developers to insert records.
CREATE TABLE `developers` ( `id` int(11) NOT NULL, `name` varchar(255) NOT NULL, `skills` varchar(255) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
Steps2: Inlucde Bootstrap and Tags Input Plugin Files
As in this tutorial we have used Bootstrap Tags input Plugin, so we will include Bootstrap, jQuery and Tags input plugin files in index.php
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.js"></script> <script src="custom_tags_input.js"></script>
Steps3: Create Form with Tags Input
We will create a Form with Bootstrap tags input by using data-role=”tagsinput” to create tags input.
<div class="container"> <h2>Create Bootstrap Tags Input with jQuery, PHP & MySQL</h2> <form method="post" class="form-horizontal" action="save.php"> <div class="form-group"> <label class="col-xs-3 control-label">Name:</label> <div class="col-xs-8"> <input type="text" id="name" name="name" /> </div> </div> <div class="form-group"> <label class="col-xs-3 control-label">Your Skills:</label> <div class="col-xs-8"> <input type="text" id="skills" name="skills" data-role="tagsinput" /> </div> </div> <div class="form-group"> <label class="col-xs-3 control-label"></label> <div class="col-xs-8"> <input type="submit" name="submit" value="Save"/> </div> </div> </form> </div>
Steps4: Customize Bootstrap Tags Input
To create tags input, we need to use data-role=”tagsinput” with input, the plugin converts input to work as tags input. The default keys which are (ENTER and comma) to create tags. But you can also customize plugin functionality using tags input plugin function below code. You can also set limit of maximum tags using maxTags
$('#skills').tagsinput({ confirmKeys: [13, 44], maxTags: 20 });
Steps5: Save Tags input values
Now finally in save.php, we will save tags input values into MySQL database table with PHP.
<?php include_once("db_connect.php"); if(isset($_POST['skills']) && isset($_POST['name'])) { $name = $_POST['name']; $skills = $_POST['skills']; $insert_query = "INSERT INTO developers (name, skills) VALUES ('".$name."', '".$skills."')"; mysqli_query($conn, $insert_query) or die("database error: ". mysqli_error($conn)); echo "Your details saved successfully. Thanks!"; } else { echo "Please Enter you name and skills!"; } ?>
You may also like:
- Build Live Chat System with Ajax, PHP & MySQL
- Create Event Calendar with jQuery, PHP and MySQL
- Build Invoice System with PHP & MySQL
- Push Notification System with PHP & MySQL
- Create Bootstrap Cards with PHP and MySQL
- Build Content Management System with PHP & MySQL
- Convert Unix Timestamp To Readable Date Time in PHP
- Ajax Drop Down Selection Data Load with PHP & MySQL
- Inventory Management System with Ajax, PHP & MySQL
- Drag and Drop File Upload using jQuery and PHP
- Load Dynamic Content in Bootstrap Popover with Ajax, PHP & MySQL
You can view the live demo from the Demo link and can download the script from the Download link below.
Demo Download
Thanks for the really good tutorial,
for anyone who want to use only tutorial CSS bootstrap-tagsinput.css might have the tagged input background color problem
here the fix:
.bootstrap-tagsinput .tag {
margin-right: 2px;
color: black;
background-color: #e5baef;
}
How show this tags?
You can get on form submit post value and display or save it into database. thanks!
thanks bro you save my lots of time
Please can you make autocomplete
I will try to update with same. thanks!
Hi ! thanks a lot for you work,
but how to get value from sql to add tag from an existing db ?
I think you can implement by making ajax request and get data to display autosuggest to add. Thanks!