Selecting right, left, above and below of input nodes with XPath - xpath

Question

From this piece of HTML:
<form action="/signup" class="signup" method="post">
<div class="field">
<input type="text" class="text-input" autocomplete="off" name="user[name]" maxlength="20" placeholder="Nom complet">
</div>
<div class="field">
<input type="text" class="text-input email-input" autocomplete="off" name="user[email]" placeholder="Email">
</div>
<div class="field">
<input type="password" class="text-input" name="user[user_password]" placeholder="Mot de passe">
</div>
<button type="submit" class="btn signup-btn">
S'inscrire
</button>
</form>
Is it possible with XPath expression to return all to-right-of, to-left-of, below and above of each input element?

Answer 1

If you mean position inside document tree, to-right-of is right sibling (axis following-sibling), to-left-of is left sibling (axis preceding-sibling), above is parent (axis parent), below is child (or more children; axis child).
An axis is used as follows:
//button/preceding-sibling::*[last()]
This returns left siblings of all buttons in the document.
Two slashes (//) are a shortcut for /descendant-or-self::node(), which uses axis descendant-or-self and selects all subnodes of current node. At the beginning, the document is the current node, therefore // selects all nodes in the document. Thus //button (/descendant-or-self::node()/button) selects any button in the document. The step preceding-sibling::* selects all preceding siblings of each button. The [last()] part is explained below; it selects only the last preceding sibling of each button.
You can get first item from a collection by appending [1] to the XPath and last item by appending [last()]. These are shortcuts for [position() = 1] and [position() = last()] respectively.
Note that child:: is implied when no axis is given. //form/button is the same as //form/child::button. Also there is an intuitive shortcut for parent::*, namely ...

Answer 2

Palec Thank you for your explanations
For clarity I propose to use the Yahoo Finance website with this page http://finance.yahoo.com/q?s=EURUSD=X
to-right-of is right sibling (axis following-sibling)
For Text "EUR/USD (EURUSD=X)" to-right-of="CCY"
Xpath Expression: .//h2[text()="EUR/USD (EURUSD=X)"]/following-sibling::*[1]
to-left-of is left sibling (axis preceding-sibling)
For Text "CCY" to-left-of="EUR/USD (EURUSD=X)"
Xpath Expression: .//span[text()="CCY "]/preceding-sibling::*[1]
above is parent (axis parent)
For Text "1.3588" above="EUR/USD (EURUSD=X)"
Xpath Expression: .//span[text()="1.3588"]/parent::*[1] => Bad result
below is child (axis child)
For Text "EUR/USD (EURUSD=X)" below="1.3588"
Xpath Expression: .//h2[text()="EUR/USD (EURUSD=X)"]/child::*[1] => No Result
jsfiddle Test
var it = document.evaluate('//h2[text()="EUR/USD (EURUSD=X)"]/following-sibling::*[1]', document);
while (node = it.iterateNext()) { console.log(node); }