Creating a text box and a clickable button in HTML

How can I make the search button connected to the input in Bootstrap 3?

Example:

|INPUT|SEARCH| <== they are together

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="col-xs-7 form-group">
  <input ng-if="filterOption == 'Account ID'" 
         uib-tooltip="Search by Account ID" 
         validator="/^[0-9]{1,15}$/"
         validator-invoke="watch" 
         validator-error="Account ID must have 1 to 15 digits." 
         type="number" 
         placeholder="Search by Account ID" 
         ng-model="accountID"
         min="1">
</div>
<div class="col-xs-5">
  <button class="btn btn-default w100" 
          type="button" 
          ng-click="searchCustomer()">Search</button>
</div>

htmlcssangularjstwitter-bootstrap

Answer №1

If you're searching for a way to create an input-group, here's an example of how it can be done:

For instance: 

<div class="input-group">
    <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
    </span>
    <input type="text" class="form-control" placeholder="Username">
</div>

Answer №2

Ensure they are placed within the same parent div so they can be aligned side by side.

<!-- Utilize the latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class=" col-xs-7 form-group">
  <input ng-if="filterOption == 'Account ID'" uib-tooltip="Search by Account ID" validator="/^[0-9]{1,15}$/" validator-invoke="watch" validator-error="Account ID must have 1 to 15 digits." type="number" placeholder="Search by Account ID" ng-model="accountID"
    min="1">

  <button class="btn btn-default w100" type="button" ng-click="searchCustomer()">Search</button>

</div>

Answer №3

For effective functionality, the inclusion of Bootstrap 04 is necessary :

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="input-group mb-3 col-xs-7 form-group">
  <input ng-if="filterOption == 'Account ID'" uib-tooltip="Search by Account ID" validator="/^[0-9]{1,15}$/" validator-invoke="watch" validator-error="Account ID must have 1 to 15 digits." type="number" placeholder="Search by Account ID" ng-model="accountID"
    min="1" class="form-control" >
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button"  ng-click="searchCustomer()">Search</button>
  </div>
</div>

Answer №4

<!-- Get the latest version of Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div style="padding-top:30px;" class=" col-xs-7 form-group">
  <input style="margin-right: -7px;height: 32.5px;" ng-if="filterOption == 'Account ID'" uib-tooltip="Search by Account ID" validator="/^[0-9]{1,15}$/" validator-invoke="watch" validator-error="Account ID must have 1 to 15 digits." type="number" placeholder="Search by Account ID" ng-model="accountID"
    min="1">

  <button class="btn btn-default w100" type="button" ng-click="searchCustomer()">Search</button>

</div>

Answer №5

utilize this code snippet

<div class="input-group">
    <input type="text" class="form-control" placeholder="Search">
    <span class="input-group-btn">
         <button class="btn btn-default" type="button">
             <i class="glyphicon glyphicon-search"></i>
         </button>
    </span>
</div>

for more detailed guidelines, visit https://getbootstrap.com/docs/3.3/components/

Answer №6

Maybe something like this could provide some assistance? I believe following this example could serve as a useful reference Bootstrap-3-input-groups

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<body>
<div class="row">

  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Type here to search...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Click to Search!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

My goal is to adjust a page's size to match the dimensions of a mobile screen

Trying to create a mobile-optimized page with an image on one side and an iframe form on the other. However, the elements are getting pushed to the right on phones, especially with a long header. Have tried various combinations of "meta viewport" without s ...

htmlcssmobile

Eliminate information from Firestore with Angular

https://i.sstatic.net/MFKHB.png I encountered an issue while attempting to delete data from Firestore. Fetching and adding data is functioning correctly, but when attempting to delete data, it does not get removed and no error is displayed on the console. ...

angularjsangularfirebasegoogle-cloud-firestoreangularfire

CSS Navigation Bar Overflowing (taking up 100% of width, overflowing onto next line)

I'm struggling with my aspx master page, where the navigation bar is wrapping around even though I have set the width to 100%. It has worked fine in other projects, so I'm not sure what's causing this issue. Snippet: /*General Styling*/ ...

htmlcssasp.net

Error message: Unhandled error - $(...).sidr does not exist as a function. [Chrome developer console]

I included this code in the basic module HTML block of a WordPress page builder and encountered the white screen of death. According to the Chrome developer console, the following error occurred: helpers.js?ver=4.5.3:15 Uncaught TypeError: $(...).sidr is ...

javascriptjqueryhtmlcsswordpress

What's the best practice - using async in the script tag or placing the scripts at the bottom of the html file?

