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
Related
i have a text field for email which is set to required, i want it to show a text that you need to include "#" on your email. like how it displays "fill out this field" when you pressed the button without typing anything on the field. How can i do it? Thanks.
EXAMPLE:
<input type="text" name="email" required>
You can try to use the type in case you are using HTML5 as:
<input type="email" name="email" required>
If you are not using the HTML5 then you need to use some scripting language like Javascript to check the validity. For example in Javascript it would be like:
if(!document.getElementById("email").checkValidity())
In case of PHP it would be like
if (filter_var($email, FILTER_VALIDATE_EMAIL))
You can check it by using (since HTML5):
<input type="mail" name="email" required>
It will display a warning if format is not correct (tooltip, or red color around the field, depending on your browser.
Or you can check it on the server side, once you form is sent. For example with PHP, you can use filter_var
Use pattern attribute,
<input type="text" name="email" pattern=".*[#]+.*" />
<input type="email" name="email" required />
More details are at: http://www.w3schools.com/tags/att_input_pattern.asp
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>
In my login page I have 3 input type=text elements.Now I want to apply style to one specific element.Like I want to apply style for the following element only...
<input type="text" value="enter username or email or mobile number" id="username" name="username" />
when I am using css
input[type=text]
then that style is applying on all the three elements.i don't want that.I want to apply style on only one specific element.How to achieve this...
You can use the tags ID for more precision...
input#username[type=text]
... obviously also means you can just leave away the type filter...
input#username
... since there can only be one element with that id.
Apart from that you could also use other properties for filtering, for example the name:
input[type=text][name="username"]
hi you can used selector properties for this
for example you can try id selector like this
<input type="text" value="enter username or email or mobile number" id="username" name="username" />
<style>
#username{
color:red;
font-size:20px;
}
</style>
and your other control will not effect.
The easiest and fastest way is just to do this:
<input style="color:red" type="text" value="enter username or email or mobile number" id="username" name="username" />
I have a html input field for which I would like to provide some additional information when typing in this field or hovering the mouse over it. I have tried the following construct:
<input type="text" onmouseover="window.status='hello world'; return true;" name="TextInput" tabindex="2" maxlength="8" class="input">
but nothing happens when I type in this field or move the mouse pointer over this field.
Is there a simple way to achieve this?
You can use the TITLE attribute for this. Pretty easy:
<input type="text" title="enter details here" />
All right, this one is going to sound very weird and I don't know if any of you have experienced the same problem.
I have a very simple login form (in html) which includes username, password and submit button and works fine on IE but when I run it in Firefox (3.xxx) and click on password textfield, the focus jumps on username and selects the text. What's even more I can easily navigate using the keyboard but not with the mouse click.
Just curious, does anyone else have this problem and perhaps a solution, or is it just me?
Thanks for your time and help!
Uran
You probably did something like the following:
<label for="username">
Username: <input type="text" id="username" name="username" />
</label>
<label for="username">
Password: <input type="password" id="password" name="password" />
</label>
Notice how the second label is still marked for="username". Make sure the for attribute matches the proper field. Also, when the input tags are nested in label you technically don't need to specify a value for for.
The second option is that you did something like the following:
<label>
Username: <input type="text" id="username" name="username" /><br />
Password: <input type="password" id="password" name="password" />
</label>
In this case, the focus is given to the first input. When using input nested inside a label tag, makes sure there is only one inside the said label.