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 :)
Related
I am not able to type in the input field. When I remove the first div that has the id="viewport" I am able to type in the input field. How am I able to solve this?
<div id="viewport"></div>
<div class="form">
<h2 id="h2">Need a project from<br>Google Cloud Storage?</h2>
<form id="fileDownloadForm" method="GET" action="downloadBlob2" enctype="multipart/form-data">
<input type="text" id="textBox" name="objectToSearch" placeholder="Type the name of the project here." />
<button id="downloadBtn" type="submit" class="btn btn_primary">Download</button>
</form>
</div>
You may solve this by adding css attribute #textBox{ z-index:1000; }. It seems that viewport block is too big and overflowing the input field. z-index makes the input field more "important" - the bigger it is, the more important the element becomes.
just in case to others, what works for me is putting in the immediate tag. So in this case I will try to put it in:
<div class="form" style="z-index: 1000 !important;">
In my case, somehow the text color changed to white. I found it by accidentally double-clicking the input field after typing few characters.
In my case i used Reactjs app for using
<input type="text" title="Search for products, brands and more" autocomplete="off" placeholder="Search for products, brands and more" name="" value="" />
You can see i put value="" so it is blank. That's why it was not working.
This is my parent form parent-form.html with one submit button.
<form name="parent_form">
Name
<input type="text" id="name" name="name">
<input type="submit" id="submit" type="button" value="Submit"></button>
</form>
<iframe src="iframe_form.html" id="iframe_id" name="iframe_name"></iframe>
This is my iframe form iframe_form.html with one field in it.
<form name="iframe_form">
Address
<input type="text" id="address" name="address">
</form>
I want to submit both address field of iframe as well as name field of parent-form by clicking submit button of parent form.
There were other post related but none appropriate with simple method.
There's nothing wrong with iFrames but in this case, it's not efficient or easy.
If you want to avoid the problem of frames and forms, then use a scrollable division:
<div id="scrollcontent1" style="overflow-y: scroll; height:100px;">
Address: <input type="text" id="address" name="address">
</div>
If you want to have more than one on your page, use a sequence of them making sure the ID has a different name for each. You can then dynamically present what you need using the visible property and whatever javascript triggers you desire. Make sure you set the height property and if you want both scrollbars present, use overflow instead of overflow-y. It's a simple solution and it avoids the headaches of jquery as well as iframes.
Ihope you will get better mileage out of a helpful answer than and snobbish "ask the right question".
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)
I have a simple form with two hidden inputs that is causing extra white space in Firefox. I've been in trouble with this for few days.
<form name="DemoForm" method="get">
<input type="hidden" name="isposted" value="">
<input type="hidden" value="2" id="SelectedTab" name="SelectedTab"></form>
It is rendered in cell. After that, there is a div with content, but in firefox there is a extra white space above the div. Only in Firefox.
I try to fix this putting the form in a div with display:none, its elements in div with "dispay:none" and other things that I have found in the net, but nothing help...
Has anyone met this issue before?
I have fix this issue using div container with "display:none" but removing the "type:hidden" from each element.
The final code looks as follows:
<div style="display:none">
<form name="DemoForm" method="get">
<input name="isposted" value="">
<input value="2" id="SelectedTab" name="SelectedTab">
</form>
</div>
Sure, this could be useful for someone. :- ]
Try removing all white spaces and newline characters within the form, like this:
<form name="DemoForm" method="get"><input type="hidden" name="isposted" value=""><input type="hidden" value="2" id="SelectedTab" name="SelectedTab"></form>
Similar idea to gotqn.
Make data field intended to be hidden an ordinary text field.
Just "hide" the input field by making it the same background-color as the form background.
If you want to hide the field data, use a text color the same as the background.
If you want to display some message/number in it, use a text color that is contrastingly different.
I already posted a similar question and got a jQuery solution that works. Now I want to do it with only CSS/HTML. I saved twitter's homepage locally and deleted all the js scripts and noticed that the effect I'm trying to achieve is with CSS/HTML (when you click on the username/pass the values "Username"/"Password" stay there until you enter text).
I'm a newbie at these kind of new CSS/HTML effects and have spent the last couple of hours trying to replicate it with no success.
Here's the html of twitter's login form:
<form action="#" class="signin" method="post">
<fieldset class="textbox">
<div class="holding username">
<input type="text" id="username" value="" name="session[username_or_email]" title="Username or email" autocomplete="on">
<span class="holder">Username</span>
</div>
<div class="holding password">
<input type="password" id="password" value="" name="session[password]" title="Password">
<span class="holder">Password</span>
</div>
</fieldset>
<fieldset class="subchck">
<label class="remember">
<input type="checkbox" value="1" name="remember_me">
<span>Remember me</span>
</label>
<button type="submit" class="submit button">Sign in</button>
</fieldset>
I've looked over the site's CSS but it's 10,000 lines and very complicated. How should the CSS look like? Or could you point me out to a tutorial on how to achieve the same effect as this is driving me nuts?
Thank you very much,
Cris
Set the HTML autofocus attribute:
<input type="text" placeholder="Type here ..." autofocus="autofocus" />
You can target elements that are focused or blured like so:
input:focus {color:red;}
You now need to nest the CSS to hide the span called holder inside the input.
span.holder input:focus {visibility:hidden;}
I have not tried this, but it would be something like this.
To clarify, I have just pulled the JavaScript twitter use and the source for their home page and I can confirm that they are using the following JavaScript function for focus on the field
inp.focus()
The JavaScript is quite lengthy but it looks like after a quick read that they are using jQuery that is setting focus based on the class being username.
I just looked at the autofocus property suggested by another poster and this method has worked for me in my web app currently under development.
The code for this is
<input type="text" id="username" value="" name="session[username_or_email]" title="Username or email" autocomplete="on" autofocus>
Note, per the documentation at the W3C website, the autofocus property can only be used once on the page. I have put it into a form that is hidden and shown in an inline element using Fancybox.
The grayed out text in the input field can be done with the place-holder element, something I'm already using, add the following into your input element
placeholder="Username"
NOTE: Both placeholder and autofocus are HTML5 properties and may not be supported by all major browsers yet, this is why JavaScript is still being used by sites like twitter.
The styling is done based on CSS/CSS3 greatly, an excellent resource is W3Schools. I would recommend for what you're wanting to achieve start at the CSS3 section looking at borders.
Another resource that is excellent but hasn't been updated for about a month and a half sadly is doctype.tv. Nick has some fantastic advise regarding styling your website along with some great insight into design.
Judging by the bolded text in your question (when you click on the username/pass the values "Username"/"Password" stay there until you enter text), I'm guessing what you want is the placeholder attribute, which #phihag has in his example.
<input type="text" placeholder="This text will disappear" />
The placeholder attribute works without Javascript in browsers that support it. For older browsers, you'll need some Javascript, and this is probably what Twitter is doing in their code.
See the Wufoo page on the Placeholder Attribute for more details, including how to do a javascript fallback and what browsers it is currently supported in.
See also this demo which shows how to style the ":placeholder" and ":active" states (at least for webkit and mozilla).