I am working on a class project and I have a webpage to do search:
http://ada.uprrp.edu/~ehazim/hpcf_proj/basicsearch.html
Here is the basic code:
<html>
<head> <title>Search HPCF Inventory</title>
</head>
<body>
<h1> Search </h1>
<form action="results.php" method="POST">
Choose Search Type: <br />
<select name="searchtype">
<option value="ip"> IP Adress </option>
<option value="ss_name"> Software Services </option>
<option value="IS"> ISBN </option>
</select>
<br />
Enter Search Term:<br />
<input name="searchterm" type="text">
<br />
<input type="submit" value="Search">
</form>
</body>
</html>
Now, I want to make it "pretty" using bootstrap 3. I want exactly what I have in my webpage but to be honest, I don't understand the forms of bootstrap (I am new with webpages), mainly how to say that it is by POST and how to put the variable names. I have been looking for this in websites like this: http://bootsnipp.com/forms?version=3
Which looks really cool, but I don't understand how to edit it...
Can someone share the necessary code to have the exact thing that I have in my webpage using bootstrap?
Thanks.
Read through and follow the example at http://getbootstrap.com/css/#forms
So, would end up being
<form action="results.php" method="POST" role="form" class="form-horizontal">
<div class="form-group">
<label for="searchterm" class="col-sm-2 control-label">Choose Search Type</label>
<select name="searchtype" class="form-control">
<option value="ip"> IP Adress </option>
<option value="ss_name"> Software Services </option>
<option value="IS"> ISBN </option>
</select>
</div>
<div class="form-group">
<label for="searchterm" class="col-sm-2 control-label">Choose Search Term</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="searchterm" name="searchterm">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Search</button>
</div>
</div>
</form>
Related
i have a simple form that has a drop down
<form action="TasksController#store" method="POST">
<div>
<div class="textbox-first" style="float:left">
<label for="taskname"> Task Name </label><br>
<input type="text" placeholder="Enter task title" name="title" style="width:360px">
</div>
<div class="textbox-first" style="float:right;margin-right:0px">
<label for="priority">Task priority</label><br>
<select style="width:380px">
<option value="urgent" selected="selected">Urgent</option>
<option value="important">important</option>
<option value="later">Later</option>
</select>
</div>
</div>
the form is not selecting
<div class="col-sm-6">
<div class="form-group">
<label for="country">Country:</label>
<select class="form-control bfh-countries" data-country="US"></select>
</div>
</div>
I want to select the countries using this form.
I think you'd probably rather bring in the countries via SQL. Though, if you're going to manually enter them, just add the <option> tag with a value and text.
<div class="col-sm-6">
<div class="form-group">
<label for="country">Country:</label>
<select class="form-control bfh-countries" data-country="US">
<option value="United States">United States</option>
</select>
</div>
</div>
I want to make a website which includes a questionnaire that visitors will fill in. Here is what I have:
<html>
<head>
</head>
<body>
<form method="post" action="index.php">
<label>Name:</label>
<input name="name" placeholder="Name">
<label>Email:</label>
<input name="email" type="email" placeholder="Email">
<label>Price:</label>
<select name="price" option="Free,1p - £1,£1 - £5,£5 - £10,£10 - £20,£20+"
<label>Comment:</label>
<textarea name="message" placeholder="Do you want to say anything else?"></textarea>
<input id="submit" name="submit" type="submit" value="submit">
</form>
</body>
</html>
Most of it works, I can't get the drop down to work for some reason. Can you help please?
Your <select> element is wrong. You need to have child <option>s. See here: https://www.w3schools.com/html/html_form_elements.asp
So, more like:
<select name="price">
<option value="0">Free</option>
<option value="0to1">1p - £1</option>
<option value="1to5">£1 - £5</option>
<!-- etc -->
</select>
I want my button to display BELOW my select list. See the following code here-
http://jsfiddle.net/7jwap4pg/
<div class="container-fluid">
<div class="col-md-12">
<select id="company_name" name="company_name" class="search-form-select-list">
<option value="" disabled selected>Select A Restaurant</option>
<option value="McDonalds">McDonalds</option>
<option value="Wendys">Wendys</option>
</div>
<div class="col-md-12">
<form action="/search" method="get">
<input class="btn" type="submit" value="Search All" />
</form>
</div>
</div>
It displays beside it instead. If I switch the order and put the button first, it will display above the select list which is the behavior I expect. So why can't I get it to display below?
http://jsfiddle.net/pu6vkrjc/
You forgot your closing tag.
<div class="container-fluid">
<div class="col-md-12">
<select id="company_name" name="company_name" class="search-form-select-list">
<option value="" disabled selected>Select A Restaurant</option>
<option value="McDonalds">McDonalds</option>
<option value="Wendys">Wendys</option>
</select>
</div>
<div class="col-md-12">
<form action="/search" method="get">
<input class="btn" type="submit" value="Search All" />
</form>
</div>
</div>
Ah, I missed it.
Your closing tag </select>is missing.
Just as I note I wouldn't consider a drop down over a button a "Best Practice" for forms. I hate when people do that online. It just hurts the design part of my brain.
I'm trying to create a download form where users can download and filter data according to the date. I want the form to be wrapped inside a box as shown in the example below taken from this link.
I followed the example code, wrapping my form content inside <fieldset> tags but my form looks like this:
I don't know if this is a bug within bootstrap or if some additional styling must be done.
Here is my html code:
<form role="form" method="post">
<fieldset>
<legend> Download Details</legend>
<div class="form-group">
<label for="startdate" class="col-sm-2 control-label">Start date</label>
<div class="col-sm-10">
<select >
<option>Select Date --</option>
</select>
</div>
</div>
<br><br>
<div class="form-group">
<label for="startdate" class="col-sm-2 control-label">End date</label>
<div class="col-sm-10">
<select >
<option>Select Date --</option>
</select>
</div>
</div>
<br>
<button type="submit" class="btn btn-primary">Download</button>
</fieldset>
</form>
Bootstrap is adding styles to fieldset and legend
You can create a stylesheet that overrides those styles and include that stylesheet after bootstrap.
You can also check this Stackoverflow Answer.