/docs/demos/forms/form-disabled.html

https://github.com/forresst/jquery-mobile-fr_FR · HTML · 497 lines · 445 code · 52 blank · 0 comment · 0 complexity · 1a010efa2370c1cecda1b5d58f47672f MD5 · raw file

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <title>Formulaire désactivé - Démos jQuery Mobile</title>
  8. <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css">
  9. <link rel="stylesheet" href="../_assets/css/jqm-demos.css">
  10. <script src="../../../js/jquery.js"></script>
  11. <script src="../_assets/js/"></script>
  12. <script src="../../../js/"></script>
  13. </head>
  14. <body>
  15. <div data-role="page">
  16. <div data-role="header" data-theme="f">
  17. <h1>Formulaire désactivé</h1>
  18. <a href="../" data-icon="home" data-iconpos="notext" data-ajax="false">Accueil</a>
  19. </div><!-- /header -->
  20. <div data-role="content">
  21. <div class="content-primary">
  22. <h2>Éléments de formulaire désactivés</h2>
  23. <form action="#" method="get">
  24. <div data-demo-html="true">
  25. <div data-role="fieldcontain">
  26. <label for="textinput-1">Saisie de texte :</label>
  27. <input disabled="disabled" type="text" name="textinput-1" id="textinput-1" placeholder="Text input" value="">
  28. </div>
  29. </div><!--/demo-html -->
  30. <div data-demo-html="true">
  31. <div data-role="fieldcontain">
  32. <label for="search-1">Saisie pour recherche :</label>
  33. <input disabled="disabled" type="search" name="search-1" id="search-1" value="">
  34. </div>
  35. </div><!--/demo-html -->
  36. <div data-demo-html="true">
  37. <div data-role="fieldcontain">
  38. <label for="textarea-1">Zone de texte :</label>
  39. <textarea disabled="disabled" cols="40" rows="8" name="textarea-1" id="textarea-1">Zone de texte</textarea>
  40. </div>
  41. </div><!--/demo-html -->
  42. <div data-demo-html="true">
  43. <div data-role="fieldcontain">
  44. <label for="select-native-1">Sélection Native :</label>
  45. <select disabled="disabled" name="select-native-1" id="select-native-1">
  46. <option value="small">Un</option>
  47. <option value="medium">Deux</option>
  48. <option value="large">Trois</option>
  49. </select>
  50. </div>
  51. </div><!--/demo-html -->
  52. <div data-demo-html="true">
  53. <div data-role="fieldcontain">
  54. <label for="select-multiple-1">Sélection multiple personnalisée :</label>
  55. <select disabled="disabled" multiple="multiple" data-native-menu="false" name="select-multiple-1" id="select-multiple-1">
  56. <option value="">Choix :</option>
  57. <option value="small">Un</option>
  58. <option value="medium">Deux</option>
  59. <option value="large">Trois</option>
  60. </select>
  61. </div>
  62. </div><!--/demo-html -->
  63. <div data-demo-html="true">
  64. <div data-role="fieldcontain">
  65. <fieldset data-role="controlgroup">
  66. <legend>Controlgroup Vertical, boutons :</legend>
  67. <button disabled="disabled" data-icon="home" data-iconpos="right">Un</button> <input disabled="disabled" type="button" data-icon="back" data-iconpos="right" value="Deux"> <a class="ui-disabled" href="#" data-role="button" data-icon="grid" data-iconpos="right">Trois</a>
  68. </fieldset>
  69. </div>
  70. </div><!--/demo-html -->
  71. <div data-demo-html="true">
  72. <div data-role="fieldcontain">
  73. <fieldset data-role="controlgroup" data-type="horizontal">
  74. <legend>Controlgroup Horizontal, boutons :</legend>
  75. <button disabled="disabled" data-icon="home" data-iconpos="right">Un</button> <input disabled="disabled" type="button" data-icon="back" data-iconpos="right" value="Deux"> <a class="ui-disabled" href="#" data-role="button" data-icon="grid" data-iconpos="right">Trois</a>
  76. </fieldset>
  77. </div>
  78. </div><!--/demo-html -->
  79. <div data-demo-html="true">
  80. <div data-role="fieldcontain">
  81. <fieldset data-role="controlgroup">
  82. <legend>Controlgroup Vertical, sélection :</legend>
  83. <label for="select-v-1a">Sélection A</label>
  84. <select disabled="disabled" name="select-v-1a" id="select-v-1a">
  85. <option value="#">Un</option>
  86. <option value="#">Deux</option>
  87. <option value="#">Trois</option>
  88. </select>
  89. <label for="select-v-1b">Sélection B</label>
  90. <select disabled="disabled" name="select-v-1b" id="select-v-1b">
  91. <option value="#">Un</option>
  92. <option value="#">Deux</option>
  93. <option value="#">Trois</option>
  94. </select>
  95. <label for="select-v-1c">Sélection C</label>
  96. <select disabled="disabled" name="select-v-1c" id="select-v-1c">
  97. <option value="#">Un</option>
  98. <option value="#">Deux</option>
  99. <option value="#">Trois</option>
  100. </select>
  101. </fieldset>
  102. </div>
  103. </div><!--/demo-html -->
  104. <div data-demo-html="true">
  105. <div data-role="fieldcontain">
  106. <fieldset data-role="controlgroup" data-type="horizontal">
  107. <legend>Controlgroup Horizontal, sélection :</legend>
  108. <label for="select-h-1a">Sélection A</label>
  109. <select disabled="disabled" name="select-h-1a" id="select-h-1a">
  110. <option value="#">Un</option>
  111. <option value="#">Deux</option>
  112. <option value="#">Trois</option>
  113. </select>
  114. <label for="select-h-1b">Sélection B</label>
  115. <select disabled="disabled" name="select-h-1b" id="select-h-1b">
  116. <option value="#">Un</option>
  117. <option value="#">Deux</option>
  118. <option value="#">Trois</option>
  119. </select>
  120. <label for="select-h-1c">Sélection C</label>
  121. <select disabled="disabled" name="select-h-1c" id="select-h-1c">
  122. <option value="#">Un</option>
  123. <option value="#">Deux</option>
  124. <option value="#">Trois</option>
  125. </select>
  126. </fieldset>
  127. </div>
  128. </div><!--/demo-html -->
  129. <div data-demo-html="true">
  130. <div data-role="fieldcontain">
  131. <fieldset data-role="controlgroup" data-type="horizontal">
  132. <legend>Controlgroup Horizontal, mixé :</legend>
  133. <a class="ui-disabled" href="#" data-role="button" data-icon="arrow-r" data-iconpos="right">Lien</a> <button disabled="disabled" data-icon="grid" data-iconpos="notext">Bouton</button>
  134. <label for="select-v-1e">Sélection</label>
  135. <select disabled="disabled" name="select-v-1e" id="select-v-1e">
  136. <option value="#">Un</option>
  137. <option value="#">Deux</option>
  138. <option value="#">Trois</option>
  139. </select>
  140. </fieldset>
  141. </div>
  142. </div><!--/demo-html -->
  143. <div data-demo-html="true">
  144. <div data-role="fieldcontain">
  145. <label for="slider-1">Curseur :</label>
  146. <input disabled="disabled" type="range" name="slider-1" id="slider-1" value="50" min="0" max="100" data-highlight="true">
  147. </div>
  148. </div><!--/demo-html -->
  149. <div data-demo-html="true">
  150. <div data-role="fieldcontain">
  151. <label for="flip-1">Interrupteur :</label>
  152. <select disabled="disabled" name="flip-1" id="flip-1" data-role="slider">
  153. <option value="off">Arrêt</option>
  154. <option value="on">Marche</option>
  155. </select>
  156. </div>
  157. </div><!--/demo-html -->
  158. <div data-demo-html="true">
  159. <div data-role="fieldcontain">
  160. <fieldset data-role="controlgroup">
  161. <legend>Case à cocher seule :</legend>
  162. <label for="checkbox-1">J'accepte</label>
  163. <input disabled="disabled" type="checkbox" name="checkbox-1" id="checkbox-1">
  164. </fieldset>
  165. </div>
  166. </div><!--/demo-html -->
  167. <div data-demo-html="true">
  168. <div data-role="fieldcontain">
  169. <fieldset data-role="controlgroup">
  170. <legend>Controlgroup Vertical, cases à cocher :</legend>
  171. <input disabled="disabled" type="checkbox" name="checkbox-v-1a" id="checkbox-v-1a">
  172. <label for="checkbox-v-1a">Un</label>
  173. <input disabled="disabled" type="checkbox" name="checkbox-v-1b" id="checkbox-v-1b">
  174. <label for="checkbox-v-1b">Deux</label>
  175. <input disabled="disabled" type="checkbox" name="checkbox-v-1c" id="checkbox-v-1c">
  176. <label for="checkbox-v-1c">Trois</label>
  177. </fieldset>
  178. </div>
  179. </div><!--/demo-html -->
  180. <div data-demo-html="true">
  181. <div data-role="fieldcontain">
  182. <fieldset data-role="controlgroup">
  183. <legend>Controlgroup Vertical, radio boutons :</legend>
  184. <input disabled="disabled" type="radio" name="radio-choice-v-1" id="radio-choice-v-1a" value="on" checked="checked">
  185. <label for="radio-choice-v-1a">Un</label>
  186. <input disabled="disabled" type="radio" name="radio-choice-v-1" id="radio-choice-v-1b" value="off">
  187. <label for="radio-choice-v-1b">Deux</label>
  188. <input disabled="disabled" type="radio" name="radio-choice-v-1" id="radio-choice-v-1c" value="other">
  189. <label for="radio-choice-v-1c">Trois</label>
  190. </fieldset>
  191. </div>
  192. </div><!--/demo-html -->
  193. <div data-demo-html="true">
  194. <div data-role="fieldcontain">
  195. <fieldset data-role="controlgroup" data-type="horizontal">
  196. <legend>Controlgroup Horizontal, cases à cocher :</legend>
  197. <input disabled="disabled" type="checkbox" name="checkbox-h-1a" id="checkbox-h-1a">
  198. <label for="checkbox-h-1a">Un</label>
  199. <input disabled="disabled" type="checkbox" name="checkbox-h-1b" id="checkbox-h-1b">
  200. <label for="checkbox-h-1b">Deux</label>
  201. <input disabled="disabled" type="checkbox" name="checkbox-h-1c" id="checkbox-h-1c">
  202. <label for="checkbox-h-1c">Trois</label>
  203. </fieldset>
  204. </div>
  205. </div><!--/demo-html -->
  206. <div data-demo-html="true">
  207. <div data-role="fieldcontain">
  208. <fieldset data-role="controlgroup" data-type="horizontal">
  209. <legend>Controlgroup Horizontal, radio boutons :</legend>
  210. <input disabled="disabled" type="radio" name="radio-choice-h-1" id="radio-choice-h-1a" value="on" checked="checked">
  211. <label for="radio-choice-h-1a">Un</label>
  212. <input disabled="disabled" type="radio" name="radio-choice-h-1" id="radio-choice-h-1b" value="off">
  213. <label for="radio-choice-h-1b">Deux</label>
  214. <input disabled="disabled" type="radio" name="radio-choice-h-1" id="radio-choice-h-1c" value="other">
  215. <label for="radio-choice-h-1c">Trois</label>
  216. </fieldset>
  217. </div>
  218. </div><!--/demo-html -->
  219. <div data-demo-html="true">
  220. <div data-role="fieldcontain">
  221. <label for="submit-1">Envoyer :</label>
  222. <button disabled="disabled" type="submit" id="submit-1">Valider</button>
  223. </div>
  224. </div><!--/demo-html -->
  225. </form>
  226. <h3>Taille mini</h3>
  227. <form action="#" method="get">
  228. <div data-demo-html="true">
  229. <div data-role="fieldcontain">
  230. <label for="textinput-5">Saisie de texte :</label>
  231. <input disabled="disabled" type="text" name="textinput-5" id="textinput-5" placeholder="Text input" value="" data-mini="true">
  232. </div>
  233. </div><!--/demo-html -->
  234. <div data-demo-html="true">
  235. <div data-role="fieldcontain">
  236. <label for="search-5">Saisie pour recherche :</label>
  237. <input disabled="disabled" type="search" name="search-5" id="search-5" value="" data-mini="true">
  238. </div>
  239. </div><!--/demo-html -->
  240. <div data-demo-html="true">
  241. <div data-role="fieldcontain">
  242. <label for="textarea-5">Zone de texte :</label>
  243. <textarea disabled="disabled" cols="40" rows="8" name="textarea-5" id="textarea-5" data-mini="true">Zone de texte</textarea>
  244. </div>
  245. </div><!--/demo-html -->
  246. <div data-demo-html="true">
  247. <div data-role="fieldcontain">
  248. <label for="select-native-5">Sélection Native :</label>
  249. <select disabled="disabled" name="select-native-5" id="select-native-5" data-mini="true">
  250. <option value="small">Un</option>
  251. <option value="medium">Deux</option>
  252. <option value="large">Trois</option>
  253. </select>
  254. </div>
  255. </div><!--/demo-html -->
  256. <div data-demo-html="true">
  257. <div data-role="fieldcontain">
  258. <label for="select-multiple-5">Sélection multiple personnalisée :</label>
  259. <select disabled="disabled" multiple="multiple" data-native-menu="false" name="select-multiple-5" id="select-multiple-5" data-mini="true">
  260. <option value="">Choix :</option>
  261. <option value="small">Un</option>
  262. <option value="medium">Deux</option>
  263. <option value="large">Trois</option>
  264. </select>
  265. </div>
  266. </div><!--/demo-html -->
  267. <div data-demo-html="true">
  268. <div data-role="fieldcontain">
  269. <fieldset data-role="controlgroup" data-mini="true">
  270. <legend>Controlgroup Vertical, boutons :</legend>
  271. <button disabled="disabled" data-icon="home" data-iconpos="right">Un</button> <input disabled="disabled" type="button" data-icon="back" data-iconpos="right" value="Deux"> <a href="#" data-role="button" data-icon="grid" data-iconpos="right">Trois</a>
  272. </fieldset>
  273. </div>
  274. </div><!--/demo-html -->
  275. <div data-demo-html="true">
  276. <div data-role="fieldcontain">
  277. <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
  278. <legend>Controlgroup Horizontal, boutons :</legend>
  279. <button disabled="disabled" data-icon="home" data-iconpos="right">Un</button> <input disabled="disabled" type="button" data-icon="back" data-iconpos="right" value="Deux"> <a class="ui-disabled" href="#" data-role="button" data-icon="grid" data-iconpos="right">Trois</a>
  280. </fieldset>
  281. </div>
  282. </div><!--/demo-html -->
  283. <div data-demo-html="true">
  284. <div data-role="fieldcontain">
  285. <fieldset data-role="controlgroup" data-mini="true">
  286. <legend>Controlgroup Vertical, sélection :</legend>
  287. <label for="select-v-5a">Sélection A</label>
  288. <select disabled="disabled" name="select-v-5a" id="select-v-5a">
  289. <option value="#">Un</option>
  290. <option value="#">Deux</option>
  291. <option value="#">Trois</option>
  292. </select>
  293. <label for="select-v-5b">Sélection B</label>
  294. <select disabled="disabled" name="select-v-5b" id="select-v-5b">
  295. <option value="#">Un</option>
  296. <option value="#">Deux</option>
  297. <option value="#">Trois</option>
  298. </select>
  299. <label for="select-v-5c">Sélection C</label>
  300. <select disabled="disabled" name="select-v-5c" id="select-v-5c">
  301. <option value="#">Un</option>
  302. <option value="#">Deux</option>
  303. <option value="#">Trois</option>
  304. </select>
  305. </fieldset>
  306. </div>
  307. </div><!--/demo-html -->
  308. <div data-demo-html="true">
  309. <div data-role="fieldcontain">
  310. <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
  311. <legend>Controlgroup Horizontal, sélection :</legend>
  312. <label for="select-h-5a">Sélection A</label>
  313. <select disabled="disabled" name="select-h-5a" id="select-h-5a">
  314. <option value="#">Un</option>
  315. <option value="#">Deux</option>
  316. <option value="#">Trois</option>
  317. </select>
  318. <label for="select-h-5b">Sélection B</label>
  319. <select disabled="disabled" name="select-h-5b" id="select-h-5b">
  320. <option value="#">Un</option>
  321. <option value="#">Deux</option>
  322. <option value="#">Trois</option>
  323. </select>
  324. <label for="select-h-5c">Sélection C</label>
  325. <select disabled="disabled" name="select-h-5c" id="select-h-5c">
  326. <option value="#">Un</option>
  327. <option value="#">Deux</option>
  328. <option value="#">Trois</option>
  329. </select>
  330. </fieldset>
  331. </div>
  332. </div><!--/demo-html -->
  333. <div data-demo-html="true">
  334. <div data-role="fieldcontain">
  335. <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
  336. <legend>Controlgroup Horizontal, mixé :</legend>
  337. <a class="ui-disabled" href="#" data-role="button" data-icon="arrow-r" data-iconpos="right">Lien</a> <button disabled="disabled" data-icon="grid" data-iconpos="notext">Bouton</button>
  338. <label for="select-v-5e">Sélection</label>
  339. <select disabled="disabled" name="select-v-5e" id="select-v-5e">
  340. <option value="#">Un</option>
  341. <option value="#">Deux</option>
  342. <option value="#">Trois</option>
  343. </select>
  344. </fieldset>
  345. </div>
  346. </div><!--/demo-html -->
  347. <div data-demo-html="true">
  348. <div data-role="fieldcontain">
  349. <label for="slider-5">Curseur :</label>
  350. <input disabled="disabled" type="range" name="slider-5" id="slider-5" value="50" min="0" max="100" data-highlight="true" data-mini="true">
  351. </div>
  352. </div><!--/demo-html -->
  353. <div data-demo-html="true">
  354. <div data-role="fieldcontain">
  355. <label for="flip-5">Interrupteur :</label>
  356. <select disabled="disabled" name="flip-5" id="flip-5" data-role="slider" data-mini="true">
  357. <option value="off">Arrêt</option>
  358. <option value="on">Marche</option>
  359. </select>
  360. </div>
  361. </div><!--/demo-html -->
  362. <div data-demo-html="true">
  363. <div data-role="fieldcontain">
  364. <fieldset data-role="controlgroup" data-mini="true">
  365. <legend>Case à cocher seule :</legend>
  366. <label for="checkbox-5">J'accepte</label>
  367. <input disabled="disabled" type="checkbox" name="checkbox-5" id="checkbox-5">
  368. </fieldset>
  369. </div>
  370. </div><!--/demo-html -->
  371. <div data-demo-html="true">
  372. <div data-role="fieldcontain">
  373. <fieldset data-role="controlgroup" data-mini="true">
  374. <legend>Controlgroup Vertical, cases à cocher :</legend>
  375. <input disabled="disabled" type="checkbox" name="checkbox-v-5a" id="checkbox-v-5a">
  376. <label for="checkbox-v-5a">Un</label>
  377. <input disabled="disabled" type="checkbox" name="checkbox-v-5b" id="checkbox-v-5b">
  378. <label for="checkbox-v-5b">Deux</label>
  379. <input disabled="disabled" type="checkbox" name="checkbox-v-5c" id="checkbox-v-5c">
  380. <label for="checkbox-v-5c">Trois</label>
  381. </fieldset>
  382. </div>
  383. </div><!--/demo-html -->
  384. <div data-demo-html="true">
  385. <div data-role="fieldcontain">
  386. <fieldset data-role="controlgroup" data-mini="true">
  387. <legend>Controlgroup Vertical, radio boutons :</legend>
  388. <input disabled="disabled" type="radio" name="radio-choice-v-5" id="radio-choice-v-5a" value="on" checked="checked">
  389. <label for="radio-choice-v-5a">Un</label>
  390. <input disabled="disabled" type="radio" name="radio-choice-v-5" id="radio-choice-v-5b" value="off">
  391. <label for="radio-choice-v-5b">Deux</label>
  392. <input disabled="disabled" type="radio" name="radio-choice-v-5" id="radio-choice-v-5c" value="other">
  393. <label for="radio-choice-v-5c">Trois</label>
  394. </fieldset>
  395. </div>
  396. </div><!--/demo-html -->
  397. <div data-demo-html="true">
  398. <div data-role="fieldcontain">
  399. <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
  400. <legend>Controlgroup Horizontal, cases à cocher :</legend>
  401. <input disabled="disabled" type="checkbox" name="checkbox-h-5a" id="checkbox-h-5a">
  402. <label for="checkbox-h-5a">Un</label>
  403. <input disabled="disabled" type="checkbox" name="checkbox-h-5b" id="checkbox-h-5b">
  404. <label for="checkbox-h-5b">Deux</label>
  405. <input disabled="disabled" type="checkbox" name="checkbox-h-5c" id="checkbox-h-5c">
  406. <label for="checkbox-h-5c">Trois</label>
  407. </fieldset>
  408. </div>
  409. </div><!--/demo-html -->
  410. <div data-demo-html="true">
  411. <div data-role="fieldcontain">
  412. <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
  413. <legend>Controlgroup Horizontal, radio boutons :</legend>
  414. <input disabled="disabled" type="radio" name="radio-choice-h-5" id="radio-choice-h-5a" value="on" checked="checked">
  415. <label for="radio-choice-h-5a">Un</label>
  416. <input disabled="disabled" type="radio" name="radio-choice-h-5" id="radio-choice-h-5b" value="off">
  417. <label for="radio-choice-h-5b">Deux</label>
  418. <input disabled="disabled" type="radio" name="radio-choice-h-5" id="radio-choice-h-5c" value="other">
  419. <label for="radio-choice-h-5c">Trois</label>
  420. </fieldset>
  421. </div>
  422. </div><!--/demo-html -->
  423. <div data-demo-html="true">
  424. <div data-role="fieldcontain">
  425. <label for="submit-5">Envoyer :</label>
  426. <button disabled="disabled" type="submit" id="submit-5" data-mini="true">Valider</button>
  427. </div>
  428. </div><!--/demo-html -->
  429. </form>
  430. <h2>Class ui-disabled</h2>
  431. <div data-demo-html="true">
  432. <a href="#" data-role="button" class="ui-disabled" data-icon="arrow-r" data-iconpos="right">Bouton de lien</a>
  433. </div><!--/demo-html -->
  434. <div data-demo-html="true">
  435. <a href="#" data-role="button" class="ui-disabled" data-icon="arrow-r" data-iconpos="right" data-mini="true">Bouton de lien</a>
  436. </div><!--/demo-html -->
  437. </div><!--/content-primary -->
  438. </div><!-- /content -->
  439. <div class="jqm-footer">
  440. <p class="jqm-version"></p>
  441. <p>Copyright 2013 The jQuery Foundation</p>
  442. </div><!-- /jqm-footer -->
  443. </div><!-- /page -->
  444. </body>
  445. </html>