I have the lumen theme from bootswatch... everything seems to be working fine except that my form never submits any data ... it goes to the action page but never send any data across... he is the complete code...
<!DOCTYPE html>
<html>
<title>Some Title
</title>
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="page-header">
<h1 id="container">Some Heading</h1>
</div>
<div class="bs-component">
<div class="jumbotron">
<h1>Incident Management System</h1>
<p> Some heading</p>
<p><a class="btn btn-primary btn-lg">Learn more</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Submit a ticket</h3>
</div>
<div class="panel-body">
<form class="form-horizontal" id="insertForm" method="post" action="addincident.php">
<fieldset>
<legend>We need few details!</legend>
<div class="form-group">
<label for="inputUserName" class="col-lg-2 control-label">Username</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputUserName" placeholder="Enter your username">
</div>
</div>
<div class="form-group">
<label for="inputstudentID" class="col-lg-2 control-label">Student ID</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputStudentID" placeholder="Enter your Student ID">
</div>
</div>
<div class="form-group">
<label for="inputStudentEmail" class="col-lg-2 control-label">Student EMail</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputStudentEMail" placeholder="Enter your Student Email ID">
</div>
</div>
<div class="form-group">
<label for="selectRoomNo" class="col-lg-2 control-label">Room Number</label>
<div class="col-lg-10">
<select class="form-control" id="selectRoomNo">
<option>S114D</option>
<option>S118B</option>
<option>S118E</option>
<option>S120</option>
<option>S114B</option>
</select>
</div>
</div>
<div class="form-group">
<label for="textAreaRoomPosition" class="col-lg-2 control-label">Location of machine</label>
<div class="col-lg-10">
<textarea class="form-control" rows="3" id="textAreaRoomPosition"></textarea>
<span class="help-block">Explain to the best of your knowledge the location of the issue in the lab.</span>
</div>
</div>
<div class="form-group">
<label for="textAreaRoomPosition" class="col-lg-2 control-label">Issue\Incident</label>
<div class="col-lg-10">
<textarea class="form-control" rows="3" id="textAreaRoomPosition"></textarea>
<span class="help-block">Explain to the best of your knowledge the issue you are facing. Try to be as detailed as possible.</span>
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button class="btn btn-default">Cancel</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Information</h3>
</div>
<div class="panel-body">
Upon recieving the ticket, we will assign it to a designated technician who will then solve the case. You can view the solution of the incident once it is posted.
</div>
</div>
</div>
</div>
</div>
</body>
</html>
It's missing the "name" attribute;
change this:
<input type="text" id="inputUserName">
to something like this:
<input type="text" name="inputUserName" id="inputUserName">
Related
My form is not centered on my page. See below my html file and the output. How do I center my view?
Herewith my html:
<div class="container">
<div class='row justify-content-center'>
<div class='col'>
<p></p>
<h1>Member Details: </h1>
<p>Name: JP</p>
<p>Surname: Roux</p>
<p>ID Nr: 7604195133089</p>
<p>Mobile Nr: 0741115552</p>
<p>Email: jp#test.com</p>
<p>D.O.B: 1976-04-19</p>
<p>Language: Afrikaans</p>
<p>Interests:
<ul>
<li>Tennis</li>
<li>Squash</li>
</ul>
</p>
<p>Created At: 2018-06-06 09:31:31</p>
<div class="page-header">
Edit
</div>
</div>
</div>
You can put your form like below:
<div class="container">
<div class='row justify-content-center'>
<div class='col-6 border border-primary'>
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br> Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>
jsfiddle.
Never use justify-content-center for the row. If you want to align center content of a column , use d-flex and justify-content-center for the column and wrap its content with a w-auto div.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class='row'>
<div class='col d-flex justify-content-center'>
<div class="w-auto">
<p></p>
<h1>Member Details: </h1>
<p>Name: JP</p>
<p>Surname: Roux</p>
<p>ID Nr: 7604195133089</p>
<p>Mobile Nr: 0741115552</p>
<p>Email: jp#test.com</p>
<p>D.O.B: 1976-04-19</p>
<p>Language: Afrikaans</p>
<p>Interests:
<ul>
<li>Tennis</li>
<li>Squash</li>
</ul>
</p>
<p>Created At: 2018-06-06 09:31:31</p>
<div class="page-header">
Edit
</div>
</div>
</div>
</div>
https://codepen.io/anon/pen/eKBNKY
Centered form
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class='row'>
<div class='col d-flex justify-content-center'>
<form class="w-auto">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
https://codepen.io/anon/pen/rKWVqV
Using w-auto is unnecessary. If you wish, you can omit.
I'm having some trouble with a form the last element doesn't fit properly, this is my code:
<div class="tab-pane" id="2a">
<div *ngFor="let perso of person">
<div class="form-group">
<label class="col-sm-4 control-label">Fecha de Ingreso:</label>
<div class="col-sm-6">
<input type="text" name="condo" value="{{perso.fecha_ini}}" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">Fecha de Salida:</label>
<div class="col-sm-6">
<input type="text" name="condo" id="condo" value="{{perso.fecha_fin}}" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">Foto:</label>
<div class="col-sm-6">
<!-- <input type="text" name="condo" value="{{perso.ruta_foto}}" class="form-control"> -->
<img src="http://52.14.193.170/imagenes/pers/2.jpg" alt="Odlir" width="130" height="130">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">Antecedentes Penales:</label>
<div class="col-sm-6">
<input type="text" name="condo" value="{{perso.ruta_penal}}" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">Antecedentes Policiales:</label>
<div class="col-sm-6">
<input type="text" name="condo" value="{{perso.ruta_policial}}" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">Antecedentes Policiales:</label>
<div class="col-sm-6">
<input type="text" name="condo" value="{{perso.ruta_policial}}" class="form-control">
</div>
</div>
</div>
</div>
i don't know what i'm doing wrong, any ideas why this is happening? any help would be appreciated, im using bootstrap 3.3.7
It's still okay with
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va +PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
https://i.stack.imgur.com/zVa4B.png
I have a form with 3 fields, two of them are for entering dates. I was requested to add an icon to the very end of the field.
This is the result:
If you see the field that has the icon expands beyonds the other fields to the left and right so it looks pretty ugly.
This is the code:
<div class="form-horizontal">
<div class="form-group">
<label class="col-md-4 control-label">Begin</label>
<div class="col-md-8">
<input type="text" class="form-control" placeholder="mm/dd/yyyy" />
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">End</label>
<div class="input-group col-md-8">
<input type="text" class="form-control" placeholder="mm/dd/yyyy" />
<span class="input-group-addon"><i class="fa fa-lock"></i></span>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Text Search</label>
<div class="col-md-5">
<input type="text" class="form-control">
</div>
<div class="col-md-3">
<button id="btnSavedMessages" class="btn btn-primary">Search</button>
</div>
</div>
</div>
Any clue on how to do it right?
Here is your fixed code please copy it and paste it
<div class="form-horizontal">
<div class="form-group">
<label class="col-md-4 control-label">Begin</label>
<div class="col-md-8">
<input type="text" class="form-control" placeholder="mm/dd/yyyy">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">End</label>
<div class="col-md-8">
<div class="input-group ">
<input type="text" class="form-control" placeholder="mm/dd/yyyy">
<span class="input-group-addon"><i class="fa fa-lock"></i></span>
</div></div>
</div><div class="form-group">
<label class="col-md-4 control-label">Text Search</label>
<div class="col-md-5">
<input type="text" class="form-control">
</div>
<div class="col-md-3">
<button id="btnSavedMessages" class="btn btn-primary">Search</button></div></div></div>
I have tested it works fine. Cheers!
Some CSS is messing with you.
Your line with input-group col-md-8 is apparently malfunctioning.
I made an example:
https://plnkr.co/edit/gxpaP4wR8cZzb3E4CvtR
Check if you have some custom CSS that is overriding bootstraps'.
Use my code this is working fine.
<!-- 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="form-horizontal">
<div class="form-group">
<label class="col-md-4 control-label">Begin</label>
<div class="col-md-8">
<input type="text" class="form-control" placeholder="mm/dd/yyyy" />
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">End</label>
<div class="col-md-8">
<div class="input-group">
<input type="text" class="form-control" placeholder="mm/dd/yyyy" />
<span class="input-group-addon"><i class="fa fa-lock"></i></span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Text Search</label>
<div class="col-md-5">
<input type="text" class="form-control">
</div>
<div class="col-md-3">
<button id="btnSavedMessages" class="btn btn-primary">Search</button>
</div>
</div>
</div>
I have a big form and the problem with alignment. I cut some fields, but the demo will show the problem.
I have two columns in the begining of the form, some rows use half of the width, some rows use full witdh. And, the problem with the last one. As you can see textareas is not aligned with the others inputs:
How can I fix it?
DEMO
PS. I use Bootstrap 4, but, I think this question is related to Bootsrap 3 too.
.full-width {
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://npmcdn.com/tether#1.2.4/dist/js/tether.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<form novalidate>
<div class="row">
<div class="col-md-8">
<div class="form-group row">
<label for="field1" class="col-md-2 col-form-label">Text Area</label>
<div class="col-md-10">
<textarea id="field1" class="form-control"
cols="30" rows="4"></textarea>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group row">
<div class="col-md-12">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Checkbox 1
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Checkbox 2
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Checkbox 3
</label>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div class="form-group row">
<label for="field2" class="col-md-2 col-form-label">Input</label>
<div class="col-md-10">
<input id="field2" class="form-control"/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group row">
<label class="col-md-1 col-form-label">Options</label>
<div class="col-md-11">
<div class="row">
<div class="col-md-6">
<span>Label 1</span>
<input type="radio" name="group1" value="Value 1"> Value 1
<input type="radio" name="group1" value="Value 1"> Value 2
</div>
<div class="col-md-6">
<span>Label 2</span>
<input type="radio" name="group2" value="Value 1"> Value 1
<input type="radio" name="group2" value="Value 2"> Value 2
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-11">
<textarea class="full-width"></textarea>
</div>
<div class="col-md-1">
<span">Icon</span>
</div>
</div>
<div class="row">
<div class="col-md-11">
<textarea class="full-width"></textarea>
</div>
<div class="col-md-1">
<span">Icon</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
</form>
The problem is the first 2 rows are nested in col-md-8, and the misaligned "options" row is nested in col-md-12.
Also, clean up the various malformed HTML in the code.
http://www.codeply.com/go/sCYzgdFXxa
I have the following code:
<form class="form-inline">
<div class="row">
<div class="col-md-6">
<fieldset>
<legend>Form one</legend>
<div class="col-md-3">
<div class="form-group">
<label for="input1">Input1</label>
<div class="checkbox">
<input type="checkbox" id="input1">
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="input2">Input2</label>
<div class="checkbox">
<input type="checkbox" id="input2">
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="input3">Input3</label>
<div class="checkbox">
<input type="checkbox" id="input3">
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="input4">Input4</label>
<div class="checkbox">
<input type="checkbox" id="input4">
</div>
</div>
</div>
</fieldset>
</div>
<div class="col-md-6">
<fieldset>
<legend>Form 2</legend>
<div class="col-md-3">
<div class="form-group">
<label for="input5">Input5</label>
<div class="checkbox">
<input type="checkbox" id="input5">
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="input6">Input6</label>
<div class="checkbox">
<input type="checkbox" id="input6">
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="input7">Input7</label>
<div class="checkbox">
<input type="checkbox" id="input7">
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="input8">Input8</label>
<div class="checkbox">
<input type="checkbox" id="input9">
</div>
</div>
</div>
</fieldset>
</div>
</div>
</form>
( I am sorry for the poor identation, but i posted a link to bootply also). I want the inputs of the first form to appear two at each row, so it must look like this for form 1
Input1 input2
input3 input4
and
Input5 Input6
Input7 Input8
for form 2 in the second collumn. I set up two collumns both of them using col-md-6 class and in each collumn i am placing the fields. But even with setting two sub collumns of 3 I can't get the result I want. What am i doing wrong? I am using bootstrap 3
I think you want something like this
I changed col-md-3 to col-md-6.
If I didn't understand correctly, just tell me.
One solution is to clear the float at each point where you want to begin a new block. For example, like this:
<div style="clear:both;"><div></div></div>
Here is the modified code:
<form class="form-inline">
<div class="row">
<div class="col-md-6">
<fieldset>
<legend>Form one</legend>
<div class="col-md-3">
<div class="form-group">
<label for="input1">Input1</label>
<div class="checkbox">
<input id="input1" type="checkbox">
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="input2">Input2</label>
<div class="checkbox">
<input id="input2" type="checkbox">
</div>
</div>
</div>
<div style="clear:both;"><div></div></div>
<div class="col-md-3">
<div class="form-group">
<label for="input3">Input3</label>
<div class="checkbox">
<input id="input3" type="checkbox">
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="input4">Input4</label>
<div class="checkbox">
<input id="input4" type="checkbox">
</div>
</div>
</div>
</fieldset>
</div>
<div style="clear:both;"><div></div></div>
<div class="col-md-6">
<fieldset>
<legend>Form 2</legend>
<div class="col-md-3">
<div class="form-group">
<label for="input5">Input5</label>
<div class="checkbox">
<input id="input5" type="checkbox">
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="input6">Input6</label>
<div class="checkbox">
<input id="input6" type="checkbox">
</div>
</div>
</div>
<div style="clear:both;"><div></div></div>
<div class="col-md-3">
<div class="form-group">
<label for="input7">Input7</label>
<div class="checkbox">
<input id="input7" type="checkbox">
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="input8">Input8</label>
<div class="checkbox">
<input id="input9" type="checkbox">
</div>
</div>
</div>
</fieldset>
</div>
</div>
</form>