I am using Twitter's Bootstrap to build a form (served by django). I want to have the form centered on the page but I'm running into some problems.
Here is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Form</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="/bootstrap/css/bootstrap.css" rel="stylesheet">
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<link href="/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="span12" style="text-align:center; margin: 0 auto;">
<form class="form-horizontal" method="post" action="/form/">
<fieldset>
<legend>Please login</legend>
<div class="control-group">
<label class="control-label" for="id_username">Username</label>
<div class="controls">
<input name="username" maxlength="100" placeholder="Enter your username..." type="text" class="input-large" id="id_username" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="id_password">Password</label>
<div class="controls">
<input name="password" maxlength="100" placeholder="Enter your password..." type="password" class="input-large" id="id_password" />
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="/bootstrap/js/jquery.js"></script>
<script src="/bootstrap/js/bootstrap-transition.js"></script>
<script src="/bootstrap/js/bootstrap-alert.js"></script>
<script src="/bootstrap/js/bootstrap-modal.js"></script>
</body>
</html>
I've excluded some additional django logic ({% csrf_token %}, some if statements, etc), but this should recreate the problem.
The actual input elements (username and password textboxes) are centering like I expected, but the labels remain to the far left of the page. Am I missing markup somewhere or do I have to override some of the control-label CSS?
You need to include your form inside a container, the bootstrap already comes with a container class that is width:940px so you can wrap everything inside and it'll center automatically, like so:
<div class="container">
<div class="row">
<div class="span12">
<form class="form-horizontal" method="post" action="/form/">
<fieldset>
<legend>Please login</legend>
<div class="control-group">
<label class="control-label" for="id_username">Username</label>
<div class="controls">
<input name="username" maxlength="100" placeholder="Enter your username..." type="text" class="input-large" id="id_username" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="id_password">Password</label>
<div class="controls">
<input name="password" maxlength="100" placeholder="Enter your password..." type="password" class="input-large" id="id_password" />
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
Related
I am trying to build a todo app based on Materialize-css. I want the input-field to be on the same line, as the submit button which should include a materialize icon. That's what I have currently:
<div class="col s12">
Hinzufügen
<div class="input-field inline">
<input id="todo" type="email" class="validate">
<label for="todo">todo</label>
<input type ="submit" class ="btn waves-effect waves-light inline" value = "Submit"/>
</div>
</div>
Here's a picture about how it looks currently. I just don't know how to add the icon to the submit button, because there is no opening and closing tag, it's just an input tag. I need that input-tag to be able to use php code after the submition.
Todo-App
You just have to replace the input tag with a button tag like in the example, hope it will help
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<header>
<nav>
<div class="nav-wrapper blue darken-3">
Charts
<!-- <i class="material-icons">menu</i> -->
<ul class="right hide-on-med-and-down">
<!-- <li>Sass</li> -->
</ul>
</div>
</nav>
<!-- <ul class="sidenav" id="mobile-demo">
<li>Sass</li>
</ul> -->
</header>
<main >
<div class="col s12">
Hinzufügen
<div class="input-field inline">
<input id="todo" type="email" class="validate">
<label for="todo">todo</label>
<button class="btn waves-effect waves-light" type="submit" name="action">Submit
<i class="material-icons right">send</i>
</button>
</div>
</div>
</main>
<footer>
</footer>
</body>
</html>
I do not write bootstrap code but some how i manage to do it now but form does not looks good. two issue is there. How to fix my issue. thanks
1) buttons are not properly aligned.
2) how to create gap between two buttons.
<form>
<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-group">
<label for="exampleTextarea">Example textarea</label>
<textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-2 form-group">
<label for="textbox1">Phone No</label>
<input class="form-control" id="textbox1" type="text" />
</div>
<div class="col-md-2 form-group">
<label for="textbox2">Post Code</label>
<input class="form-control" id="textbox2" type="text" />
</div>
<span class="clearfix"></span>
<button type="submit" class="btn btn-primary">Submit</button>
<button type="reset" class="btn btn-primary" value="Reset">Reset</button>
</div>
</div>
</form>
here is the code for you:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.m{
margin:10px;
}
</style>
</head>
<body style="background-color: green">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<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-group">
<label for="exampleTextarea">Example textarea</label>
<textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-2 form-group">
<label for="textbox1">Phone No</label>
<input class="form-control" id="textbox1" type="text" />
</div>
<div class="col-md-2 form-group">
<label for="textbox2">Post Code</label>
<input class="form-control" id="textbox2" type="text" />
</div>
<span class="clearfix"></span>
<button type="submit" class="btn btn-primary m">Submit</button>
<button type="reset" class="btn btn-primary m" value="Reset">Reset</button>
</div>
</div>
</form> </body>
</html>
check this out fiddle: https://jsfiddle.net/sh8k20xx/
custom forms within NetSuite require the use of field tags like NLFORM and NLCATEGORY, etc. However it's unclear to me how to incorporate these tags properly into the template of a responsive form so it works.
Here's what I have so far:
<!DOCTYPE html>
<html lang="en">
<head>
<Title>General Contact Form</Title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<style type="text/css">
h1, p {
font-family: 'Lato', sans-serif;
}
</style>
</head>
<Body>
<div class="container">
<h1>
<center>Submit a Message</center>
</h1>
<form class="form-horizontal">
<NLFORM>
<br>
<fieldset>
<legend>How Can We Help You?</legend>
<div class="form-group">
<p class="control-label col-sm-2">Type of Inquiry*</p>
<div class="col-sm-10">
<NLCATEGORY>
</div>
</div>
<div class="form-group">
<p class="control-label col-sm-2">Subject*</p>
<div class="col-sm-10"><NLTITLE> </div></div>
<div class="form-group">
<p class="control-label col-sm-2">Message*</label>
<div class="col-sm-10"><NLINCOMINGMESSAGE> </div></div>
<div class="form-group">
<label class="control-label col-sm-2" for="NLFILE">File Upload</label>
<div class="col-sm-10"><NLFILE> </div></div>
</fieldset>
<fieldset>
<legend>Contact Information</legend>
<div class="form-group">
<label class="control-label col-sm-2" for="first-name">First Name*</label>
<div class="col-sm-10">
<NLFIRSTNAME></div></div>
<div class="form-group">
<label class="control-label col-sm-2" for ="NLLASTNAME">Last Name*</label>
<div class="col-sm-10"><NLLASTNAME></div></div>
<div class="form-group">
<label class="control-label col-sm-2" for="NLEMAIL">E-mail*</label>
<div class="col-sm-10"><NLEMAIL> </div></div>
<div class="form-group">
<label class="control-label col-sm-2" for="NLPHONE">Phone</label>
<div class="col-sm-10"><NLPHONE> </div></div>
<div class="form-group">
<label class="control-label col-sm-2" for="NLCOUNTRY">Country</label>
<div class="col-sm-10"><NLCOUNTRY> </div></div>
</fieldset>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" value="Submit"> - or -
<input type="button" value="Reset" onclick="page_reset(); return false;"></div></div>
<NLSUBSIDIARY>
<br>
<p align=center>Fields marked with an<img src="http://shopping.na2.netsuite.com/core/media/media.nl?id=35211&c=4382721&h=2eef11083f182592e0bb">are required.</p>
</form>
</Body>
</HTML>
the form fields do respond to resizing the browser window, but NetSuite is not able to properly create a record using this particular form. can anyone see what I'm doing wrong here!?
here's the form URL: http://www.boxcomponents.com/support-form
NetSuite Field Tags are controlled from within the UI; so field width is fixed and doesn't accept percentages; there are also drop-down menus which have a fixed width, which is mildly annoying. I can't seem to get the form to respond properly without removing all of NetSuite's tags.
What you'll need to do is process the form with script when it opens. Add a script tag after the </form> tag to add and remove classes from the form elements.
Also this is redundant and you'll end up with some sort of broken form:
<form class="form-horizontal">
<NLFORM>
So for instance you'd just have:
<NLFORM>
...
</form>
<script>
jQuery(function($){
$("#main_form").addClass('form-horizontal');
});
</script>
I have created a bootstrap form and I want to add fields on the fly before the submit button is pressed. For example, when a user clicks 1 child, another div should ask Child's name and age and if the user selected 2 kids, it should ask for both kids before the user reaches the submit button. Just like hotels.com and expedia.com ask for child age when booking:
My code so far:
<!DOCTYPE html>
<html>
<head>
<title>Check</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<div class="container">
<div class="workarea">
<center>Let us know your situation <br><br>
<form class="form-inline">
<div class="form-group">
<label for="age">I am </label>
<input type="number" name="age" min=0 max=99 class="form-control" placeholder="Age" /> years old <br>
<select class="selectpicker form-control" required name="maritalStatus">
<option value="married">Married</option>
<option value="single">Single</option>
</select>
<label for="kids">with <label>
<input type="number" name="kids" min=0 max=5 class="form-control" placeholder="kids"/>
</center><br>
<center><input type="submit" value="Get me started" class="btn btn-lg btn-info" name="firstpage"/></center>
</form>
</div>
</div>
</body>
</html>
I have a site(wordpress), and I received a pre-made landing page to upload to my site.
This landing page has a button which supposed to send the input that a user enters (name, last name) to a file named results.php
Right now the "search now" button does nothing.
I haven’t figured out how to make it work.
Please help,
Many thanks
this is the html/php page:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>yoursite.com</title>
<link href="img/favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/responsive.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- Header -->
<header id="header">
<div class="wrapper cf">
<h1 class="site-logo"><img src="img/logo.png" alt="yoursite.com"></h1>
<div class="arrested">
<div class="arrested-title">.. Today:</div>
<div class="arrested-list">
<ul>
<li><span><img src="img/mug.jpg" alt=""></span><span>John Smith</span></li>
<li><span><img src="img/mug.jpg" alt=""></span><span>John Smith</span></li>
<li><span><img src="img/mug.jpg" alt=""></span><span>John Smith</span></li>
<li><span><img src="img/mug.jpg" alt=""></span><span>John Smith</span></li>
<li><span><img src="img/mug.jpg" alt=""></span><span>John Smith</span></li>
</ul>
</div>
</div>
</div>
</header>
<!-- // Header -->
<!-- Content -->
<div id="main">
<div class="wrapper cf">
<div class="search-content cf">
<div class="search-secure">All searches are Secure</div>
<div class="search-header cf">
<div class="search-header-content">
<div class="search-header-content-inn">
<h2 class="search-title"><span>yoursite.com</span> Search Service</h2>
<div class="search-database">Database Update on September 8, 2015</div>
</div>
</div>
<div class="search-header-sidebar">
<div class="search-map"><img src="img/map.png" alt=""></div>
</div>
</div>
<div class="search-form cf">
<div class="search-start"><span>Start Your Search Below</span></div>
<div class="cell">
<input id="firstname" type="text" name="firstname" value="" placeholder="FIRST NAME" />
</div>
<div class="cell">
<input id="lastname" type="text" name="lastname" value="" placeholder="LAST NAME" />
</div>
<div class="cell">
<select id="state" name="state"><option value="00">SELECT STATE</option><option value="ALL">Nationwide</option><option value="AL">AL</option><option value="AK">AK</option><option value="AR">AR</option><option value="AZ">AZ</option><option value="CA">CA</option><option value="CO">CO</option><option value="CT">CT</option><option value="DC">DC</option><option value="DE">DE</option><option value="FL">FL</option><option value="GA">GA</option><option value="HI">HI</option><option value="IA">IA</option><option value="ID">ID</option><option value="IL">IL</option><option value="IN">IN</option><option value="KS">KS</option><option value="KY">KY</option><option value="LA">LA</option><option value="MA">MA</option><option value="MD">MD</option><option value="ME">ME</option><option value="MI">MI</option><option value="MN">MN</option><option value="MO">MO</option><option value="MS">MS</option><option value="MT">MT</option><option value="NE">NE</option><option value="NH">NH</option><option value="NJ">NJ</option><option value="NM">NM</option><option value="NV">NV</option><option value="NC">NC</option><option value="ND">ND</option><option value="NY">NY</option><option value="OH">OH</option><option value="OK">OK</option><option value="OR">OR</option><option value="PA">PA</option><option value="RI">RI</option><option value="SD">SD</option><option value="SC">SC</option><option value="TN">TN</option><option value="TX">TX</option><option value="UT">UT</option><option value="VA">VA</option><option value="VT">VT</option><option value="WA">WA</option><option value="WI">WI</option><option value="WV">WV</option><option value="WY">WY</option></select>
</div>
<div class="cell btn">
<input type="submit" name="submit" value="Search Now" />
</div>
</div>
<div class="search-incs cf">
<h3 class="search-title">Records on File:</h3>
<div class="search-incs-list cf">
<ul>
<li>And More...</li>
</ul>
</div>
<div class="search-report"></div>
</div>
</div>
</div>
</div>
<!-- // Content -->
<!-- Footer -->
<footer id="footer">
<div class="wrapper cf">
<div class="fnav cf">
<ul>
<li>Home</li>
<li>Login</li>
<li>Help</li>
<li>Privacy</li>
<li>Terms</li>
</ul>
</div>
<div class="fcopy">
<p>© Copyright 2015 yoursite.com. All Rights Reserved.</p>
</div>
</div>
</footer>
<!-- // Footer -->
</body>
</html>