Please I'm trying to use bootstrap to change my website look however when I try to change the form of my login page it seems to load when i click on submit, but does nothing. Any help !!
Old code :
<form method="post" name="login" action="">
<table align="center">
<tr><td>
<table align="center">
<tr>
<td align="right"><font face="Arial,Helvetica" size="-1"><strong>Username:</strong></font></td>
<td align="left"><input type="text" name="username"></td>
</tr>
<tr>
<td align="right" width="30%"><font face="Arial,Helvetica" size="-1"><strong>Password:</strong></font></td>
<td align="left"><input type="password" name="password"></td>
</tr>
</table>
</td></tr>
<tr><td>
<center><input type="submit" name="Submit" value="Login"></center>
</td></tr>
</table>
</form>
New code :
<div class="container">
<form class="form-signin" role="form" method="post" name="login" action="">
<h2 class="form-signin-heading">Please sign in</h2>
<input type="text" class="form-control" placeholder="Username" required autofocus>
<input type="password" class="form-control" placeholder="Password" required>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<!--center><input class="btn btn-lg btn-primary btn-block" type="submit" name="Submit" value="Login"></center-->
<button class="btn btn-lg btn-primary btn-block" type="submit" name="Submit" value="Login">Sign in</button>
</form>
</div> <!-- /container -->
Seems like you forgot the attribute name in the input, try this:
<div class="container">
<form class="form-signin" role="form" method="post" name="login" action="">
<h2 class="form-signin-heading">Please sign in</h2>
<input name="username" type="text" class="form-control" placeholder="Username" required autofocus>
<input name="password" type="password" class="form-control" placeholder="Password" required>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<!--center><input class="btn btn-lg btn-primary btn-block" type="submit" name="Submit" value="Login"></center-->
<button class="btn btn-lg btn-primary btn-block" type="submit" name="Submit" value="Login">Sign in</button>
</form>
</div> <!-- /container -->
<form method="post" name="login" action="">
Did you intentionally leave action blank? Without an action for it to post to, of course it's going to do nothing.
Related
I am trying to scrape some data from a website using R, but every once in a while it asks for my password. How can I have R fill in the form?
The html code for the form looks like this:
<form action="/en/login" method="post">
<input type="hidden" name="_target_path" value="http://website.com/" />
<div style="margin-top:10px;">
<input type="text" id="username" name="_username" value="" class="inputLoginBox" placeholder="your username" tabindex="1"/></td>
</div>
<div style="margin-top:10px;">
<input type="password" id="password" name="_password" class="inputLoginBox" placeholder="your password" tabindex="2"/></td>
</div>
<div style="margin-top:10px;">
<input type="checkbox" id="remember_me" name="_remember_me" class="inputCheckbox" tabindex="3"/>
<label for="remember_me">remember me</label>
forgot password?
</div>
<div style="margin-top:10px;">
<button type="submit" class="submitButton" name="login[go]" tabindex="4" style="font-size:1.3em;">login</button>
<br><br>
</div>
</form>
i have a problem when my view render, i am using a input group class to join a textbox and a input but the problem is that if you see they doesn't get together, i already find a solution that is to erase part of the 'site.css' mvc project make from default but that doesn't work for me.
here is my code.
#using (Html.BeginForm())
{
<div class="input-group">
<span class="input-group-btn">
<input type="submit" value="Filter" class="btn btn-default" />
</span>
Product name: #Html.TextBox("id", null, new {#class = "form-control"})
</div>
}
and its views like this
Try changing the width of the div.
UPDATE:
I am confused on why your TextBox and Label(Product Name) are below the span.
Here is a working example with add-ons on both sides:
<div class="form-group">
<label class="control-label">Input addons</label>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Button</button>
</span>
</div>
</div>
Your problem is that "Product name:" falls inside the input-group but isn't in a input group compatible tag. Here is a plunker with some options. enter link description here
<form action="/Products/Index" method="post">
<div class="input-group">
<span class="input-group-addon"> Product name:</span>
<input class="form-control" id="id" name="id" type="text" value="" />
<span class="input-group-btn">
<input type="submit" value="Filter" class="btn btn-default" />
</span>
</div>
</form>
<form action="/Products/Index" method="post">
<label>Product name:</label>
<div class="input-group">
<input class="form-control" id="id" name="id" type="text" value="" />
<span class="input-group-btn">
<input type="submit" value="Filter" class="btn btn-default" />
</span>
</div>
</form>
I have updated meteor project to 0.8.0 and have installed iron-router package. Did everything that is required but routing not happening. It is showing the front page i.e I am able to login into the application. But after that not able to go to any of the pages. My homepage have so many buttons as can be seen in header.html file. When I clicked on grumble link, in url it is displaying that "localhost:3000/grumble". But nothing is getting displayed on that form.
--> My router.js page is:
Router.configure({
layoutTemplate: 'layout'
});
Router.map(function() {
this.route('issues', {path:'/'});
this.route('issues', {path:'/issues'});
this.route('closedIssues', {path:'/closedIssues'});
this.route('subscribedKeywords', {path:'/subscribedKeywords'});
//this.route('grumble');
//this.route('grumble2');
this.route('grumble', {path:'grumble'});
this.route('grumble2', {path:'grumble2'});
this.route('issuePage', {
path:'/issues/:_id',
data: function() {Session.set('currentIssueId', this.params); }
});
this.route('closedIssuePage', {
path:'/closedIssues/:_id',
data: function() { Session.set('currentClosedIssueId', this.params); }
});
});
var requireLogin = function() {
if ( Meteor.user())
this.render(this.params);
else if (Meteor.loggingIn())
this.render('loading');
else
this.render('accessDenied');
this.stop();
}
var clearErrors = function() {
clearErrors();
this.render(this.params);
this.stop();
}
Router.onBeforeAction(requireLogin, {only: 'grumble'});
Router.onBeforeAction(clearErrors);
--> Header.html file is from where grumble.html has been called meas href is present in this page to transfer the control:
<template name="header">
<header class="navbar">
<p>inside header.html</p>
<div class="navbar-inner">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-coll
apse">
</a>
<a class="details btn" href="{{pathFor 'grumble'}}">Grumble</a>
{{#if currentUser}}
<a class="details btn" href="{{issuesPath}}">See Issues</a>
<a class="details btn" href="{{closedIssuesPath}}">Closed Issues</a>
<a class="details btn" href="{{subscribedKeywordsPath}}">Watchlist</a>
{{> notifications}}
{{/if}}
<span class="nav pull-right">
<li>{{> loginButtons}}</li> <!--should be {{> }} here in order to display login functionality-->
</span>
</div>
</header>
</template>
--> Grumble.html, the file to which control should be transferred means routing has been done for this page to get the control
<template name="grumble">
<p>inside form i.e. grumble.html</p>
<form class="main">
<fieldset>
<legend>New Grumble</legend>
<table border="0">
<tr>
<td>
<label class="control-label" for="shortdesc"><span style="color:red;">*</span> Description</label>
<input name="shortdesc" type="text" value="" placeholder="Radiator not working"/>
</td>
<td>
<label class="control-label" for="urgency">Urgency</label>
<select name="urgency" >
<option value="high">High</option>
<option value="medium">Medium</option>
<option value="low">Low</option>
</select>
</td>
</tr>
<tr>
<td>
<label class="control-label" for="date">Date</label>
<input name="date" type="date" value="{{date}}" />
</td>
<td>
<label class="control-label" for="time">Time</label>
<input name="time" type="time" value="{{time}}" />
</td>
</tr>
<tr>
<td>
<label class="control-label" for="dept">Department/Building</label>
<input name="dept" type="text" value="" placeholder="Physiotherapy"/>
</td>
<td>
<label class="control-label" for="unit">Unit</label>
<input name="unit" type="text" value="" placeholder="Occupational Therapy"/>
</td>
</tr>
<tr>
<td>
<label class="control-label" for="room">Room</label>
<input name="room" type="text" value="" placeholder="P2"/>
</td>
<td>
<label class="control-label" for="category">Category</label>
<input name="category" type="text" value="" placeholder="Utility"/>
</td>
</tr>
<tr>
<td>
<label class="control-label" for="details">Details</label>
<textarea name="details" value="" placeholder="Broken radiator next to vending machine."></textarea>
</td>
<td>
<label class="control-label" for="anonymous">Anonymity</label>
<select name="anonymous" >
<option value="anonymous">Anonymous</option>
<option value="identifiable">Identifiable</option>
</select>
</td>
</tr>
</table>
<div class="control-group">
<div class="controls">
<input type="submit" value="Submit" class="btn btn-primary"/>
</div>
</div>
</fieldset>
</form>
</template>
<template name="grumble2">
<form class="main">
<fieldset>
<legend>New Grumble</legend>
<table border="0">
<tr>
<td>
<label class="control-label" for="details"><span style="color:red;">*</span> Description</label>
<textarea name="details" value="" placeholder="Broken radiator next to vending machine."></textarea>
</td>
</tr>
</table>
<div class="control-group">
<div class="controls">
<input type="submit" value="Submit" class="btn btn-primary"/>
</div>
</div>
</fieldset>
</form>
</template>
Please help me where I am wrong as have read the article : http://www.manuel-schoebel.com/blog/iron-router-tutorial. And tried to make changes but not working. Any pointers please.
I think the route this.route('issues', {path:'/issues'}); overwrites the route this.route('issues', {path:'/'}); (they have the same name!), so you have no route for /. Try changing name on one of them, and see if that makes a different.
You're missing a "/" in front of your grumble route path. It should be this.route('grumble', {path:'/grumble'})
Working on a form with Bootstrap CSS, have the form class as "form-inline", but for some reason, the form refuses to actually display inline.
Here's a fiddle, showing the problem:
http://jsfiddle.net/5wBzE/
Here's the HTML:
<iframe id="AweberFormSubmitFrame" style="display: none" name="AweberFormSubmitFrame" src="about:blank"></iframe>
<form id="before_header" target="AweberFormSubmitFrame" method="post" class="form-inline" action="http://www.aweber.com/scripts/addlead.pl">
<div style="display: none;">
<input type="hidden" name="meta_web_form_id" value="2074084490" />
<input type="hidden" name="meta_split_id" value="" />
<input type="hidden" name="listname" value="foreverjobless" />
<input type="hidden" name="redirect" value="http://www.aweber.com/thankyou.htm?m=default" id="redirect_f916c5c4ae42ade190efaef62fd11c16" />
<input type="hidden" name="meta_adtracking" value="FJ:_Header" />
<input type="hidden" name="meta_message" value="1" />
<input type="hidden" name="meta_required" value="email" />
<input type="hidden" name="meta_tooltip" value="" />
</div>
<div class="af-element">
<div class="form-inline">
<input class="text form-control" id="awf_field-60198198" type="text" name="email" value="" tabindex="500" />
</div>
<div class="af-clear"></div>
</div>
<div class="af-element buttonContainer">
<button name="submit" onClick="return _submit_form_header(this.form);" class="submit btn btn-primary btn-lg" type="submit" value="Submit" tabindex="501">Subscribe</button>
<div class="af-clear"></div>
</div>
</div>
</div>
<div style="display: none;">
<img src="http://forms.aweber.com/form/displays.htm?id=TAzsLAwcLCycDA==" alt="" />
</div>
</form>
<div id="after_header" style="width:99%;border:gray 1px solid;display:none;background-color:#ccc;Padding:5px;height:100px;">Thank you</div>
Any tips or pointers in the right direction is appreciated!
Solved this by taking out the unnecessary aweber divs.
I am trying to add this simple search form while applying form inline class so that controls appear next to each other, but I get the controls displayed above each other and the search bottom in white and looking strange, so can someone please tell me what I am missing here?
<div class="container">
<div class="row">
<div class="col-md-8">
<form class="form-inline" action="#" method="post">
Search<input type="text" id="search" name="search" class="input-small" placeholder="Search...">
<select id="searchon" name="searchon">
<option value="0">First Name</option>
<option value="1">Last Name</option>
</select>
<button type="submit" class="btn">Search</button>
</form>
</div>
</div>
</div>
From Bootstrap reference, for inline forms :
This only applies to forms within viewports that are at least 768px
wide.
and as far as your layout is concerned,
<div class="container">
<div class="row">
<div class="col-md-8">
<form class="form-inline" action="#" method="post">
Search<input type="text" id="search" name="search" class="input-small" placeholder="Search...">
<select id="searchon" name="searchon">
<option value="0">First Name</option>
<option value="1">Last Name</option>
</select>
<button type="submit" class="btn">Search</button>
</form>
</div>
</div>
</div>
its perfectly fine..inline :
working demo
I had similar issue with form-inline. For me input-group within form-inline worked to keep following input and button in a row next to each other instead of one on top of the other.
<form class="form-inline">
<div class="input-group">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</div>
</form>
I had a similar issue with a code snippet from bootstrap. I found that the 2 classes 'control-group' and 'controls' broke the inline. removing the 2 classes fixed it for me.
<div class="control-group">
<label class="control-label" for="Name">Name</label>
<div class="controls">
<input type="text" id="Name" placeholder="Name">
</div>
</div>
to:
<label class="control-label" for="Name">Name</label>
<input type="text" id="Name" placeholder="Name">
Yes! removing the second class from the div worked for me.
<form class="form-inline name=" search">
<fieldset>
<div class="form-group">
<input name="rego" id="search_box" style="text-transform:uppercase" maxlength="6" type="text" class="form-control input-md" placeholder="PLATE NO">
<input class="btn btn-lg btn-primary" type="submit" value=" Programe Tag " />
</div>
</fieldset>
to
<form class="form-inline name=" search">
<fieldset>
<input name="rego" id="search_box" style="text-transform:uppercase" maxlength="6" type="text" class="form-control input-md" placeholder="PLATE NO">
<input class="btn btn-lg btn-primary" type="submit" value=" Programe Tag " />
</fieldset>