I want to avoid using id for every form element. But I also want to keep the table layout.
<label> works without the id when you put the input inside the label:
<label>Something: <input type="text" ... /> </label>
But now it's sudenly pretty hard to make inputs or the label contents float to sides to make it look like a table. I've been trying the margin: auto on inputs. Without any success.
What do you sugest?
You can use table and create a class with a specific width for those columns that contain the labels.
form.myform table tr td.label {
width:100px;
}
Check this link
I suggest using correct markup with ID, if you don't want to write ID for each element, create a simple jQuery or JS function which assigns for attribute for label and equivalent id for input field.
I suggest, that you shouldn't put input element inside label element. Label has a attribute called "for" so you should do:
<table>
<tr>
<td><label for="myInput"></label> <input id="myInput"/></td>
</tr>
</table>
If you don't want to use tables for alignment, you could also use sections with divs to build a table-like layout.
Related
I have the following HTML structure
<tr>
<td><input name="Choice" type="radio" value="someValue"></td>
<td>text</td>
</tr>
I would like to write a Xpath that finds the link by the value of its text then search the input element and perform an action like click on the input radio button.
I have tried a number of Xpaths like this one
//a[contains(text(), 'text')]/ancestor::/td/input
but they all fail. The first part of the xpath is right but the second path with the ancestor is where it gets into trouble.
//tr[.//[contains(text(), 'text')]]//input
You can search for the common wrapper first, that has text inside. And then just search required element in that wrapper.
It doesn't care about order of the elements, which can be good or not, depending on your task. It also doesn't care about elements being on the same level, but both elements should be inside tr tag.
You can be more precise by adding inner path, or attributes select.
//tr[td[contains(text(), 'text')]]/td/input
This pattern is rarely used for some reason, but I would recommend it for it's readability, simplicity, and straight-forward approach.
//a[contains(text(), 'text')]/../..//input
or
//a[contains(text(), 'text')]/ancestor::tr/td/input
just use '..' goto the immediate parent and then find the input child tag of that
you have to mention which ancestor tag to be select
You were close enough. To locate the <input> element with respect to the <a> tag with text as text you can use either of the following Locator Strategies:
Using the <td> and it's child attributes:
//td[.//a[text()='text']]//preceding::td[1]/input
Using the textContext of <a>:
//a[text()='text']//preceding::td[1]/input
If you want to select input node by link text try
//td[a="text"]/preceding-sibling::td/input
I'm having a little trouble understanding CSS and have a question:
If I have a preset/native element to CSS e.g. fieldset and add the class .scheduler-border so it looks like this: fieldset.scheduler-border it works great.
But when I create a custom element, e.g. fieldset2 and apply the same element onto my custom element e.g. fieldset2.scheduler-border I don't get the desired result.
Could someone explain to me the reason of this?
Its because <fieldset> is a tag. If you want to identify two different fieldsets use an id or another class for example:
<fieldset id="2"> or <fieldset class="2"> that way in your css you can call #2{your changes here for id2} or .2{your changes here for class2} but you cannot change the <tag> values
I normally style my forms in the format
<label for="CompanyNameTextBox">
<span>Company</span>
<input name="CompanyNameTextBox" type="text" id="CompanyNameTextBox" />
</label>
This way I can style the CSS like so:
.input[type=text] span
{
display: inline-block;
width: 200px;
}
and I get a nice side by side arrangement with my labels to the left of the form elements. This works for all elements I should add.
Now, I have a field: Credit Card Expiry Date.
This is special, I have two select lists in a single label:
<label>
<span>Expiry Date</span>
<select name="ExpiryDateMonthDropDownList" id="ExpiryDateMonthDropDownList">
...
</select>
<select name="ExpiryDateYearDropDownList" id="ExpiryDateYearDropDownList">
...
</select>
</label>
If I try to select the latter (Year) it defaults back to selecting the first (Month), even though I haven't specified a for attribute on the label.
So the question would be, what can I do? I can't work out if I'm doing forms wrong (I shouldn't in fact put the input inside the label) or if I have to do some silly workaround like stick the second select inside it's own label.
MDN on <label> says:
The HTML Element represents a caption for an item in a user
interface. It can be associated with a control either by using the for
attribute, or by placing the control element inside the label element.
Such a control is called the labeled control of the label element.
and
No labelable elements other than the labeled control are allowed.
So if you put an control element inside a label it is the same as writing a label for this element, so you see where the problem appears when you place two input fields inside a label.
You can just place the second control outside, or both outside the label and make a for for the first input element, or yes you can make two separate labels for the two input fields, any of this combinations should work when you specify the forattribute.
The specs for HTML5 "w3.org: 4.10.6 The label element" say:
If the for attribute is not specified, but the label element has a labelable element descendant, then the first such descendant in tree order is the label element's labeled control.
For HTML 4 "w3.org: 17.9.1 The LABEL element it's even more strict:
The label element may be used to attach information to controls. Each label element is associated with exactly one form control.
So you may have to wrap both in a container to get the same visual output:
<div class="multiple_inputs">
<label>
<span>Expiry Date</span>
<select name="ExpiryDateMonthDropDownList"></select>
</label>
<select name="ExpiryDateYearDropDownList"></select>
</div>
Of course you can add another <label> to the second field as well.
As already said in Should I put input tags inside a label tag? this is perfectly valid according to w3 but may produce problems with WCAG and some browser implementations.
In this case, you have two input elements inside just one label, which is not good, as there should be one label for each input element. So my proposal is to add another label and just put one element inside of each.
Perhaps if form elements are in label, it selects first element by default. But you can specify second field as for attribute (may be browser-specific, works in firefox 22).
is there any special input type in HTML that is designed to only display values, based on say, other input? When nobody is allowed to write into it. Or is a disabled text box the best option?
<input type="text" readonly />
The readonly attribute does your magic.
Nowadays its very easy to remove readonly attribute on browser. I suggested you to use label or span and write few lines of css codes for that label element to become look like input box.
<label>test value</label>
<style>
label {
padding:3px;
border:1px solid black;
width:200px;
}
</style>
use the readonly attribute, or use javascript to update the contents of a div
In HTML5 drafts, the output element exists for such purposes. I don’t think there’s much point in using it, though, since the same goal can be achieved in other ways.
In order to just display data, use any normal HTML element, like p or div or span.
If the data needs to be transmitted along the form data, put it into a hidden element, <input type=hidden>.
You can of course combine the two if needed: separately display the data and include it into the form data set.
I have an HTML form with radio buttons, check boxes, text fields and drop down lists.
Since I want user to fill everything in my form, none of the radio buttons and check boxes are checked and the text fields are empty.
I would like to write a CSS file that will fill the form with answers (I don't want to change my HTML file).
Is this possible ?
I would appreciate an example or any other idea ?
Thanks !
No, it isn't possible. CSS is for style, not markup, and changing the contents of an input field requires modification of the markup.
It sounds like you might want to consider JavaScript, which can be used to alter the contents of any element, including form elements.
Javascript is your best bet. If you want to fill in -sample- answers, however, like 'First Name' in the text area what would be labelled "First Name: " you can do something like <input type='text' value='First Name' name='emailForm'> and the value attribute will be filled in when the page loads.
You can use jQuery to accomplish what you want quite easily, using CSS-style syntax.
Here's a sample form:
<form ...>
<input name="firstName" />
<input name="lastName" />
</form>
And corresponding jQuery/JavaScript:
$(function () {
$("input[name=firstName]").val("John");
$("input[name=lastName]").val("Doe");
});
Should be easy enough to extend to a larger and more complex form. You can easily use classes or ids on the elements and in the jQuery selectors, as well.
CSS is for designing and styling the webpage. Although its capabilities have been exploited to pull of many tricks it is not a fix-all solution. What you need to do is pull the data you need to fill and put it in your fields.
You can do this two ways:
Use a server side language like PHP/ASP.Net to pre-fill this information.
Use Javascript/Jquery/MooTools or some other framework to fill it on the client-side, picking up the data from the server.
If the information is static then it is very easy, because you can just put this info as a part of the HTML content itself.
If this answer doesn't work for you, add more information to your question.