Sélection de la langue

Recherche


Correspondance d'URL - Sélectionner un champ de saisie

Sélectionnez des champs de saisie par défaut selon la correspondance des paramètres de l'URL.

Exemple avec source

Choisissez un fruit (<input type="checkbox">)
Choisissez un fruit (<input type="radio">)
Source code
<div data-wb-urlmapping='{
	"f=b": {
		"action": "selectInput",
		"source": "#fruitsOptions",
		"value": "Bananes"
	}
}'></div>

<form id="fruitsOptions">
	<label for="fruitsSelect">Sélectionner un fruit (<code><select></code>)</label>
	<select name="fruitsSelect" id="fruitsSelect" class="form-control mrgn-bttm-lg">
		<option value="all">Tous</option>
		<option value="Bananes">Bananes</option>
		<option value="Oranges">Oranges</option>
		<option value="Pommes">Pommes</option>
	</select>

	<fieldset class="gc-chckbxrdio form-inline mrgn-bttm-lg">
		<legend>Choisissez un fruit (<code><input type="checkbox"></code>)</legend>
		<div class="checkbox label-inline">
			<input type="checkbox" name="fruitsCheckboxes" id="BananesCheckbox" value="Bananes"><label for="BananesCheckbox">Bananes</label>
		</div>
		<div class="checkbox label-inline">
			<input type="checkbox" name="fruitsCheckboxes" id="OrangesCheckbox" value="Oranges"><label for="OrangesCheckbox">Oranges</label>
		</div>
		<div class="checkbox label-inline">
			<input type="checkbox" name="fruitsCheckboxes" id="PommesCheckbox" value="Pommes"><label for="PommesCheckbox">Pommes</label>
		</div>
	</fieldset>

	<fieldset class="gc-chckbxrdio form-inline">
		<legend>Choisissez un fruit (<code><input type="radio"></code>)</legend>
		<div class="radio label-inline">
			<input type="radio" name="fruitsRadios" id="BananesRadio" value="Bananes"><label for="BananesRadio">Bananes</label>
		</div>
		<div class="radio label-inline">
			<input type="radio" name="fruitsRadios" id="OrangesRadio" value="Oranges"><label for="OrangesRadio">Oranges</label>
		</div>
		<div class="radio label-inline">
			<input type="radio" name="fruitsRadios" id="PommesRadio" value="Pommes"><label for="PommesRadio">Pommes</label>
		</div>
	</fieldset>
</form>

Exemple sans source

Choisissez un fruit (<input type="checkbox">)
Choisissez un fruit (<input type="radio">)
Source code
<label for="fruitsSelect2">Sélectionnez un fruit (<code><select></code>)</label>
<select id="fruitsSelect2" class="form-control" data-wb-urlmapping='{
	"f=g": {
		"action": "selectInput",
		"value": "Raisins"
	}
}'>
	<option value="Tous">Tous</option>
	<option value="Oranges">Oranges</option>
	<option value="Pommes">Pommes</option>
	<option value="Raisins">Raisins</option>
</select>

<fieldset class="gc-chckbxrdio form-inline mrgn-bttm-lg" data-wb-urlmapping='{
	"f=g": {
		"action": "selectInput",
		"value": "Raisins"
	}
}'>
	<legend>Choisissez un fruit (<code><input type="checkbox"></code>)</legend>
	<div class="checkbox label-inline">
		<input type="checkbox" name="fruitsCheckboxes2" id="BananesCheckbox2" value="Bananes"><label for="BananesCheckbox2">Bananes</label>
	</div>
	<div class="checkbox label-inline">
		<input type="checkbox" name="fruitsCheckboxes2" id="OrangesCheckbox2" value="Oranges"><label for="OrangesCheckbox2">Oranges</label>
	</div>
	<div class="checkbox label-inline">
		<input type="checkbox" name="fruitsCheckboxes2" id="RaisinsCheckbox2" value="Raisins"><label for="RaisinsCheckbox2">Raisins</label>
	</div>
</fieldset>

<fieldset class="gc-chckbxrdio form-inline" data-wb-urlmapping='{
	"f=g": {
		"action": "selectInput",
		"value": "Raisins"
	}
}'>
	<legend>Choisissez un fruit (<code><input type="radio"></code>)</legend>
	<div class="radio label-inline">
		<input type="radio" name="fruitsRadios2" id="BananesRadio2" value="Bananes"><label for="BananesRadio2">Bananes</label>
	</div>
	<div class="radio label-inline">
		<input type="radio" name="fruitsRadios2" id="OrangesRadio2" value="Oranges"><label for="OrangesRadio2">Oranges</label>
	</div>
	<div class="radio label-inline">
		<input type="radio" name="fruitsRadios2" id="RaisinsRadio2" value="Raisins"><label for="RaisinsRadio2">Raisins</label>
	</div>
</fieldset>

Détails de la page

Date de modification :