I created a website called diditdrop.com. Within the website there is a form where the user enters a number and then submits the number. On the desktop version of the site, the form works great. On the mobile version, the form is not responsive (i.e. i tap on the screen and nothing focuses or pops up. Additionally, the button underneath it doesn't work either).
I'm not sure what to do. I've been stuck on it for a few hours now. I've pasted a snippet of my code below, however, it doesn't look too strange. If someone could take a look at my site, and then recommend a better way of implementing, I would sincerely appreciate it.
<form class = "form-inline" action="https://formspree.io/x#gmail.com" method="POST">
<div class= "form-group">
<span>
<input type="tel" id = "form1" placeholder="digits here" tabindex="1" class="boxed form-control" name="number"/><br>
</span>
<span>
<input type="submit" id = "buttonmove" class="btn boxed" value="get dat new new"name="number" />
</span>
</div>
</form>
Add the following code it will work:
add the style="float:left" to the image like below
<div id="pictureface" class="col-lg-6">
<img style="float:left" class="img-responsive" src="http://static.stereogum.com/uploads/2016/09/CtUYD4uWYAIB1MH-1475280486.jpg">
</div>
Related
Okay, so the thing is, I have a camera connected localy. Every time I make a request for the static URL it will always provoid a new picture.
So basicly, the picture is a static input...
I would like to be able to click on a lable (My input is hidden (CSS)) to upload the picture. Futher more, it will go into a editor. I just don't know how to grab the picture from a url.
Snippet is a example, with a static picture (Not the one I will be using localy)
I just need to grap the picture from a input, within my form.
(This is to make ID badges, a localy network setup)
<form action="#" method="POST" role="form">
<input type="file" acccept="images/" class="form-control" id="uploaded-img" accept="image/*">
<div class="upload-button">
<label for="uploaded-img">
<span class="label-text">Velg Bilde</span><span class="upload-icon"><i class="fa fa-upload"></i></span>
</label>
</div>
<input type="text" value="http://nortek.media/1.jpg" class="form-control-2" id="uploaded-img-2">
<div class="upload-button">
<label for="uploaded-img-2">
<span class="label-text">Ta Bilde</span><span class="upload-icon"><i class="fa fa-camera-retro"></i></span>
</label>
</div>
</form>
Thanks for help in advanced!
im very new to html and am making a basic rock paper scissor page where you can select the image to choose your action. My issue is that it always selects the last option in the html.
<form action="/result <%#choice = "rock"%>">
<div id="rock_button" class="slideRight">
<input type="image" src="http://i.imgur.com/XT41ZXk.jpg" alt="Rock";>
</div>
</form>
<form action="/result <%#choice = "paper"%>">
<div id="paper_button" class="slideUp">
<input type="image" src="http://i.imgur.com/r1GckhD.jpg" alt="Paper";>
</div>
</form>
<form action="/result <%#choice = "scissors"%>">
<div id="scissors_button" class="slideLeft">
<input type="image" src="http://i.imgur.com/ttUlD5y.jpg" alt="Scissors";>
</div>
</form>
So from the above code, #choice is always set to "scissors". regardless of which picture is clicked on. ive tried putting onclick="<%#choice = "paper"%>" within th input, without any luck and creating one large form for all three picures but nothing has worked. Thanks for any help provided.
The choice variable is only used within the current page: Before any of the images is even clicked.
Use one form. Use buttons. Give them a name and a value. Read the form data in the server side program that acts as your form handler.
<form action="/result">
<button id="rock_button" class="slideRight" name="choice" value="rock">
<img src="http://i.imgur.com/XT41ZXk.jpg" alt="Rock">
</button>
<button id="paper_button" class="slideUp" name="choice" value="paper">
<img src="http://i.imgur.com/r1GckhD.jpg" alt="Paper">
</button>
<button id="scissors_button" class="slideLeft" name="choice" value="scissors">
<img src="http://i.imgur.com/ttUlD5y.jpg" alt="Scissors">
</button>
</form>
Then, in the program that handles the /result URL, you would do something along the lines of:
my $choice = $c->request->params->{choice};
The specifics depending on your choice of server side language.
I am trying to make a basic log in system. I am mixing and matching bootstrap. Signing in layout is done. When I click on sign up, it takes me to another form field and it also works. For some reason when I click on forgot password, it should take me to forgot password page but it does not and nothing happens. I have the "forgotten password" page an ID but whenever I put that ID, the sign in stops working and format messes up.
Here is my code. I added js/css bootstrap code also.
http://jsfiddle.net/8cjrj118/1/
Here is my part of my code for the forgotten password form. I took off the id of "forgotten home" from main page because it was messing everything up.
<div style="display: none;" id="form-olvidado">
<h4 class="">
Forgot your password?
</h4>
<form accept-charset="UTF-8" role="form" id="login-recordar" method="post">
<fieldset>
<span class="help-block">
Email address you use to log in to your account
<br>
We'll send you an email with instructions to choose a new password.
</span>
<div class="form-group input-group">
<span class="input-group-addon">
#
</span>
<input class="form-control" placeholder="Email" name="email" type="email" required="">
</div>
<button type="submit" class="btn btn-primary btn-block" id="btn-olvidado">
Continue
</button>
<p class="help-block">
<a class="text-muted" href="#" id="acceso"><small>Account Access</small></a>
</p>
</fieldset>
</form>
Try this:
Forgot password?
DEMO
DEMO
$('#forgot').click(function(){
$('#form-olvidado').css(
"display","block"
);
$('#loginbox').css(
"display","none"
);
});
OR
$('#forgot').click(function(){
$('#form-olvidado').show();
$('#loginbox').hide();
});
Add forgot as id to anchor tag which says forgot password ?
then add this code
Secondly two methods can be used one is using css display block or none in jquery or
Hide or show both does the trick
Another thing regarding using jsfiddle In left side menu there is a tab called external resources you have to add css and other javascript files in that menu
Go to this site it has all bootstrap and other files hosted so that it can be used on the fly
An image can best show the problem:
Of course I dont want my textarea to have a bunch of html tags as a default value, thats why I set the defaultvalue to 'Hi', which it aparently isnt showing right now, but which it should.
I already tried a few things to find/solve the problem. What I found out is that if I remove the other form on the page (a login form not visible on the image) this form works and properly shows 'Hi' as a value. So the problem seems to be that there are multiple forms on this page. Problem has only shown with the use of text-area's, input fields, on this page or any other, work fine. I also tried moving the textarea outside of the form tags, that does remove the html tags, but the 'hi' still isnt visible (plus I want the textarea inside my form, as it should be part of it).
Edit, after a few struggles finally managed to post the code as code instead of a document. Code for the first, properly working, form:
<div id="userbox">
<form id="form1" action="auth/login" method="post">
<div id="username-container">
<input class="transparent-input" name="username" type="text" value="Gebruikersnaam">
</div>
<div id="password-container">
<input class="transparent-input" name="password" type="password" value="Wachtwoord">
</div>
<div id="lostpass-container">
wachtwoord<br />vergeten?
</div>
<div id="login-container">
<input class="transparent-input" type="submit" value="Aanmelden">
</div>
</form>
</div>
Code for the second, faulty, form:
<div id="content">
<h3>Contact</h3>
<form id="form2">
<input type="text" value="Pietje Puk" /><br />
<input type="email" value="mijn#email.nl" /><br />
<textarea rows="10" cols="50">Hi</textarea>
</form>
</div>
edit: I did do a markup validation, nothing there that solved the problem
It turned out to be a markup problem after all. After trying some more I did find that moving a div closing tag to a different location in the document did solve the problem. Before I had opened a div before both forms and closed it in between them, closing it after both of them instead solved the problem.
Tnx Lars Beck for pointing me in the right direction :)
Im designing a website using Visual Studio 2012 ASP.NET MVC4
And it’s supposed to be like this
but it turned out to be like this
![default2][2]
I need to align the logo with the Username & Password fields and those fields should have space in between. Btw, I'm using the latest version of Twitter Bootstrap as my CSS. Thanks for helping out!
Also, these are my codes.
<header class="navbar navbar-inverse" role="banner">
<div class="container">
<img src="#Url.Content("~/Content/img/Logo-Sample.png")" alt="Image" id="logo" class="img-responsive"/>
<div class="pull-right">
<form class="navbar-form pull-right" role="form">
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Username">
</div>
<div class="form-group">
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
</div>
</div>
</header>
Update:
I've applied Ryan's suggestion the "float stuff" and the logo is now inlined with the input fields.
But the input field went upward instead of downward. Any suggestions for this? Thanks!
Check out Bootstrap's docs for Inline forms. I believe this is exactly what you are looking for.
As a side note, check out TwitterBootstrapMVC. Your code might look cleaner with it.
So it looks like your logo and login sections are both block-level elements. They need to be inline-block OR one of them needs to be floated left or right as appropriate.
Insofar as the space between elements for your login block... I'd do a css selector to match the header login input elements and add some margin-right to them.
HTML formatting is very finicky sometimes. However, open up the markup for the asp file and put a space between those input areas' tags or put one trailing after the word in the placeholder. For the being slightly too high, I forgot the word I am looking for, but its something a bit like a table, make them both in slots for that row. Look around for what Im attempting to say as I just completely forgot the term.
(if I remember Ill come back and edit this)