this is the current code I have right now. I have other lines of code written above it but none of them would affect what I have written here. the thing I'm doing is telling me to write code describing it. I have written a label for an email and text tag. which it is has verified having code written to describe them. the labels I've written for them are exactly the same. does anybody know if this is different for a number tag.
number tag code:
`<input id="number" type="number" min="1" max="100" placeholder="number">Your favorite Number</input>`
<label id="number-label">
email tag code:
<input required id="email" type="email" placeholder="bobwho22#gmail.com">Your Email</input>
<label id="email-label">
the email tag and the text tag worked and I don't know why it won't work for my number tag. I just wanna know if the code is different or if I'm making a mistake. Thank you
Related
I have a HTML input with maxlength=4 attribute on it and it works well.
The thing is when I type the last character - it hides the first one while i'm focused on the input. when I lose focus (blur) the inputs looks ok.
Here's a visual explanation:
While typing:
When I get to 4 it looks like this (1 is hidden):
When I lose focus:
Here is my HTML input:
<input name="input[input-1]" type="text" maxlength="4" style="letter-spacing:15px;" class="numeric">
How can I fix this?
provide your html css code here. if you are using type="number" and a fixed width it might be for the reserved place in type number for the increment and decrement arrows.
i can't see any problem here :
<input type="number" min="1" max="9999" value="1">
I am working on an assignment and am a little lost. The question states:
Create a label element with the text Username. Within the label element, insert
an input box for the username field. Make the field required and add the title Supply
your username
Here is what I have. I am mainly confused on the title portion. Any help is greatly appreciated, and feel free to correct me on the other parts. Thank you
<form id="survey" name="survey"
action="www.sblogger/cgi-bin/subcomments"
method="post">
<fieldset id="commentFS"
<label>
Username
<input id="username">
required="required"
</label>
</fieldset>
</form>
You just need to add a title attribute on the input field. Also the label tag can stay on it's own, which leaves to:
<form id="survey"
name="survey"
action="www.sblogger/cgi-bin/subcomments"
method="post">
<fieldset id="commentFS">
<label>Username</label>
<input id="username"
title="Supply your username"
required>
</fieldset>
</form>
The assignment is not well-defined, since it does not say what kind of a title should be included. It may refer to an advisory title that may be presented to user in some situations (e.g., on mouseover), as assumed in #Jeffrey’s answer. It may also refer to text that appears inside the input box when it is empty, in which case you would use the placeholder attribute. It can also refer to visible text before the input box; this would be the most reasonable setup. Even then, there are several alternatives. It could be just text before the label and the input box, or it could be wrapped in a heading element, or even a legend for a fieldset. The following example is based on the wild assumption that such a legend is desired (which might be a wrong guess if you have actually been told to use the fieldset element, as you are using, although there is no reason to use it in a simple case like this).
<form id="survey" name="survey"
action="http://www.example.com/cgi-bin/subcomments"
method="post">
<fieldset id="commentFS">
<legend>Supply your username</legend>
<label>
Username
<input id="username" name="username"
required="required">
</label>
</fieldset>
<input type="submit" value="Submit">
</form>
Notes: The attribute required="required" (or just required unless you have been told to use XHTML syntax) must appear inside the <input ...> element, not after it. And the input element needs a name attribute, otherwise the data in it will not be sent at all to the server.
I'd like to have a required email input on a form, and I'd like to augment the input's label to show validity with specific messages. I tried the markup below (simplified, and a few variants). The actual can be found at this fiddle illustrating the problem.
<label for="email">Email
<small class="help-inline" ng-show="form.email.$invalid-required"> (required)</small>
<small class="help-inline" ng-show="form.email.$invalid-email"> (email)</small>
</label>
<div class="input-group">
<input type="email" placeholder="Email" name="email"
ng-model="model.email" required>
I'd like the 'required' message to appear when the input is empty, and when it's non-empty, I'd like the 'email' message to appear conditionally if angular email validation passes.
As you'll see in the fiddle, both messages appear and disappear together, even though, as I use the chrome inspector, the $invalid classes on the input seem to change appropriately. This casts suspicion on the ng-show expression for the errors, but no matter what I try there I get the same behavior.
I've seen a couple answers (like this one) that use a lot of code, but that answer seems a little roundabout. I'm new to web, and already appalled by how bulky the html/code can get (each time I learn about a new streamlining idea, mine seems to double in size)
Thanks in advance.
Change the expression for required to
<label for="email">Email <small class="help-inline" ng-show="!form.email.$viewValue">
and it would work.
The problem with Angular is that it does not allow invalid data in the model. So unless you provide a valid email value the linked model property remains empty and both the required and email validation fail.
Any idea why firefox acts so weird with this code?
It works perfect in IE & Chrome.
<LEGEND>Basistaal </LEGEND>
<LABEL class=alg_kantoor_taal for=alg_kantoor_taal>
<INPUT id=alg_kantoor_taal value=NL type=radio name=alg_kantoor_taal .>
NL
</LABEL>
<LABEL class=alg_kantoor_taal for=alg_kantoor_taal>
<INPUT id=alg_kantoor_taal value=FR type=radio name=alg_kantoor_taal .>FR</LABEL>
I have seen another question where firefox behaved strange because there was a block element inside the label. That is not the case here. I would have like to keep this structure since my css is based up this html... Guess i will have to change it to get it working in FF?
edit-> fiddle here :http://jsfiddle.net/ZXSKH/59/ you can see in firefox the radiobuttons just don't work as they should.
I'll save you the trouble and fix the HTML for you:
<LEGEND>Basistaal</LEGEND>
<INPUT id="alg_kantoor_taal-nl" value="NL" type="radio" name="alg_kantoor_taal" />
<LABEL class="alg_kantoor_taal" for="alg_kantoor_taal">NL</LABEL>
<INPUT id="alg_kantoor_taal-fr" value="FR" type="radio" name="alg_kantoor_taal" />
<LABEL class="alg_kantoor_taal" for="alg_kantoor_taal">FR</LABEL>
An element are built up with a opening and closing tag, or a single tag.
Double tag: <tagname>content</tagname>
Single tag: <tagname />
Also, an attribute should be surrounded with quotes: <tagname attribute="value" />
Please note that an element id should be unique at all times. You can't have 2 elements with the same id.
In fact, this should fix most of your problems. But please, for the love of god, learn how to use HTML properly first.
All elements on a page should have a unique id. Both of the lables reference the second input. You should give each input a unique id and change the for attribute of the label to reference the new id. Or you could remove the id and for attributes and it would work how you expect.
Move the input tags out of the labels.
<LEGEND>Basistaal</LEGEND>
<INPUT id="alg_kantoor_taal1" value="NL" type="radio" name="alg_kantoor_taal" />
<LABEL class="alg_kantoor_taal" for="alg_kantoor_taal1">NL</LABEL>
<INPUT id="alg_kantoor_taal2" value="FR" type="radio" name="alg_kantoor_taal" />
<LABEL class="alg_kantoor_taal" for="alg_kantoor_taal2">FR</LABEL>
http://jsfiddle.net/ZXSKH/61/
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).