In PHPStorm, when creating a snippet, you can do something like this:
<!-- $VALUE$ Form Input -->
<div class="form-group">
<input type="text" name="$NAME$" class="form-control">
</div>
With variables and such, so you can easily write a value. I'm wondering how to do the same thing with Sublime Text 3. This is what I have in my CDATA tag:
<!-- $VALUE Form Input -->
<div class="form-group">
<input type="text" name="$NAME" class="form-control">
</div>
However, it's not working.
Unfortunately, the only variables that are available in snippets are specified in the docs under snippets environment-variables, as well as any you declare in a .tmPreferences metadata file, or in a .sublime-options file. However, you can have predefined values in snippets. For example, this snippet:
<snippet>
<content><![CDATA[<!-- ${1:VALUE} Form Input -->
<div class="form-group">
<input type="text" name="${2:NAME}" class="form-control">
</div>$0]]></content>
<tabTrigger>form_group</tabTrigger>
<scope>text.html</scope>
</snippet>
gives this result when triggered:
You can then hit Tab and the focus will move from field 1 to field 2:
and again to move to the exit point $0:
Related
I am trying to automate login to a website (http://www.primecbdatabase.com/). It's source code is as follows
<p><label for="username">User ID</label> <input type="text" name="user_id" value="" onchange="javascript:replcodeid()"; size="6" maxlength="50"></p>
<p><label for="Password">Password</label><input type="password" name="password" id="password" value="" size="6" onkeypress="return SplChar1(event);" onchange="javascript:replcodepwd()" maxlength="16" ></p>
<p class="btn" style="margin-bottom:0;"><a onmouseover="self.status='PRIME Database';return true" href="javascript:submit1()"><img src="images_NSE/login-btn1.png"></a></p>
<p class="password">Forgot Password?</p>
It works correctly when dealing with the username input as shown below
inputElement = driver.find_element_by_name('user_id')
inputElement.send_keys(username)
But when I am trying to do the same for password (as shown below) it throws the ElementNotInteractableException. Looks like I am having trouble with send_keys to transfer the password to the input box.
inputElement = driver.find_element_by_name('password')
inputElement.send_keys(password)
I tried changing find_element_by_name to find_element_by_id, it still doesn't work. Kindly help me with it.
You need to click on the textbox before type.
driver.find_element_by_id("password").click()
driver.find_element_by_id("password").send_keys("123")
I have tried and am able to type a password using a script.
How can I use the aria-attribute aria-labelledby for combo box (input+autocomplete list) correctly?
According to the W3C, the aria-labelledby property provides the user with a recognizable name of the object.
I've found the following example on W3C:
<div class="combobox-wrapper">
<div>
<input type="text"
aria-labelledby="ex1-label">
</div>
<ul aria-labelledby="ex1-label"></ul>
</div>
But I've noticed that aria-labelledby isn't descriptive. Values in aria-labelledby for different element are used the same.
Maybe I can use aria-labelledby like this:
<div class="combobox-wrapper">
<div>
<input type="text"
aria-labelledby="textBox">
</div>
<ul aria-labelledby="autocomplete-list"></ul>
</div>
The WAI ARIA attribute aria-labelledby is used when you can't use the normal <input> + <label> combination to label a form element, e.g. because you are using a custom form element. In other words, it is used in situations where you can't use the <label>'s for attribute to define a label for the input (e.g.
<input id="communitymode" name="communitymode" type="checkbox"> <label for="communitymode">communiti wiki</label>; note that the for attribute's value refers to the input's id attribute.)
With aria-labelledby, your reference works in the opposite direction as the for attibute: you tell the browser or the screen reader where to find the "label" for the form control it has just encountered.
<div class="combobox-wrapper">
<div>
<span id="combolabel">Select your country:</span>
<input type="text"
aria-labelledby="combolabel">
</div>
<ul aria-labelledby="combolabel"></ul>
</div>
In the above code sample, both the <input> element and the <ul> element are labelled by the <span> element with id "combolabel".
Remember the first rule of ARIA is don't use ARIA when native HTML elements exist. If you are trying to create an accessible autocomplete box try this:
http://wet-boew.github.io/v4.0-ci/demos/datalist/datalist-en.html
It does not use ARIA and follows all applicable W3C rules and guidelines.
I have a form that spans multiple tabs in a TabStrip control. However, when the form is validated (e.g. f.valid), not all controls are considered when the validation is evaluated.
For example, if an input field is on tab 1 that is marked as "required" and the save action is called when the focus is on tab #3, the form will read as invalid since the required field is not in view. If the focus is on Tab #1, all works as expected.
I understand why this behavior is occurring, but I wanted to see if there was any suggested workaround.
Thanks!
Update
I created a plunkr that shows the basic issue. It is actually a little backwards from the problem I described, but it shows how the form ignores the fields on tabs other than the one displayed during validation: Plunkr Example
The template code looks like this:
<form #f="ngForm" (ngSubmit)="save(f)">
<kendo-tabstrip>
<kendo-tabstrip-tab [title]="'Paris'" [selected]="true">
<ng-template kendoTabContent>
<input type="text" name="controlOne" id="controlOne" [(ngModel)]="myModel.controlOne" required>
</ng-template>
</kendo-tabstrip-tab>
<kendo-tabstrip-tab [title]="'New York City'">
<ng-template kendoTabContent>
<input type="text" name="controlTwo" id="controlTwo" [(ngModel)]="myModel.controlTwo">
</ng-template>
</kendo-tabstrip-tab>
<kendo-tabstrip-tab [title]="'Tallinn'">
<ng-template kendoTabContent>
<input type="text" name="controlThree" id="controlThree" [(ngModel)]="myModel.controlThree">
</ng-template>
</kendo-tabstrip-tab>
</kendo-tabstrip>
<button type="submit">Save changes</button>
</form>
<div>
Valid when saving: {{ isValid }}
</div>
The bottom line for text-field is shown a bit above.
No CSS used ...
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" pattern="[0-9]*" id="phone">
<label class="mdl-textfield__label" for="phone">Phone</label>
<span class="mdl-textfield__error">Digits only</span>
</div>
<form action="#">
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" id="demo-input" />
<label class="mdl-textfield__label" for="demo-input">UserName...</label>
</div>
</form>
Take a look at what I got
Take a look at the answer which i posted for the below stackoverflow thread.
Material Design Lite - Bottom Line in text field has a slight gap with colored line
I need to generate following html markup in jade
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
My try:-
.checkbox
label Remember me
input(type="checkbox")
generates
<div class="checkbox">
<label>
"Remember me
"
<input type="checkbox">
</label>
</div>
How can we place element "checkbox" infront of "Remember me" label text?
Have you tried nesting it like this?
.checkbox
label
input(type="checkbox")
| Remember me