I am trying to create a search form within a page using Bootstrap 5 and the following code:
<div class="row mb-5">
<div class="col-lg-10 offset-lg-1">
<form class="form-inline" role="form">
<label for="field">Find all where...</label>
<select id="field" class="form-select">
<option value="company_name" selected>Company Name</option>
<option value="federal_ein" selected>EIN</option>
<option value="state">State</option>
<option value="city">City</option>
</select>
<label for="term">includes...</label>
<input type="text" class="form-control" id="term" placeholder="Enter full/partial term" name="term">
<button type="submit" class="btn btn-primary btn-lg">Search</button>
</form>
</div>
</div>
I want the form to be inline, with the text box stretched to fill unused space in the row. I can't figure out how to achieve this. Any help on it? Thanks!
This code seems to work well. Thanks!
<form id="frmSearch" name="frmSearch" role="form" class="was-validated">
<div class="row mb-4">
<div class="col-lg-2 offset-lg-1 text-end">Find companies where...</div>
<div class="col-lg-2 text-start">
<select ID="ddlType" Class="form-control rounded" required>
<option value="" selected>Search by...</option>
<option value="company_name">Company Name</option>
<option value="city">City</option>
<option value="federal_ein">EIN</option>
<option value="state">State</option>
</select>
</div>
<div class="col-lg-1 text-center">contains...</div>
<div class="col-lg-4 d-flex">
<input type="text" ID="tbTerm" class="form-control rounded text-black" required />
</div>
<div class="col-lg-1 mx-auto">
<button type="submit" ID="btnSearch" class="btn-success btn text-white">Search</button>
</div>
</div>
</form>
Related
I'm using <label asp-for and <input asp-for tags inside my form to carry out "Create Form" action as well as Bootstrap for looks. How do I fix this bug, it's working with asp-for, I can create and edit successfully through these fields but its looks rather twisted than user friendly.
<div class="form-group">
<label asp-for="City" class="control-label"></label>
<input asp-for="City" class="form-control" />
<span asp-validation-for="City" class="text-danger"></span>
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
<div class="dropdown-menu">
<label asp-for="Department" class="dropdown-item">HR</label>
<input asp-for="Department" class="form-control" />
<label asp-for="Department" class="dropdown-item">Sales</label>
<input asp-for="Department" class="form-control" />
</div>
<span asp-validation-for="Department" class="text-danger"></span>
</div>
</div>
Here is the result:
Before select
During select
After select
As you can see its not populating inside the text field but its there, I tested it. Maybe there is other way to do it with HTML tags?
Do you want something like this, you can use the <select> tag to implement the dropdown:
<div class="form-group">
<label asp-for="City" class="control-label"></label>
<input asp-for="City" class="form-control" />
<span asp-validation-for="City" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Department" class="control-label"></label>
<select asp-for="Department" class="form-control">
<option selected>Choose Department</option>
<option value="HR">HR</option>
<option value="Sales">Sales</option>
<option value="Other">Other</option>
</select>
</div>
Result:
I'm facing a problem with bootstrap 4 form validation feedback error. I'd like to have the label to change color instead of the invalid-feedback div to appear under the input field. Please how can I achieve my goal? Below there's the form I'm using and boostrap version is 4.5.
Thanks a lot for any help you can give me.
enter code here
<div class="row">
<div class="col-md-12"><!--Grid column-->
<div class="myeditform">
<form action="page.asp" id="add-form" class="add-form" method="post" novalidate>
<input type="hidden" id="action" name="action" value="addnew">
<div class="row">
<div class="col-md-8">
<div class="md-form mb-0">
<label for="ev_title">Title *</label>
<input type="text" class="form-control" name="ev_title" id="ev_title" placeholder="Title ..." required="required">
<div class="invalid-feedback">This field is required</div>
</div>
</div>
<div class="col-md-4">
<div class="md-form mb-0">
<label for="ev_is_active">Status</label>
<select class="browser-default form-control" id="ev_is_active" name="ev_is_active">
<option value="true">ON LINE</option>
<option value="false">OFF LINE</option>
</select>
</div>
</div>
</div><!-- row -->
<div class="row">
<div class="col-md-6">
<div class="md-form mb-0">
<label for="ev_at_place">Location *</label>
<input type="text" class="form-control" name="ev_at_place" id="ev_at_place" placeholder="Location ..." required="required">
<div class="invalid-feedback">This field is required</div>
</div>
</div>
<div class="col-md-3">
<div class="md-form mb-0">
<label for="ev_dance_type">Evening of *</label>
<select class="browser-default form-control" id="ev_dance_type" name="ev_dance_type" required="required">
<option value="">Seleziona...</option>
<option value="op1">op1</option>
<option value="op2">op2</option>
<option value="op3">op3</option>
<option value="op4">op4</option>
<option value="op5">op5</option>
<option value="op6">op6</option>
<option value="other">other</option>
</select>
<div class="invalid-feedback">This field is required</div>
</div>
</div>
<div class="col-md-3">
<div class="md-form mb-0">
<label for="ev_cycle">Frequency *</label>
<select class="browser-default form-control" id="ev_cycle" name="ev_cycle" required="required">
<option value="">Seleziona...</option>
<option value="7">7</option>
<option value="14">14</option>
<option value="21">21</option>
<option value="28">28</option>
<option value="0">One time off</option>
</select>
<div class="invalid-feedback">This field is required</div>
</div>
</div>
</div><!-- row -->
<div class="row">
<div class="col-md-12">
<div class="md-form mb-0">
<label for="ev_description">Description *</label>
<textarea class="form-control" name="ev_description" id="ev_description" rows="10" placeholder="Description required ..." required="required"></textarea>
<script>
CKEDITOR.replace( 'ev_description');
</script>
<div class="invalid-feedback">This field is required</div>
</div>
</div>
</div><!-- row -->
<div class="row">
<div class="col-md-12">
<div class="md-form mb-0">
<label for="ev_notes">Note</label>
<input type="text" class="form-control" name="ev_notes" id="ev_notes" placeholder="Es. ...">
</div>
</div>
</div><!-- row -->
<div class="row">
<div class="col-md-12">
<div class="md-form mb-0">
<button type="button" class="btn btn-primary mybtn float-left" onclick="history.go(-1)">Back</button>
<button type="reset" class="btn btn-warning mybtn float-left">Reset</button>
<button type="submit" class="btn btn-primary float-right" >Add</button>
</div>
</div>
</div><!-- row -->
</form>
</div> <!--myedit form-->
</div><!--Grid column-->
I have a bootstrap form and want to add a glyphicon before the SELECT fields.
However, it makes a breakline somewhy.
<form role="form" id="registration-form" onsubmit="return onSubmitContinueButton()">
<div class="row">
<div class="form-group col-md-6">
<label class="sr-only" for="xxx"></label>
<span class="glyphicon glyphicon-name"></span> <!-- <-- there is a breakline after this.... why?-->
<select class="form-control" name="aaa">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="form-group col-md-6">
<label class="sr-only" for="xxx"></label>
<span class="glyphicon glyphicon-name"></span> <!-- <-- there is a breakline after this.... why?-->
<select class="form-control" name="aaa">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
</form>
I want the glyphicon to be just near the select field and not above it.
How can I fix it?
Thanks
If you want to add icons in front of the select field make it an input group like this
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-plus"></span></span>
<select class="form-control" name="aaa">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
For more information look right here: Bootstrap input groups
The input form is not sending the input to the database, i even changed the Post to Put it staring sending info to the URL but thats it still did not end up in the database. By the way im using SQLite,
Could really use some help or input.
<section class="wrapper">
<div class="panel panel-default">
<div class="panel-body">
<!-- Standar Form -->
<form method="POST" action="{{ action('UploadController#handleCreate') }}" role="form">
<fieldset>
<h5>Upload Your Product's Files Here</h5>
<div class="form-actions form-group">
<input type="file" name="filepath" />
</div>
<div class="form-group">
<label for="name">
Product Name
</label>
<input class="form-control" placeholder="Name of your Product" type="text" name="name" id="name"/>
</div>
<div class="form-group">
<label for="developer_name">
Developer Name
</label>
<input class="form-control" placeholder="developer name" type="text" name="developer_name" id="developer_name"/>
</div>
<div class="form-group">
<label for="description">
The Description Of Your Product
</label>
<textarea class="form-control" rows="5" type="text" name="description"/>
</textarea>
</div>
<div class="form-group">
<label for="OS">
Compatible Operating System
</label>
<select class="form-control" name="OS"/>
<option value="Crossplatform">Cross Platform</option>
<option value="OSX">OSX</option>
<option value="Windows">Windows</option>
<option value="Linux">Linux</option>
<option value="IOS">IOS</option>
<option value="Android">Android</option>
</select>
</div>
<div class="form-group">
<label for="price">
Set The Price (if free leave as is)
</label>
<input class="form-control" placeholder="0.00" type="decimal" name="price" id="price"/>
</div>
<div class="form-group">
<label for="category">
Choose a category for your product
</label>
<select class="form-control" name="category"/>
<option value="free">Free</option>
<option value="premuim">Premium</option>
<option value="opensource">Opensource</option>
<option value="collaborativeefforts">Collabritive Efforts</option>
<option value="developertools">Developer Tools</option>
</select>
</div>
<h4>upload a thumbnail for your product</h4>
<div class="form-inline">
<input type="file" name="image" />
</div>
<hr>
<div class="form-actions form-group">
<input type="submit" value="submit" class="btn btn-primary" />
Cancel
</div>
</fieldset>
</form>
</div>
</div>
</section>
And here is the part of the controller that handles the form submission controller
public function create()
{
return View::make('developerpanel.upload.index');
}
//Handle create form submission.
public function handleCreate()
{
$product = new Product;
$product->filepath = Input::file('filepath');
$product->name = Input::get('name');
$product->developer_name = Input::get('developer_name');
$product->description = Input::get('description');
$product->OS = Input::get('OS');
$product->price = Input::get('price');
$product->category = Input::get('category');
$product->image = Input::file('image');
$product->save();
return Redirect::route('developerpanel.index');
}
Could really use the help Thanks!
Since you're uploading files, your form needs to have an enctype="multipart/form-data" attribute.
<form method="POST" action="{{ action('UploadController#handleCreate') }}" role="form" enctype="multipart/form-data">
Also, you don't want to just try to save the file object to the database like that. Check out the Laravel docs here regarding file uploads.
Use Laravel's methods, and maybe do some validation to make sure it's an image file.
validation#rule-image
html#opening-a-form
{{ Form::open(array('action'=>'UploadController#handleCreate', 'role'=>'form', 'files'=>true)) }}
...
{{ Form::close() }}
I am trying to build a simple horizontal search & filtering form using Twitter Bootstrap as can be seen in the image attached.
I am trying to build it so it adapts to different screen sizes as shown in the image. The results that I receive from my code aren't according my expectations.
<div id="search_block" class="panel-body">
<form role="form" class="form-horizontal" method="post" action="">
<div class="form-group">
<label class="col-xs-2 col-sm-2 col-md-1 control-label" for="v_search">Search:</label>
<div class="col-xs-8 col-sm-8 col-md-4">
<input type="text" placeholder="Enter Search Keywords" value="" name="v_search" id="v_search" class="form-control">
</div>
<div class="button-group col-xs-8 col-sm-8 col-md-2">
<button class="btn btn-primary" value="search" name="search" type="submit">Search</button>
<button class="btn btn-default" value="reset" name="reset" type="reset">Reset</button>
</div>
</div>
<div class="form-group">
<label class="col-xs-2 col-sm-2 col-md-1 control-label" for="filters">Filters:</label>
<div class="col-xs-8 col-sm-8 col-md-2" id="filters">
<select class="form-control" name="section_id">
<option value="all">All Sections</option>
<option value="all">Test</option>
</select>
</div>
<div class="col-xs-8 col-sm-8 col-md-2">
<select class="form-control" name="category_id">
<option value="all">All Categories</option>
<option value="71">Test</option>
</select>
</div>
</div>
</form>
My code can be found at: http://jsfiddle.net/NB89d/
You can use the col-*-offset classes to achieve what you want.
Demo: http://www.bootply.com/126439