Hi I'm triyng to use subscript characteres into the placeholder of the html input tag.
<input type="text" class="form-control" id="fi2" placeholder="Installed Power kW<sub>p</sub>">
But i got this: Installed Power kW<sub>p</sub>
If I use for example a supercript (sup) everyhing works well...
Any help?
Best regards,
Daniel
http://www.fileformat.info/info/unicode/char/209a/index.htm
you need some font linked in the webpage that contains subscript p (the fonts are listed on the website cited up), and after, write:
<input type="text" class="form-control" id="fi2">
<script>
var placeholderText = 'Installed Power kW\u209A';
$("#fi2").attr('placeholder', placeholderText);
</script>
That's not possible. HTML attributes cannot have HTML markup inside them.
You'd have to use a <label> instead.
And FYI, here's the MDN site says about the use of placeholder:
Do not use the placeholder attribute instead of a element. Their purposes are different: the attribute describes the role of the form element; that is, it indicates what kind of information is expected, the placeholder attribute is a hint about the format the content should take. There are cases in which the placeholder attribute is never displayed to the user, so the form must be understandable without it.
<input type=“text” class=“form-control” id=“fi2” placeholder=“Installed Power KWₚ”>
I suggest just copy/pasting a subscript char. It sure isn’t a long-term or efficient answer, but it should be adequate for your situation.
Related
I want to use the html attribut required pattern instead of javascript to allow URLs that start with www. So both examples should be valid:
www.some.site.com
http://some.site.com
I've tried required pattern="https?:\/\/.+|www.+" but it's not working (see my JS fiddle).
The way you see it's not working is when you leave the input box and it turns red (default browser behaviour)
Is the regex pattern wrong? Or is it simply not possible to have URLs starting with www when the input type=url?
Here is my regex101.com test.
<p>
<input required pattern="https?:\/\/.+|www.+" name="myURL" type="url" placeholder="Enter url" >
</p>
<p>
<input id="myComment" name="myComment" type="text" placeholder="not in use">
</p>
The url input type comes with it's own validation. If you want to accept input that is broader than what that type allows, then use the basic text input type and pair that with whatever validation pattern you prefer.
The pattern attribute specifies a regular expression that the element's value is checked against on form submission.
In your case i think this regex will work:
(hhttps?:\/\/)?(www\.)+.*
You can play around with regex at: https://regexr.com/
You can learn more about pattern attribute at:
https://www.w3schools.com/tags/att_input_pattern.asp
I discovered that <input>s without the type attribute will use type="text" by default, as demonstrated by this code snippet:
<!--Credit goes to http://www.asciitohex.com/ for generating HTML entities-->
<p><input type="text"></p>
<p><input type="text"></p>
<p><input></p>
<p><input></p>
But as we all know, just because you don't have to include something doesn't mean it's a good idea to not. So, should type="text" be included regardless, or should we simply omit it to shave off a couple of bytes and work required?
The Mozilla documentation states
How an works varies considerably depending on the value of its
type attribute, hence the different types are covered in their own
separate reference pages. If this attributes is not specified, the
default type adopted type is text.
And the official W3C documentation for HTML4
type=.... This attribute specifies the type of control to create. The default value for this attribute is "text".
And in HTML5 the W3C specifies
The missing value default is the Text state.
and provides this example for how one might ask for the customer's name:
<form>
<p><label>Customer name: <input></label></p>
</form>
For the following html code:
<div class="r signbox">
<form method="POST" id="loginByEmail">
<dl>
<dt>Seller Login</dt>
<dd>
<input type="text" class="text" name="email" placeholder="Email Address" value="">
<div class="error"></div>
How could I select the "email" attribute in name? The reason why is because the site uses two form boxes that have the same name so I want to target specifically the one in the class "r signbox". Thanks for your help, completely new to Selenium Webdriver.
First select all the content of the class "r signbox" in your selector.
After you pick the desired information, you can take the derised information using a new selector in sequense in the same code block. As you asked, using attr name will be:
$(".r.signbox [class='email']");
By same name you mean the id attribute?
If so, that's odd.
If not, I suggest you to map first the form element and after the input. Doing so, you will be preventing your test to break in case another form to be added between the div.r.signbox and the form.#loginByEmail
Anyway, #Striter awnser is incorrect because he looking for anything with email as class.
A tip is to use the tags names to be more precise:
div.r.signbox input[name='email']
This looks for a div with both r and signbox and inside this element (see the space?) for an input with an attribute name valued as email.
Even if someone put a div with an attribute name valued as email between dd and dt, you locator will work fine.
Here is a good reference to CSS Selectors: https://saucelabs.com/selenium/css-selectors
If you like books, the first chapter of Selenium Testing Tools Cookbook will give you good knowledge: http://www.amazon.com/Selenium-Testing-Cookbook-Gundecha-Unmesh/dp/1849515743
What is the significance of cmdValue in the input tag in the following:
<input type="button" value="Bold" cmdValue="bold">
This is from <div id="actions"> on a website.
I looked up the input tag on several HTML reference sites and searched for cmdValue in conjunction with the input tag, but could find no data.
That is not a formal HTML attribute for any known tag.
That is certainly a customized attribute added by the developers of that website.
I prefer to forward you to read the answers of this question.
The significance is whatever the CSS or JavaScript code for the page assigns to it. You would need to analyze the page in detail to find this out.
As such, the nonstandard has no effect beyond getting inserted into the DOM as an attribute.
In-field labels are extremely popular now. They save space and look cool. There are many, many ways to accomplish them. It is now very easy to do using the HTML5 placeholder parameter for form inputs. You can even then create backwards compatibility with a bit of jquery if you want to.
But, is it semantically correct to use placeholder="Name" instead of <label>Name</label> or should a label element always be included and placeholder reserved to guide the user like this:
<label for="name">Name</label><input id="name" type="text" placeholder="Jane Doe">
If it's generally considered ok to use placeholder as either a label or an example, then that's definitely the easiest way to accomplish this effect. No javascript needed for modern browsers, no chance of submitting the label as the input value, etc. What are the semantic and practical drawbacks of doing this, if any?
The HTML5 specification explicitly calls this out. It says:
The placeholder attribute should not be used as a replacement for a
label. For a longer hint or other advisory text, place the text next
to the control.
Use of the placeholder attribute as a replacement for a label can
reduce the accessibility and usability of the control for a range of
users including older users and users with cognitive, mobility, fine
motor skill or vision impairments. While the hint given by the
control's label is shown at all times, the short hint given in the
placeholder attribute is only shown before the user enters a value.
Furthermore, placeholder text may be mistaken for a pre-filled value,
and as commonly implemented the default color of the placeholder text
provides insufficient contrast and the lack of a separate visible
label reduces the size of the hit region available for setting focus
on the control.
HTML5 spec notwithstanding, It's becoming popular to use the "Float Label Pattern". The label starts as a placeholder, but then moves up above the field once text has been entered.
There's a handy tutorial for it here....
http://webdesign.tutsplus.com/tutorials/ux-tutorials/implementing-the-float-label-form-pattern/