I want to create a form, where user can enter Email and 4 digit PIN. For PIN input I would like to use <input type="number"> instead of regex, but I don't know how to hide entered digits.
Use the type password and HTML maxlength property:
<input type="password" name="pin" maxlength="4">
http://jsfiddle.net/skxr9o47/
This would require some JavaScript validation to ensure a number was entered.
An alternative way would be to use HTML 5 and take advantage of the number type (As you already have done) or the pattern attribute and validate it inside your form.
<form>
<input type="text" name="pin" pattern="[0-9]{4}" maxlength="4">
<input type="submit" value="Validate">
</form>
http://jsfiddle.net/L6n9b5nr/
However, you would have to use JavaScript or jQuery to use mask the user's input.
Use inputmode numeric and password input
For Android and iOS you can also add inputmode="numeric" to an input type="password". The user will get a keyboard with only numbers (the same keyboard as used for the input type="tel").
Example:
<input name="pincode" type="password" inputmode="numeric" maxlength="4">
Use a style and text input
Another option that doesn't work in every browser, is to hide the digits via the style in an input type="text". Example:
<style>
.pincode {
text-security: disc;
-webkit-text-security: disc;
-moz-text-security: disc;
}
</style>
<input name="pincode" type="text" class="pincode" inputmode="numeric" maxlength="4">
I feel like no one actually fully answered the question, I've combined this code from multiple posts regarding this questions and this is what I use. 4 digit max, hidden input, only numbers and number pad is showing on both android and ios.
<input
type="number"
id="password"
name="password"
pattern="[0-9]{4}"
maxlength="4"
style="-webkit-text-security: disc;"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
/>
Note that -webkit-text-security is not supported in Firefox or IE.
if you use the input field with password type, the digit should be shown as bullet points instead of the actual number.
<form action="">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="password">
</form>
Related
I am having issues with getting a "Phone Number" input validated. I have written the regex pattern to require 10 numbers, but even when I plug in 10 numbers into the input field, I still get the error message: "Please match the requested format" and can't seem to figure out why this is.
All help and advice is greatly appreciated!
<input type="text" id="number" name="number" pattern="/^\d{10}$/" required>
Here is a code example from this page: https://www.w3schools.com/html/html_form_input_types.asp
You can directly do it with an in-build functionality of HTML.
Just use the type type="tel" and you should be good to go.
if you want 10 consecutive numbers without - you can also do: pattern="[0-9]{10}"
<form>
<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
Just place you're input in a <form> and hit submit. It should now match.
I don't believe you need the forward slashes in your regex pattern here.
Try this:
<input type="text" id="number" name="number" pattern="^\d{10}$" required>
how to write pattern for input type="text" (it can't be number and the validation can't be with JS) that allow me to enter only numbers, min:1 and max:5000?
<input type="text" name="someName" id="someId" required pattern=""/>
Here you go - not an input with type="number" and no JS:
<input type="text" name="someName" id="someId" required="required"
pattern="(5000|([1-4][0-9][0-9][0-9])|([1-9][0-9][0-9])|([1-9][0-9])|[1-9])"/>
The basic pattern is to match 5000 or 4-digit number or 3-digit number or 2-digit number or non-zero 1-digit number.
If you can accept 0, the pattern can be even simpler:
(5000|([1-4]?[0-9]?[0-9]?[0-9]?))
You can use the predefined min and max attribute for input type="number" as follows,
<input type="number" min=0 max=10>
<input type="submit">
Here is an example
The error for incorrect input will be displayed when you try to submit the form
Let me know if this works :)
<input type="number">
HTML Version above!
what is the correct code. Any idea.
<input type="text" pattern="[0-9]*"/>
<input type="number"/>
<input type="text" keyboard="numeric"/>
<input type="text" keyboard="number11"/>
You should use the following input, both will work:
<input type="number" />
<input type="tel" />
It depends. If you use <input type="number"> the browser will render it as a numerical input containing the up and down buttons to cycle the value. If you want it to be only numbers, but without the buttons, then use the pattern.
Let's say I have this
Name : <input type="text" name="name" />
I want to mask the user input with password sign either like asterix or dot. Is it possible to do this?
Yes, I know I could do Password : <input type="password" /> but I want to do with input type="text" . Is it possible?
Thank you
I don't know why you want to do this as we have type="password" but still if you want to hide the fields which have type="text" than you can use this (Only webkit)
input[type="text"] {
-webkit-text-security: disc;
}
Demo (Webkit Only)
Just change the type to password.
Name : <input type="password" name="name" />
You should be using
<input type="password"/>
if you don't want to use input type="password".use javascript keyup function and make a custom replace function
I have an HTML form as follow:
<form method="POST" action="http://">
Username: <input type="text" name="username" size="15" />
Password: <input type="password" name="password" size="15" />
<input type="submit" value="Login" />
</div>
</form>
I would like functionality such that the text fields have instructions in them that clear when a user clicks in the box so that I can save space and remove the words Username and Password from outside the forms.
How can this be achieved?
The feature you're looking for is called a "placeholder". (if nothing else, just knowing this term will help you search for more info in Google)
In modern browsers which support HTML5, this is a built-in feature which you can use very easily, as follows:
<input type='text' name='username' size='15' placeholder='User name' />
However, this method only works with up-to-date browsers which support this feature.
Older browsers will need to have some Javascript code to do it. Fortunately, there are a number of scripts you can use, including some written as JQuery plug-ins. The ones I'd recommend are those which tie into the placeholder attribute on the input field, so that you can support it natively in the browsers which have this feature and fall-back to Javascript for those that don't.
Try this one: http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html
If you use HTML5 you can do this using the placeholder attribute:
<form method="POST" action="http://">
<label for="username">Username:</label>
<input placeholder="Username" id="username" name="username" size="15">
<label for="password">Password:</label>
<input placeholder="Password" type="password" id="password" name="password" size="15">
<input type="submit" value="Login">
</form>
I'd still include the Username and Password text wrapped in <label> tags for accessibility, but you could always hide them with some CSS like this:
form {
position:relative;
}
label {
position:absolute;
top:-9999px;
}
These are commonly called watermarks and require javascript.
Look at the jQuery-watermark plugin.
I wrote a custom one because I wanted to have a specific behaviour.
https://90dayjobmatch.com/js/jquery.wf.formvaluelabel.js
Usage:
$('#signup_job_title').formvaluelabel({text:'eg. Graphic Artist'});
Let me know if you have any questions about it.
HTH
As others have noted, there is an attribute in HTML5 that allows this called placeholder - read about it here:
http://diveintohtml5.info/forms.html
http://dev.w3.org/html5/spec/Overview.html#the-placeholder-attribute
This does not require Javascript, but it is not supported by older browsers (see http://caniuse.com/#feat=input-placeholder).
It should be noted that placeholder is not meant to replace <label>s, which you are not using and probably should be.
<label for="username">Username:<label>
<input type="text" id="username" name="username" placeholder="Enter your username" size="15" />
Labels are important for a variety of reasons and it is bad practice to not use them.