Hello I was playing around with HTML5 datePicker and I was wondering how I could change the default language of the widget. How to change the lang from english to german? Any idea?
<form action="/action_page.php">
Birthday:
<input type="date" name="bday">
<input type="submit">
</form>
Thanks
the most common way to force to change the language is the next :
<form lang="es">
<input type="text" pattern="\d{1,15}" required />
<input type="submit" />
</form>
if you want more information about declare language, can you learn more in the next links :
http://nimbupani.com/declaring-languages-in-html-5.html
I hope my answer is helpful.
type date for html is browser native control, at least for chrome this stands true. So it will be localised according to the language of the browser. However frameworks like bootstrap has better locale support or even you can set locale settings in jquery manually with some scripting at server side.
This works on safari but not in Chrome or Firefox:
<form action="/action_page.php">
Geburtstag:
<input type="date" name="bday" placeholder="tt/mm/jj">
<input type="submit" value="einreichen">
</form>
However you can use polyfills to make it work on all browsers.
Look at this example of a module to understand it better.
Related
I'm using formspree.io for some simple contact forms and want to dynamically change the email address with Angular1 so it looks something like this:
<form action="https://formspree.io/{{ user.email }}" method="POST">
Can anyone help shine some light on this? I can't quite work it out so any thoughts would be massively appreciated.
go to the following link. it has clearly mensioned how to post a form in angular, jquery, etc.
https://scotch.io/tutorials/submitting-ajax-forms-the-angularjs-way
go to the formspree website. there you can see the clear explanation in traditional way
<form action="https://formspree.io/your#email.com" method="POST">
<input type="text" name="name">
<input type="email" name="_replyto">
<input type="submit" value="Send">
</form>
just convert this form into angular supported form and your work will be pretty easy if you use twoway data binding
ng-submit also works well angular documentation
<form ng-submit="submit()" ng-controller="ExampleController">
<input type="text" ng-model="text" name="text" />
<input type="submit" id="submit" value="Submit" />
</form>
here submit() is a function that trigger the post request
Trust the url input with SCE (Strict Contextual Escaping (SCE)
See sce docs
I want to use HTML5 validation in Angular 4 rather than their form's based validation/reactive validation. I want to keep the validation running in the browser.
It used to work in Angular 2, but since I've upgraded, I can't get even manually created forms without any angular directives to validate using HTML5.
For instance, this won't validate in the browser at all:
<form>
<h2>Phone Number Validation</h2>
<label for="phonenum">Phone Number (format: xxxx-xxx-xxxx):</label><br />
<input id="phonenum" type="tel" pattern="^\d{4}-\d{3}-\d{4}$" required>
<input type="submit" value="Submit">
</form>
Angular4 automatically adds a novalidate attribute to forms.
To override this, you can add the ngNativeValidate directive to the form.
<form ngNativeValidate>
<h2>Phone Number Validation</h2>
<label for="phonenum">Phone Number (format: xxxx-xxx-xxxx):</label><br />
<input id="phonenum" type="tel" pattern="^\d{4}-\d{3}-\d{4}$" required>
<input type="submit" value="Submit">
</form>
Unfortunately I do not see this reflected in the docs yet, but found it by looking at the source code:
https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_no_validate_directive.ts
It appears also adding ngNoForm to the form has the same effect as ngNativeValidate depending on your use-cases for needing to declare something as not a form for whatever reason.
Hope this helps.
use ngNoForm or ngNativeValidate in your form
<form ngNoForm/ngNativeValidate>
...
</form>
I am working with a number input type eg
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp">
Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5">
<input type="submit">
</form>
</body>
</html>
This works nicely in chrome but not in firefox or IE. How can I make it work in IE9+, firefox etc? Or do I need alternative someone can suggest?
I would suggest you utilize javascript to provide field validation. There are any number of libraries (or plug-ins to libraries) out there that perform form validation.
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).
Loading
http://diveintohtml5.ep.io/examples/input-type-date.html
<form>
<input name="birthday" type="date">
<input type="submit" value="Go">
</form>
into Fx4 and Safari5 on XPsp3, I expected to see some kind of enhancement like the up/down on type="number".
Do you?
Update: A date picker appears in Opera - nothing in Safari5 or FX4 on XP
"Up" and "down" is for type="number", not type="date", isn't it? This page suggests, that the UIs for the new types are not yet supported in anything but Opera.