Placement of bootstrap 3 forms - html

I'm trying to build my first website and stumbled over a problem.
I can't align my register forms in the center.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content ="width = device-width, initial-scale = 1">
<meta charset="UTF-8">
<title>Login</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
<style type="text/css">
body{font: 14px sans-serif;background-color: slategrey;}
.wrapper{width: 350px; padding: 20px;}
h2 {color:#ff0000}
</style>
</head>
<body>
I can't get the next part to line up in the middle of the page. It just get pushed to the side.
<div align=center>
<h2>Login</h2>
<p>Please fill in your credentials to login.</p>
<form class="form-horizontal" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<div align=center>
<div class="form-group <?php echo (!empty($username_err)) ? 'has-error' : ''; ?>">
<div class="col-xs-2">
<label>Username</label>
<input type="text" name="username"class="form-control" value="<?php echo $username; ?>">
<span class="help-block"><?php echo $username_err; ?></span>
</div>
</div>
</div>
<div class="form-group <?php echo (!empty($password_err)) ? 'has-error' : ''; ?>">
<div class="col-xs-2">
<label>Password</label>
<input type="password" name="password" class="form-control">
<span class="help-block"><?php echo $password_err; ?></span>
</div>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Login">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>


Check the demo here https://www.bootply.com/v5nmPRdDmR, With the following code
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3">
<h2>Login</h2>
<p>Please fill in your credentials to login.</p>
<form class="form-horizontal" action="" method="post">
<div class="form-group">
<label>Username</label>
<input type="text" name="username" class="form-control" value="">
<span class="help-block"></span>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" class="form-control">
<span class="help-block"></span>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Login">
</div>
</form>
</div>
<div class="col-md-3"></div>
</div>


A little bit simpler than example from #ild_flue by using offset class. See https://www.bootply.com/7i5NQn4fiL
<div class="row">
<div class="col-md-3 col-md-offset-3">
<h2>Login</h2>
<p>Please fill in your credentials to login.</p>
<form class="form-horizontal" action="" method="post">
<div class="form-group">
<label>Username</label>
<input type="text" name="username" class="form-control" value="">
<span class="help-block"></span>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" class="form-control">
<span class="help-block"></span>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Login">
</div>
</form>
</div>
</div>

Related

form not submitting on localhost or remote

After submitting the form nothing happens, page doesn't reloads. Out of ideas.
<form action="/departmentinsert.php" method="POST" class="contact-form">
<div class="col-md-12">
<div class="row">
<div class="form-group">
<input class="form-control" id="name" name="name" placeholder="Отделение" type="text">
</div>
</div>
</div>
<div class="col-md-12">
<div class="row">
<button type="submit" name="submit" id="submit">
Добавить <i class="fa fa-paper-plane"></i>
</button>
</div>
</div>
</div>
</form>

to submit the form you will need to use <input type="submit"> instead of the <button> tag
once you update the code I am sure it will work, if you are using PHP it should be like this
<?php
if(isset($_POST['submit']){
// your code
}
?>
if this doesn't work please post your PHP as well so i can check where's the problem
hope this help.

I changed formatting to and it works now. My code now is
<form action="" method="POST" >
<div class="form-group">
<input class="form-group" id="name" name="name" placeholder="Отделение" type="text">
</div>
<div class="form-group">
<input class="form-group" id="title" name="title" placeholder="Заголовок" type="text" size="255">
</div>
<div class="form-group">
<input class="form-group" id="breadcrumb" name="breadcrumb" placeholder="Хлебные крошки" type="text" size="255">
</div>
<div class="form-group">
<input class="form-group" id="pagetitle" name="pagetitle" placeholder="Титул страницы" type="text" size="255">
</div>
<div class="form-group">
Опубликовать?
<input name="active" type="checkbox" value="1" checked>
</div>
<div class="form-group">
<button type="submit" name="submit" id="submit">
Добавить <i class="fa fa-paper-plane"></i>
</button>
</div>
</form>

Upload files to a form

I have a form on my website to allow clients to submit inquiries but I need to add the option of adding files, in this case, it would be photos.
I can't find the proper solution for this. I'm new on this matter and I hope someone can help me.
Here it is the code i have about the form:
<form enctype="multipart/form-data" name="<?=$form_name?>" id="<?=$form_name?>" method="post" action="javascript:void(0);" >
<input type="hidden" name="lang" id="lang" value="<?=$_SESSION["lang"]?>" />
<input type="hidden" name="car_id" id="car_id" value="<?=$_SESSION["car_id"]?>" />
<input type="hidden" name="current_url" id="current_url" value="<?=$_SESSION["current_url"]?>" />
<!--NOME-->
<div class="form-group">
<? $input_name = $form_name."_"."name"; ?>
<label for="<?=$input_name?>"><?=NAME?>*</label>
<input type="text" class="{target:'#<?=$input_name?>_status',tagToload:{'.<?=$input_name?>':'#<?=$input_name?>_status','.script':'#<?=$result_div?>'}} form-control watermark required" name="<?=$input_name?>" value="<?=$_POST[$input_name]?>" id="<?=$input_name?>" placeholder="<?=NAME_PLACEHOLDER?>">
</div>
<!--END NOME-->
<!--EMAIL-->
<div class="form-group">
<? $input_name = $form_name."_"."email"; ?>
<label for="<?=$input_name?>"><?=EMAIL?>*</label>
<input type="email" class="{target:'#<?=$input_name?>_status',tagToload:{'.<?=$input_name?>':'#<?=$input_name?>_status','.script':'#<?=$result_div?>'}} form-control watermark required" name="<?=$input_name?>" value="<?=$_POST[$input_name]?>" id="<?=$input_name?>" placeholder="<?=EMAIL_PLACEHOLDER?>">
</div>
<!--END EMAIL-->
<!--SUBJECT-->
<div class="form-group">
<? $input_name = $form_name."_"."subject_other"; ?>
<label for="<?=$input_name?>"><?=SUBJECT?>*</label>
<input type="text" class="{target:'#<?=$input_name?>_status',tagToload:{'.<?=$input_name?>':'#<?=$input_name?>_status','.script':'#<?=$result_div?>'}} form-control watermark required" name="<?=$input_name?>" value="<?=$_SESSION['subject']?>" id="<?=$input_name?>" placeholder="<?=SUBJECT_PLACEHOLDER?>" <?=(isset($_SESSION["subject"])) ? 'readonly="readonly"' : ''?>>
</div>
<!--END SUBJECT-->
<!--MESSAGE-->
<div class="form-group" style="margin-bottom: 10px;">
<? $input_name = $form_name."_"."message"; ?>
<label for="<?=$input_name?>"><?=MESSAGE?>*</label>
<textarea class="{target:'#<?=$input_name?>_status',tagToload:{'.<?=$input_name?>':'#<?=$input_name?>_status','.script':'#<?=$result_div?>'}} form-control watermark required" name="<?=$input_name?>" id="<?=$input_name?>" placeholder="<?=MESSAGE_PLACEHOLDER?>" rows="3"></textarea>
</div>
<!--END MESSAGE-->
<span class="blue_label blue_label_block blue_label_small" style="text-align: left;">* Campos de preenchimento obrigatório.</span>
<div class="form-group pull-right" style="margin-bottom: 20px;">
<input type="reset" class="btn btn-primary" value="<?=CLEAR?>">
<a type="button" class="btn btn-default ml20" id="formSubmitLink_<?=$form_name?>" href="javascript:;"><?=SEND?></a>
</div>
<br class="clear">
<div class="resultForm" id="<?=$result_div?>"></div>

<div class="form-group">
<label for="photo" class="col-lg-2 control-label">Photo</label>
<div class="col-lg-10">
<input type="file" class="form-control" id="photo" placeholder="Photo">
</div>
</div>

Two of my pages have a small gap under the footer

All of my other pages do not have this gap, I am using Bootstrap but am a beginner. What do you think it could be? Is the whole page coded wrong because the contact form works fine, just when I am on a mobile device I can see a very thin white line under the footer.
<div class="section-md">
<div class="container container-normal">
<div class="row">
<div class="col-md-6 col-sm-6 col-md-offset-3 col-sm-offset-3">
<div class="panel panel-default">
<div class="panel-body">
<?php if (isset($_SESSION[ 'contact_success'])): ?>
<h2>Message Sent</h2>
<div class="alert alert-success">
Your information has been received. We will contact you within 1 business day.
</div>
Back to Homepage
<?php unset($_SESSION[ 'contact_success']) ?>
<?php else: ?>
<h1>Contact Us</h1>
<p class="text-muted">This is our contact page...</p>
<hr>
<div class="error-msg alert alert-danger cnt-error">
<p>Please fill in all required fields.</p>
</div>
<form id="contact_form" action="<?= site_url() ?>contact/save" method="post">
<div class="form-group">
<label for="name" class="form-label">Your Name*</label>
<input id="cnt_name" type="text" class="form-control" name="name" placeholder="Your Name">
</div>
<div class="form-group">
<label for="email" class="form-label">Your Email*</label>
<input id="cnt_email" type="text" class="form-control" name="email" placeholder="user#example.com">
</div>
<div class="form-group">
<label for="subject" class="form-label">Subject*</label>
<input id="cnt_subject" type="text" class="form-control" name="subject" placeholder="This website rocks">
</div>
<div class="form-group">
<label for="message" class="form-label">Comments*</label>
<textarea id="cnt_message" class="form-control" name="message" rows="10" placeholder="Enter a few questions in here..."></textarea>
</div>
<div class="form-group">
<button class="btn btn-primary">Submit</button>
Cancel
</div>
<!-- /.form-group -->
</form>
<?php endif ?>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.section-md -->

I think you had margin in your
Let's try this code
body{
margin: 0;
}

html form methode=post action=URL

i make a form and my submit button does not work.
<!DOCTYPE HTML>
<html lang="en">
<head>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<form id="contact-form" method="post" action="http://www.example.com/?lang=en&p=send" role="form">
<div class="messages"></div>
<div class="controls">
<!-- Name -->
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="form_name">Firstname *</label>
<input id="form_name" type="text" name="name" class="form-control" placeholder="Please enter your firstname *" required="required" data-error="Firstname is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="form_lastname">Lastname *</label>
<input id="form_lastname" type="text" name="surname" class="form-control" placeholder="Please enter your lastname *" required="required" data-error="Lastname is required.">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<!-- End Name -->
<!-- SUBJECT -->
<div class="row">
<div class="col-md-8">
<div class="form-group">
<label for="form_subject">Subject *</label>
<input id="form_subject" type="text" name="subject" class="form-control" placeholder="Please enter your Subject *" required="required" data-error="Subject is required.">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<!-- END SUBJECT -->
<!-- Message -->
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="form_message">Message *</label>
<textarea id="form_message" name="message" class="form-control" placeholder="Message for me *" rows="4" required="required" data-error="Please,leave us a message."></textarea>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-12">
<input type="submit" class="btn btn-success btn-send" value="Send message">
</div>
</div>
<!-- End Message -->
<div class="row">
<div class="col-md-12">
<p class="text-muted"><strong>*</strong> These fields are required.</p>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
when i put the relative address from my send file in the action part than it works.
is it possible on my way?
i include the content part via php in my index.php. I try to open the send.php in my index.php
Thanks!

If i got you right you want to handle the action of the form on the same page. So you have to set the action to:
<form method="post" action="<?=$_SERVER['PHP_SELF'];?>">
And in the PHP part you have to check if the form was submitted. So something like:
<?php
if(isset($_POST['form_message'])){ //check if form was submitted
}
?>

why this form is not submitting?

I am trying to develop a responsive form with twitter bootstrap, but it is not submitting.
Why isn't it submitting?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Generate Reports</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
<link rel="stylesheet" href="css/datepicker.css">
<script src='js/bootstrap-datepicker.js'></script>
<script src='js/bootstrap.js'></script>
<script src="js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript"
src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script type="text/javascript"
src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">
</script>
<script>
$(document).ready(function() {
$('#report_repetitions').change(function() {
var number_of_repetitions=$('#report_repetitions').val();
var container = $('#date_list');
var numItems = $('.date_group').length;alert(numItems);
if(number_of_repetitions>numItems)
{
for(var i=numItems+1;i<=number_of_repetitions;i++)
$('<div class="well"> <div class="date_group" id="group_'+i+'" > <div class="control-group" > <label class="control-label required span5" for="Step1_home_zip">Enter Date Range Text '+i+'<span class="required">*</span></label><div class="controls"><input class="span3" size="5" name="text_'+i+'" maxlength="5" name="Step1[home_zip]" id="report_repetitions" type="text" /></div></div>'
+'<div class="control-group" ><label class="control-label required span5" for="Step1_home_zip">From<span class="required">*</span></label><div class="controls "><div id="from'+i+'" class="input-append date "><input type="text" name="from_'+i+'" ></input><span class="add-on"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i></span></div></div></div><div class="control-group" ><label class="control-label required span5" for="Step1_home_zip">To<span class="required">*</span></label><div class="controls "><div id="to'+i+'" class="input-append date "><input type="text" name="to_'+i+'"></input><span class="add-on"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i></span></div></div></div></div></div>'
+'<script type="text/javascript">'
+'$(function() {'
+' $("#from'+i+'").datetimepicker({'
+' pickTime: false'
+' });'
+'$("#to'+i+'").datetimepicker({'
+' pickTime: false'
+'});});<'
+'/script>').click(function () {
window.open(path);
}).appendTo(container);
}
else if(number_of_repetitions<numItems)
{
alert("kkk");alert(number_of_repetitions);alert(numItems);
for(var i=number_of_repetitions;i<=numItems;i++)
{ alert(i);
('#group_2').remove();
}
}
else
alert("hhh");
});
});
</script>
</head>
<body>
<div class="container">
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<center><h2>Generate Report</h2></center>
</div>
<div class="span4 pull-right"> </div>
</div>
<div class="row-fluid">
<form class="well span12">
<center>
<div class="row-fluid">
<div class="span12">
<form class="form-horizontal" id="report_form" action="insert.php" method="post">
<div id="report_group">
<div class="control-group">
<label class="control-label required span5" for="Step1_email">Improvement Threshold<span class="required">*</span></label>
<div class="controls">
<input class="span4" size="60" maxlength="255" name="Step1[email]" id="Step1_email" type="text" />
</div>
</div>
<div class="control-group">
<label class="control-label required span5" for="Step1_home_zip">Services Top Threshold <span class="required">*</span></label>
<div class="controls">
<input class="span4" size="5" maxlength="5" name="Step1[home_zip]" id="Step1_home_zip" type="text" />
</div>
</div>
<div id="date_list">
<div class="well">
<div class="date_group" id="group_1" >
<div class="control-group" id="date_group">
<label class="control-label required span5" for="Step1_home_zip">Enter Date Range Text 1<span class="required">*</span></label>
<div class="controls">
<input class="span3" size="5" maxlength="5" name="text_1" id="report_repetitions" type="text" />
</div>
</div>
<div class="control-group" >
<label class="control-label required span5" for="Step1_home_zip">From<span class="required">*</span></label>
<div class="controls ">
<div id="from1" class="input-append date ">
<input type="text" name="from_1" ></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
</div>
</div>
<div class="control-group" >
<label class="control-label required span5" for="Step1_home_zip">To<span class="required">*</span></label>
<div class="controls ">
<div id="to1" class="input-append date ">
<input type="text" name="to_1"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
</div>
</div> </div>
</div>
</div>
<div class="pull">
<button type="submit" class="btn btn-primary">Submit</button>
<input type="reset" class="btn" value="Reset">
</div>
</div>
</form>
</div>
</center>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$(function() {
$("#from1").datetimepicker({
pickTime: false
});
$("#to1").datetimepicker({
pickTime: false
});
});
</script>
</body>
</html>
insert.php also there on same folder
but it not moving to insert.php

You have nested forms. This is invalid and the cause of your problem.
Remove the extra form. Use a validator.

You have nested forms, which is invalid syntax.
<form class="well span12">
This should have been a div instead

<input type="submit" name="submit" value="Submit">
Can you try this

Replace the
<button type="submit" class="btn btn-primary">Submit</button>
with
<input type="submit" class="btn btn-primary" value="Submit" />