I have this in a bootstrap form:
Name
"/>
<div class="form-group ">
<label class="control-label col-sm-3 col-xs-3 col-md-3 col-lg-3" for="email">E-mail</label><?php echo #$_SESSION['ctform']['email_error'] ?>
<div class="col-sm-7 col-xs-7 col-md-7 col-lg-7">
<input class="form-control" id="email" name="ct_email" type="text" value="<?php echo htmlspecialchars(#$_SESSION['ctform']['ct_email']) ?>"/>
</div>
</div>
I cannot define the height of my and as a result I have a lot of space (200px) between the fields. Any idea how to solve this? Thank you.
Try to do this way:
var el = document.querySelector(".form-group");
el.style.width = "200px";
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</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/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form class="form-inline">
<div class="form-group">
<label for="email">Email:</label>
<?php echo #$_SESSION['ctform']['email_error'] ?>
<input class="form-control" id="email" name="ct_email" type="text" value="<?php echo htmlspecialchars(#$_SESSION['ctform']['ct_email']) ?>"/>
</div>
</form>
</body>
</html>
https://www.w3schools.com/code/tryit.asp?filename=FENK34MFH506
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 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>
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>
in the following, I am using filter('input:text,textarea') to set input fields as read only, (and make them opaque). However, this selector is selecting only the text inputs, and not the textarea. What am I doing wrong?
<!DOCTYPE html>
<html>
<head>
<title>setReadOnly() Test</title>
<link rel="stylesheet" type="text/css" href="../styles/core.css">
<link rel="stylesheet" type="text/css" href="test.setReadOnly.css">
<script type="text/javascript" src="../scripts/jquery-1.4.js"></script>
<script type="text/javascript" src="../scripts/jqia2.support.js"></script>
<script type="text/javascript">
(function($){
$.fn.setReadOnly = function(readonly) {
return this.filter('input:text,textarea')
.attr('readOnly',readonly)
.css('opacity', readonly ? 0.5 : 1.0)
.end();
};
})(jQuery);
</script>
<script type="text/javascript">
$(function(){
$('#sameAddressControl').click(function(){
var same = this.checked;
$('#billAddress').val(same ? $('#shipAddress').val():'');
$('#billCity').val(same ? $('#shipCity').val():'');
$('#billState').val(same ? $('#shipState').val():'');
$('#billZip').val(same ? $('#shipZip').val():'');
$('#bill_random_field').val(same ? $('#ship_random_field').val():'');
$('#billingAddress input').setReadOnly(same);
});
});
</script>
</head>
<body>
<div data-module="Test setReadOnly()">
<form name="testForm">
<div>
<label>First name:</label>
<input type="text" name="firstName" id="firstName"/>
</div>
<div>
<label>Last name:</label>
<input type="text" name="lastName" id="lastName"/>
</div>
<div id="shippingAddress">
<h2>Shipping address</h2>
<div>
<label>Street address:</label>
<input type="text" name="shipAddress" id="shipAddress"/>
</div>
<div>
<label>City, state, zip, random_field:</label>
<input type="text" name="shipCity" id="shipCity"/>
<input type="text" name="shipState" id="shipState"/>
<input type="text" name="shipZip" id="shipZip"/>
<textarea name="random_field" rows="2" cols="20" id="ship_random_field"></textarea>
</div>
</div>
<div id="billingAddress">
<h2>Billing address</h2>
<div>
<input type="checkbox" id="sameAddressControl"/>
Billing address is same as shipping address
</div>
<div>
<label>Street address:</label>
<input type="text" name="billAddress"
id="billAddress"/>
</div>
<div>
<label>City, state, zip, random_field:</label>
<input type="text" name="billCity" id="billCity"/>
<input type="text" name="billState" id="billState"/>
<input type="text" name="billZip" id="billZip"/>
<textarea name="random_field" rows="2" cols="20" id="bill_random_field"></textarea>
</div>
</div>
</form>
</div>
</body>
</html>
Try to change the line $('#billingAddress input').setReadOnly(same); to $('#billingAddress input,textarea').setReadOnly(same);
Update
Actually, must be like you said in the comment: $('#billingAddress input,#billingAddress textarea').