<input type="text" autocomplete="off" autocapitalize="none" data-test="check-email-availability-email-input" formcontrolname="alias" class="pos-form-element pos-text-input email-alias-input__alias-input ng-pristine ng-invalid ng-touched">
The above is the html element for an input box (https://signup.mail.com/#.7518-header-signup1-1). How can I input text inside the box? What would the code look like? I'm new to automation using Selenium, so seeing the code for this would be very helpful. driver.find_element() is the only way that works programmatically. find_element_by_xpath, etc. doesn't work, and I'm assuming that's due to the methods being outdated.
Related
How do I prevent a form from suggesting auto-complete values, from previous entries or from saved information in Edge?
In the above image, the email input field is marked as autocomplete="false", but still in the right pane you can see the suggestion is populating.
When I add autocomplete=disabled to one field it seems it work, but when I add the attribute to all the inputs, it again starts displaying suggestions for every field.
What is the solution for this?
Add the aria-autocomplete="list" attribute to the input.
<input type="text" id="FirstName" name="attr1" aria-autocomplete="list">
Do not use any other value for the attribute.
According to your description, I reproduced the problem. I think your issue is caused by the "Save and fill personal info" setting being enabled in Edge.
If you navigate to edge://settings/personalinfo and disable this feature, you can see this behavior no longer exists.
Or you can also click the "Manage personal info" option in the picture you provided, and then disable it.
I did some simple tests and found that if you need to solve the problem from the code, you need to modify the name attribute of the form's related field.
Like this（do not use attribute values like name or email... and maybe there are others I am not aware of):
<label for="attr1">attr1:</label>
<input type="text" id="FirstName" name="attr1">
<label for="attr2">attr2 :</label>
<input type="text" id="LastName" name="attr2">
<label for="attr3">attr3 :</label>
<input type="email" id="Email" name="attr3" autocomplete="off">
<input type="submit">
I don't recommend this, because good naming helps you understand and maintain the code. Using proper attributes like name and email also helps your code be more accessible for screen readers or other assistive technology.
This question might appear as duplicate of:
XPATH required for an input text field? but question is why my custom xpath is not working. Though it is working for buttons, plain text on page, links etc.
Here is the HTML of it:
<input id="uemail" class="input_text" type="email" value="" tabindex="1" size="30" name="user[email]" autofocus="autofocus" autocorrect="off" autocapitalize="off"/>
For this HTML I tried to find it in firebug, I wrote:
//*[text()[contains(.,'user_email')]]
//id[text()[contains(.,'user_email')]]
//*[id()[contains(.,'user_email')]]
but none of worked, what am I missing.
Reasons:
1. Because, You are looking for text using text() but there is no text(as per given HTML), like you might have in links, buttons, plain text on page etc,so remove it.
2. after 'contains' you are looking for all elements just look for its type i.e. id
3. third you know that it's an input field so use * or input. * means any and input means that this is an input box.
So, finally it becomes://input[contains(#id,'user_email')]. Which I am sure will work.
I have a form in html (generated in php), which contains also a text field.
To submit the form I use a submit button and the results appear on the left side of the page. Now, I would like to add another button which would clean the text in the text field
and resubmit the form (with value="" in the text field). Do you have any idea how to do it?
Simple <input type="reset"> does not submit the form.
your button should be like this:
<input type="button" onclick="DeleteText();" value="Delete text" />
and your javascript code:
function DeleteText() {
document.getElementById('my_text_input_id').value = '';
document.getElementById('my_form_id').submit();
}
suppose the text box has id="myText" and the new button has id="clearBtn", and the form has id=myForm. You can do the following:
$(#clearBtn).on("click",function() {
$('#myText').val("");
document.forms["myForm"].submit();
})
This is untested, but proposes an idea. Also, This is a jquery solution, which I recommend over pure javascript in most cases.
HTML5 brings us the "placeholder" attribute, which allows for a Pure CSS implementation of this.
<input type="text" name="focus" required class="search-box" placeholder="Enter search term" />
I have successfully used Shidhin's solution, found here:
http://codepen.io/shidhincr/pen/ICLBD
I have the following codes, its part of the application I am building for iPhone/android phones.
<li><span>X</span><input type="text" pattern="[0-9]*" id="anum" maxlength="9" placeholder="Account Number""/></li>
<li><span>X</span><input type="text" id="bname" placeholder="Beneficiary Name" /></li>
the "X" between the spans is suppose to appear when on a keyboard a button is pressed. after the "x" has appeared the user can remove the entire text in that field by pressing on the "x". when there is no element in the field at all, the "x" is not visible. But i cant make it happen.
I am using webapp-net. I would be glad if some could help me with this.
I'm not either quite familiar with WebApp.Net, but you might consider on using a form and a reset button, such as:
<input type="button" value="X" onClick="this.form.reset()" />
or something like:
<input type="reset" value="X">
inside of a <form> with the rest text inputs, and having in mind an html-like enviroment (even thought this might not clear a radio/checkbox inputs).
If I haven't got you wrong, you might also consider on looking if there is something like placeholders for textareas and/or text inputs on that framework. Good luck.
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).