I am using Dreamweaver to make a HTML page. I have a textbox for the user to type into. When I change the following:
<input type="text" id="email" name="email" size="40px" /> when I view it in Firefox, the box size changes, but in IE it says at the default size by the look of it.
Why is IE being such a pain...
Do this instead:
<input type="text" id="email" name="email" style="width:40px" />
Wrong:
<input type="text" id="email" name="email" size="40px" />
Right:
<input type="text" id="email" name="email" size="40" />
The 'size' attribute for input type 'text' and 'password' refers to the (integer) number of characters. Ref: W3C HTML Forms Spec
Related
I have some required fields in my html code, but they do not show the place holder until I specify that the field is required. I do not know why...
<input class="text" type="password" name="password" placeholder="Enter new password" required="">
<br>
<input class="text" type="text" name="phone" placeholder="Enter new phone number">
The second input does not show the place holder when I run the code.
I have a form with multiple inputs, but when autofilling, the password manager always enters data in the first input above the password. Can I tell it to enter data in a specific input?
Code example:
<input placeholder="Your email" type="email"/>
<input placeholder="You fb id" type="text" />
<input placeholder="Your password" type="password"/>
Chrome might think that your email and text inputs are the same, so it auto fills both of them. So, we are going to put an irrelevant "type" on one of the inputs.
<input placeholder="Your email" type="email"/>
<input placeholder="You fb id" type="url" />
<input placeholder="Your password" type="password"/>
We set the email type to email, fb id to url, and password type to password.
Finally found a solution!!!! If you add an onChange event to the field that is above the password field and accepts automatic login fill, it will fill data in the field specified in js. Here is code example:
HTML:
<input placeholder="Your email" id="userEmail" type="email" />
<input placeholder="You fb id" id="fbId" type="text" />
<input placeholder="Your password" type="password" />
JS:
const fbId = document.querySelector("#fbId");
fbId.onChange = () => {
document.querySelector("#userEmail").value = fbId.value;
};
Result:
This is my first time writing a pattern for HTML phone numbers. I am based in Singapore. In my country phone numbers starts with 8 or 9 and has 9 digits.
This is my html pattern.
Can someone take look and let me know what went wrong?
I don't see any resources out there for including certain numbers only.
pattern: ([8|9]{1}[0-9]{8})
below is my full code
<h3>Sign Up</h3>
<label htmlFor="username" className="sr-only">Username: </label>
<input type="text"
name="username"
minLength= '5'
maxLength= '10'
onChange={onChange}
className="form-control"
placeholder="Enter Username" required />
<label htmlFor="password" className="sr-only">Password: </label>
<input type="password"
name="password"
minLength= '8'
pattern = "(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
title = "Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters"
onChange={onChange}
className="form-control"
placeholder="Enter Password" />
<label htmlFor="email" className="sr-only">Email: </label>
<input type="text"
name="email"
onChange={onChange}
pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,}$"
className="form-control"
placeholder="Email" required />
<label htmlFor="mobile" className="sr-only">Mobile Number: </label>
<input type="number"
name="mobile"
onChange={onChange}
className="form-control"
pattern="[8-9]{1}[0-9]{8}"
placeholder="Mobile Number" />
<button className="btn btn-lg btn-primary btn-block"
type="submit">Sign Up</button>
The answer is that pattern is not a valid attribute on input when type=number. Also the pipe character inside []'s doesn't mean "or". Either change the input type to another value, or use min/max.
<input type="text" inputmode="numeric"
name="mobile"
onChange={onChange}
className="form-control"
pattern="[89][0-9]{8}"
placeholder="Mobile Number" />
or
<input type="number"
name="mobile"
onChange={onChange}
className="form-control"
min=800000000
max=999999999
step=1
placeholder="Mobile Number" />
Phone number starting with 8-9 and remaing 9 digit with 0-9" required
<input type="text" class="form-control" readonly="readonly" value="" name="enquiry_mobile" placeholder="Enter mobile number *" pattern="[8-9]{1}[0-9]{8}">
If you expect that using pattern on input will prevent you from entering incorrect data base on that pattern, you're wrong.
You have to submit the form for the browser to validate. The first form bellow will submit, the second one will not.
<form>
<input value="891234567" type="tel" id="phone" name="phone" pattern="([89][0-9]{8})" />
<button>Submit</button>
</form>
<form>
<input value="121234567" type="tel" id="phone" name="phone" pattern="([89][0-9]{8})" />
<button>Submit</button>
</form>
Edit:
As #Robert McKee pointed in the comment below, the first pattern used on this answer is incorrect. Updated pattern to ([89][0-9]{8}).
I have two forms (ref https://jsfiddle.net/svejdo1/f7uwt6jo/12/)
Second form (the on the bottom) is inside iframe.
The autofill seems to work for both cases - i.e. if I type into "street" it allows me to select from "street" fields I recently submitted. However there is one significant difference - when I select email it also prefill the whole form with my profile - but just for the non-iframed form. When I attempt to do the same for iframed form it doesn't work.
Is there a trick to make it working ? Or is this a bug in chromium ? Or is this security feature of some sort ?
<form id="form" action="#">
<label for="street">Street</label>
<input type="text" id="street" name="street" />
<label for="zip">ZIP</label>
<input type="text" id="zip" name="zip" />
<label for="email">Email</label>
<input type="text" id="email" name="email" />
<input type="submit" value="Submit" />
</form>
<iframe id="iframe"></iframe>
<script>
var cln = document.getElementById('form').cloneNode(true);
document.getElementById('iframe')
.contentWindow.document.children[0].children[1].appendChild(cln);
</script>
I'm making a contact form that a user can type in then when they click submit it opens Outlook with their input. The problem is that the output is really messy. It outputs like this:
name=John+Smith&email=I+am+contacting+you&comment=example+text+here
I want to output to be more like:
name=John Smith email=I am contacting you comment=example text here
Is that possible with this HTML5 code:
<form method="post" name="contact" action="mailto:myemail#gmail.com">
<p>
<label>Name</label>
<input name="name" value="Your Name" input type="text" size="50" />
<label>Email</label>
<input name="email" value="Your Email" input type="text" size="50" />
<label>Your Comments</label>
<textarea rows="5" cols="5" name="comment"></textarea>
<br />
<input class="button" input type="submit" />
</p>
</form>
Since you have not specified otherwise, your form is “send” using the default enctype application/x-www-form-urlencoded.
Add the attribute enctype="text/plain" to your form element.