Which is more effective: implementing the async attribute on the script tag or placing the script tag at the end of the HTML document? ...

javascripthtml

``There seems to be an issue with the functionality of the href link

Currently, I am utilizing purecss to design colorful buttons on my website. However, I am encountering an issue where the href link is not clickable even though the button displays correctly. <button class='pure-u-1 pure-button pure-button-primary ...

csshtml

What is the best way to incorporate sub HTML projects into a Django project?

Currently, I am working on a Django project as well as some small HTML projects, including a few HTML5 games. How can I integrate the HTML site into my existing Django project? Each HTML project has its own folder containing numerous CSS, image, and JavaS ...

pythonhtmldjango

Tips on how to horizontally center align a div when using the flex direction column technique

In my design, there is a container that consists of both a table and a div. The div has its display property set to flex with the flex-direction as column. I am trying to horizontally center align the div within the container. Below is the code snippet: ...

htmlcssflexbox

Initiate the countdown when the button is pushed

Recently ran into an issue where a button triggers a command to a Perl script, causing the page to continuously load for 60 seconds. To provide users with transparency on when the Perl script will be finished running, I implemented a JavaScript countdown t ...

phpjavascripthtmlcountdown

Stop Element-UI from automatically applying the list-item style to li elements

I have a list of data elements that I am rendering in the following way: <ul> <li v-for="el in elements"> {{el.data}} </li> </ul> Here's how I style it in my .css file: ul { list-style-type: none; padd ...

javascripthtmlcssvue.js

I have found that the CSS property command for multiple columns functions properly in Opera and IE, but unfortunately does not work in Firefox, Chrome, or Safari

When viewing the html code below, it appears as two columns in Opera and IE10, but only one column in Chrome, Safari, and Firefox. Can anyone explain why this is happening? The styling code [ body{column-count: 2} ] seems to only be effective in Opera and ...

htmlcss

Calculate the total of additional user inputs and show the result in a separate element using JavaScript

Query Is there a way for an element to dynamically show the total of different inputs? Situation I have multiple text boxes all with the same class. There are 4 input fields, each containing a number - Input 1 is "1", Input 2 is "2", and so on. The goal ...

javascriptjqueryhtmlinput

Submitting data through AJAX when clicking a button

I am currently troubleshooting the behavior of my ajax code when I submit it. Most of the elements in my form have onchange="mySubmit(this.form)" or onclick="mySubmit(this.form)" to trigger the ajax submission, and this works well for input elements where ...

javascriptjqueryhtmlajax

Can two ng-change directives be used in a single input field?

Hello, I have a code snippet here where I am attempting to utilize two ngChanges. Can you confirm if this is the correct approach or suggest an alternative method? <select ng-change="updatedate()" ng-change="checkDate()" class="form-control" name="an ...

angularjs

Looking to showcase XML data from a post request in a visually appealing HTML format?

Currently, I am in the process of executing a function that retrieves an XML document from another website. After successfully displaying the returned XML within #document using console.log, I encounter an issue when trying to parse the XML and add it onto ...

htmljqueryajaxxmlpost

While v-carousel adjusts to different screen sizes, the images it displays do not adapt to

Whenever I implement v-carousel, everything seems to be working well, but there is an issue on mobile. Despite the carousel itself being responsive, the images inside do not resize properly, resulting in only the center portion of each image being displaye ...

javascriptcssvue.jsvuetify.js

How can I decrease the spacing between text within a button using Bootstrap?

Here is the code I am working with: <button class="btn btn-dark" style="margin: 0px 5px 10px 5px;background-color:#eeeeee" disabled> <h5 style="color:#000000"><i><b>1,39€</b></i></h5& ...

htmlbootstrap-4

Enhancing web development with jQuery: the power of adding and removing

I'm currently working on creating a default tab that can switch classes when another tab is clicked. This is the HTML code I have so far: <div id="rightWrap"> <div id="headStep"><span class="titleSub">Workers</span></ ...

javascriptjqueryhtml

How can I show an item repeatedly with each button click in ReactJS?

Currently, I have a setup where I can display a checkbox and its label upon clicking a button. However, the limitation is that only one checkbox can be displayed at a time. Is there a way to modify this so that I can show multiple checkboxes simultaneous ...

javascripthtmlreactjs

Trouble with CSS in a WordPress theme utilizing a two-column layout

After setting up my wordpress blog (http://raptor.hk), I encountered an issue with aligning the right sidebar correctly. It seems like I have overlooked something in the CSS code. The div responsible for the sidebar has been assigned the name "rightbar". I ...

csswordpress-theming