I have a php page, which launches a popup window containing a form with checkboxes. The originating window includes an external stylesheet.
The form html for the popup window is:
<form name="statusForm" action="post.php=" method="post" enctype="multipart/form-data">
<label for="Test">Test:</label>
<input name="checkboxes[]" value="Test" type="checkbox">
<br>
<label for="Test">TestTest:</label>
<input name="checkboxes[]" value="Test" type="checkbox">
<br>
<label for="Test">TestTestTest:</label>
<input name="checkboxes[]" value="Test" type="checkbox">
<br>
<input name="Submit" value="submit" type="submit">
</form>
The form has been trimmed, and fields renamed to test for posting..
In the external stylesheet, I have:
label {
min-width: 5em;
}
The checkboxes are still not aligned. Do I have to included the stylesheet explicitly in the html of the popup window, or is it something else?
New windows don't inherit any kind of stylesheet rules from their parents.
Also, if you're using Firefox, I urge you to install the Firebug extension, which will allow you to 'Inspect' an HTML element to see (and even modify) the active CSS rules.
Yes, the popup window needs to be its own full HTML page.
Edit
Unless it is an AJAX popup, in which case it does NOT need to be a full HTML page.
Keep in mind that min-width is not supported in Internet Explorer 6. Also, I'd use some dividing element like <div> or <li> (within an <ul>) rather than a <br />.
Rich
Related
I want to customize the input element by changing the text to "Choose file ..." and hide the file's name. Also if a user click the button a window is opened for user to choose file. The code is
<button>
<label for="upload"> Choose file ... </label>
</button>
<input type="file" id="upload" style="display:none">
With Chrome, if I click the button a window is popped up for me to choose the file. However it doesn't work with Firefox and IE. Do you know how can I make it work for all three browsers? Thank you.
The label tag does not work for buttons. It is by and large used with radio buttons. The below should do what you are looking for:
<button id="btnFile" onclick="upload.click();">
Choose file ...
</button>
<input type="file" id="upload" style="display:none">
Your HTML is invalid. A label cannot be a descendant of a button.
Remove the button:
<label for="upload"> Choose file ... </label>
<input type="file" id="upload" style="display:none">
(Tested in Firefox. I don't have a copy of IE to hand.)
If you want something that looks like a button, then style it that way with CSS.
Basically I have a form with a LOT of links to other pages in it, mostly to explain some questions or show information on said questions. The problem is the form is now a complete mess to navigate with the keyboard if you just want to fill it because of all these links, which most people will either not, or very rarely click.
I'm limited in modifying the layout as it is a current Excel form I have to adapt to a web app while keeping the same layout.
Is there any easy way to make TAB navigation skip the links? Via an attribute I'm not aware of maybe?
Quick example, being focused on Input A and pressing tab would bring me directly to input B, skipping links 1 and 2:
<form>
<input A />
<a 1></a>
<a 2></a>
<input B />
</form>
A tabindex="-1" value removes the element from the default navigation flow (i.e., a user cannot tab to it).
<input type="text">
<input type="text">
or
<input type="text" tabindex="1">
1
1
<input type="text" tabindex="2">
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".
<form name="loginform" action="URL_TO_LOGIN_PAGE_GOES_HERE" method="post">
<input type="hidden" name="log" value="USERNAME" />
<input type="hidden" name="pwd" value="PASSWORD" />
<input type="submit" value="" class="mtrgimg" style="background:url(http://aff.securesb.info/accounts/default1/banners/b40a4792.png) center no-repeat; width:145px; height:145px; border:none; cursor:pointer;" />
</form>
http://jsfiddle.net/kr3n4/1/
I would like for the image in this button to be proportionally resized to 145x145. I do not have access to the stylesheet so I cannot use any CSS. Also, cannot use JavaScript. There must be a way to resize using just HTML.
Also, when it is all said and done, I would also like this button to open its link in a new new tab or window.
I would like for the image in this button to be proportionally resized
to 145x145. I do not have access to the stylesheet so I cannot use any
CSS. Also, cannot use JavaScript. There must be a way to resize using
just HTML.
Well, your style tag in the <input> is (inline) CSS. You can use that and follow the methods discussed in this thread, for example.
Also, when it is all said and done, I would also like this button to open its link in a new new tab or window.
You can put target="_blank" on the <form> tag to open the page set as the action in a new window.
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).