I am doing a website for my personal use. I need some assistant on how to set a text-box next to a label without using tables. They are in their own division tags
<div id="outter">
<div class="1">
Fill out and submit the form below and we will contact you a.s.a.p.
</div>
<div class="2">
<label> Name: </label>
</div>
<div class="2">
<input name="name" type="text" class="3" >
</div>
</div>
trying to get this:
[input box 1] label 1
[input box 2] label 2
here is the link for better details
http://homework.genesee.edu/~dmead1/forms/table.html
Very Simple Solution Of Your Problem
HTML
<fieldset class="login">
<legend>Fill out and submit the form below and we will contact you a.s.a.p. </legend>
<div><label for="name">Name</label> <input type="text" id="name" name="name"></div>
</fieldset>
CSS
fieldset div {
margin:0.3em 0;
clear:both;
}
Check Fiddle
Related
How can I put, side by site, a RadioButton and a TextInput field on my Bootstrap 3 Form?
I want to achieve this:
(o) A fixed value
( ) A value between [ ] and [ ]
(being parenthesis the RadioButton and brackets, the text box).
Thank you.
Something like this should work:
<div class="form-horizontal">
<div class="col-md-12">
<input type="radio" id="test">A fixed value
</div>
<div class="col-md-12" style="display:inline">
<input type="radio" id="test2">A value between <input type="text" id="text1" /> and <input type="text" id="text2" />
</div>
</div>
I'm new to Bootstrap. But I'm pretty familiar with HTML. The thing is I cannot get parameter values from JSP. The parameters are from HTML page with Bootstrap 3. Here're the code. I don't understand. If I make simple html only page, then I could get the parameters.
<form class="form-horizontal" method="POST" action="makeResv.jsp">
<div class="container">
<div class="row">
<div class="control-group col-md-5">
<label for="checkIn">date1</label>
<div id="date-container">
<div class="input-group date">
<input type="text" id="checkIn" class="form-control"><span
class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
</div>
</div>
<div class="control-group col-md-5">
<label for="checkOut">date2</label>
<div id="date-container">
<div class="input-group date">
<input type="text" id="checkOut" class="form-control"><span
class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
</div>
</div>
<div class="col-md-2">
<button type="submit" class="btn btn-success">search</button>
</div>
</div>
</div>
</form>
In a JSP page, I'm just doing the following.
String checkIn = request.getParameter("checkIn");
String checkOut = request.getParameter("checkOut");
out.println(checkIn + " " + checkOut);
What's wrong with the above HTML code with Bootstrap?? Please give me some advise. Thanks!!
BTW, I'm using datepicker JavaScript library, but I don't think that affect the results. I cannot add the library code here but it works great anyway.
https://github.com/eternicode/bootstrap-datepicker
Bootstrap is same as HTML. The problem you are having is because you do not have any name attribute defined in your input element. You define id but to access submited variables via POST (request.getParameter() function) you need to have name attribute defined:
Replace <input> lines like this:
<input type="text" name="checkIn" id="checkIn" class="form-control">
And
<input type="text" name="checkOut" id="checkOut" class="form-control"><
I wish to display some fields of my form in foundation reveal along with the submit button.
Something like:
<form action="" method="POST">
{% csrf_token %}
<div class="large-8 columns">
<input type="text" name="name" label="name"></input>
</div>
Submit
<div id="display_detail" class="reveal-modal" data-reveal>
<input type="text" name="age" label="name"></input>
<input type="submit" value="Submit" class="button">
</div>
</form>
But when the link "Submit" is clicked, I see that the reveal-data div is actually put outside the form. How can this be rectified?
To make sure the Reveal modal actually hovers above the page, and not within some relatively positioned element, it is necesary to move the html to the top level body element.
To deal with this I didn't try to hack into the Reveal plugin to stop this behaviour, instead I added an event listener to a new form that duplicated the entries:
<form action="" method="POST" id="baseform">
{% csrf_token %}
<div class="large-8 columns">
<input type="text" name="name" label="name"></input>
</div>
Submit
<div>
<!-- preferably hide this block using JS -->
<input type="text" name="age" label="name"></input>
<input type="submit" value="Submit" class="button">
</div>
</form>
<div id="display_detail" class="reveal-modal" data-reveal>
<form data-linked-form="baseform">
<input type="text" name="age" label="name"></input>
<input type="submit" value="Submit" class="button">
</form>
</div>
Then using coffeescript:
# duplicate values
$(document).on('input', 'form[data-linked-form]', (e)->
form = e.currentTarget
input = e.target
document.forms[form.dataset.linkedForm].elements[input.name].value = input.value
)
# submit the linked form, instead of itself
$(document).on('sumit', 'form[data-linked-form]', (e)->
form = e.target
document.forms[form.dataset.linkedForm].submit
)
Few days ago Twitter Bootstrap 3 RC1 released and i just started to play with it on a personal project.
I have a horizontal form which includes some inline radio-checkbox groups but horizontal alignment of these elements are not equal:
Question 1: Why chrome doesn't displays help-block element on the same line with the label?
Question 2: How to align inline radio group on the same line with label?
Question 3: Is following markup valid? Are these problems related with the markup?
Markup:
<div class="container">
<form class="form-horizontal">
<div class="form-group">
<label class="col-lg-2 control-label">Weight</label>
<div class="col-lg-1">
<input type="text" name="weight" class="form-control" value="20">
</div>
<div class="help-block"> grams</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">Full part name</label>
<div class="col-lg-6">
<input type="text" name="name" class="form-control" placeholder="Don't use numeric characters..">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">Inline radios</label>
<div class="col-lg-10">
<label class="radio-inline">
<input type="radio" name="radio"> Hello
</label>
<label class="radio-inline">
<input type="radio" name="radio"> Other
</label>
<label class="radio-inline">
<input type="radio" name="radio"> Another
</label>
<label class="radio-inline">
<input type="radio" name="radio" checked="checked"> Foobar
</label>
</div>
</div>
</form>
</div>
EDIT:
Also this markup on a small screen produces a "dropped help-block element". I think my markup is problematic but i have no idea what is wrong.
Your markup seems to be valid on first sight. About your question 1.
You have set your input with:
<div class="col-lg-1">
<input type="text" name="weight" class="form-control" value="20">
</div>
So to width is set with the col-lg-1 prefix, see also: https://stackoverflow.com/a/17920693/1596547. "col-lg-1" stack below 992 pixels. When you're screen width is > 992 px. The div got a width of 8.333% (100/12). The
form-control class set the width of the input tag to 100%. Below the 992px there is no definition for "col-lg-1" cause the 100% width of the input, the input is displayed with 100% width.
Try to use the col-* prefixes which never stacks (or use other CSS to set the width)
I did not found different behavior for Chrome at all. Above the 992px i will find this on both FF and Chrome:
I did not found a solution for your second question yet.
Question 2:
Your labels got a padding-top of 9px from:
.form-horizontal .control-label {
padding-top: 9px;
}
the .radio-inline have no padding, so add the code below to your css:
.radio-inline, .checkbox-inline {
padding-top: 9px;
}
See: https://github.com/twbs/bootstrap/pull/8967
I want to use jQuery UI dialog box to open a form dialog where one can edit information about an employee.
The form looks like this
<form id="formAddNewRow" action="/frontend_dev.php/test/create" method="post" >
<table>
<tbody>
<ul>
<li>
<label for="employee_firstname">Firstname</label>
<input type="text" name="employee[firstname]" id="employee_firstname" />
</li>
<li>
<label for="employee_lastname">Lastname</label>
<input type="text" name="employee[lastname]" id="employee_lastname" />
</li>
<ul>
</tbody>
</table>
</form>
I want to load the form elements prefilled with the employees data. eg
<label for="employee_lastname">Lastname</label> <input type="text" name="employee[lastname]" value="Miller" id="employee_lastname" />
So my idea was to ajax a complete form that fits the selected employee and replace it with the one above.
<form id="formAddNewRow" action="/frontend_dev.php/test/create" method="post" >
<table>
<tbody>
<ul>
<li>
<label for="employee_firstname">Firstname</label>
<input type="text" name="employee[firstname]" value="Miller" id="employee_firstname" />
</li>
<li>
<label for="employee_lastname">Lastname</label>
<input type="text" name="employee[lastname]" value="Tom" id="employee_lastname" />
</li>
<ul>
</tbody>
</table>
</form>
I try doing that by
$( ".editButton" )
.button()
.click(function() {
var replace = $.ajax({
url: 'employee/edit?id=1', success: function() {
$( "#formAddNewRow" ).replaceWith(replace.responseText);
}
});
});
This works, but it stops working when I do:
$( "#formAddNewRow" ).dialog({});
There is no error message or warning. The form just gets eliminated from the DOM together with its parent node that was inserted by dialog().
How do I prefill the form succesfully?
Put your <form> into a <div> and attach the .dialog() to the div instead of to the form.
In the AJAX call replace the form as you are now, leaving its parent div attached to the dialog box.
This is necessary because jQuery UI internally maintains references to the element contained in the dialog box, and if you replace that element those references don't get updated. Replacing a child of that element will eliminate that problem.
<div id="formAddNewRowDialog">
<form id="formAddNewRow" action="/frontend_dev.php/test/create" method="post" >
<table>
<tbody>
<ul>
<li>
<label for="employee_firstname">Firstname</label>
<input type="text" name="employee[firstname]" value="Miller" id="employee_firstname" />
</li>
<li>
<label for="employee_lastname">Lastname</label>
<input type="text" name="employee[lastname]" value="Tom" id="employee_lastname" />
</li>
<ul>
</tbody>
</table>
</form>
</div>
Wrap the form in a div like above then call
$( "#formAddNewRowDialog" ).dialog();