formularios.rst 36 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616
  1. ===========
  2. Formularios
  3. ===========
  4. Introducción
  5. ============
  6. Un formulario es un componente de una página web que sirve para recolectar
  7. información proporcionada por los visitantes. Para ello se sirve de varios
  8. elementos: botones, listas desplegables, listas seleccionables, etc.
  9. Para crear un formulario hace falta escribir la interfaz, implementar un
  10. procesamiento en el lado del servidor y configurar la interfaz para
  11. que se comunique con el servidor.
  12. Escribiendo la interfaz de usuario
  13. ----------------------------------
  14. Todos los formularios contienen el elemento ``<form>``, dentro del cual se
  15. ubican los controles del formulario (botones, listas desplegables...).
  16. La mayoría de controles se representan con el elemento ``<input>``, que
  17. por defecto muestra un campo de texto de una línea. Para etiquetar el
  18. control se utiliza el elemento ``<label>``; el texto de la etiqueta y
  19. el control se incluyen dentro del elemento ``<label>``. Cada área dentro
  20. del formulario se suele representar con el elemento ``<div>``.
  21. Para mostrar un ejemplo explicativo y aplicable, vamos a crear un formulario
  22. para encargar una pizza. Así es como podríamos preguntar el nombre de un
  23. cliente...
  24. .. code-block:: html
  25. <form>
  26. <div><label>Nombre del cliente: <input></label></div>
  27. </form>
  28. Para permitir al usuario elegir el tamaño de la pizza podemos usar botones
  29. de opción (en inglés llamados *radio buttons*). Los botones de opción
  30. también se representan con el elemento ``<input>``, pero esta vez usando
  31. el atributo ``type`` con el valor ``radio``. Para hacer que los botones
  32. de radio funcionen como un grupo se les da el mismo nombre usando el
  33. atributo ``name``. Para agrupar un grupo de controles juntos, como son, en
  34. este caso, los botones de opción, se puede utilizar el elemento
  35. ``<fieldset>``. El título del grupo de controles se indica en el primer
  36. elemento del ``<fieldset>``, que debe ser un elemento ``<legend>``.
  37. .. code-block:: html
  38. <form>
  39. <div><label>Nombre del cliente: <input></label></div>
  40. <fieldset>
  41. <legend> Tamaño de la Pizza </legend>
  42. <div><label> <input type=radio name=size> Pequeño </label></div>
  43. <div><label> <input type=radio name=size> Mediano </label></div>
  44. <div><label> <input type=radio name=size> Grande </label></div>
  45. </fieldset>
  46. </form>
  47. Para elegir ingredientes podemos usar casillas de verificación...
  48. .. code-block:: html
  49. <form>
  50. <div><label>Nombre del cliente: <input></label></div>
  51. <fieldset>
  52. <legend> Tamaño de la Pizza </legend>
  53. <div><label> <input type=radio name=size> Pequeño </label></div>
  54. <div><label> <input type=radio name=size> Mediano </label></div>
  55. <div><label> <input type=radio name=size> Grande </label></div>
  56. </fieldset>
  57. <fieldset>
  58. <legend> Ingredientes extra </legend>
  59. <div><label> <input type=checkbox> Bacon </label></div>
  60. <div><label> <input type=checkbox> Extra de queso </label></div>
  61. <div><label> <input type=checkbox> Champiñones </label></div>
  62. <div><label> <input type=checkbox> Cebolla </label></div>
  63. </fieldset>
  64. </form>
  65. Si el formulario se ha enviado con errores o si surge algún problema,
  66. debemos tener un medio para contactar con el cliente. Para ello, podemos
  67. utilizar controles de formularios específicos para números de teléfono
  68. (elementos ``<input>`` con el valor ``tel`` en el atributo ``type``) y
  69. direcciones de correo electrónico (elementos ``<input>`` con el valor ``email``
  70. en el atributo ``type``).
  71. .. code-block:: html
  72. <form>
  73. <div><label>Nombre del cliente: <input></label></div>
  74. <div><label>Teléfono: <input type=tel></label></div>
  75. <div><label>Correo electrónico: <input type=email></label></div>
  76. <fieldset>
  77. <legend> Tamaño de la Pizza </legend>
  78. <div><label> <input type=radio name=size> Pequeño </label></div>
  79. <div><label> <input type=radio name=size> Mediano </label></div>
  80. <div><label> <input type=radio name=size> Grande </label></div>
  81. </fieldset>
  82. <fieldset>
  83. <legend> Ingredientes extra </legend>
  84. <div><label> <input type=checkbox> Bacon </label></div>
  85. <div><label> <input type=checkbox> Extra de queso </label></div>
  86. <div><label> <input type=checkbox> Champiñones </label></div>
  87. <div><label> <input type=checkbox> Cebolla </label></div>
  88. </fieldset>
  89. </form>
  90. Podemos usar un elemento ``<input>`` con el valor ``time`` en el atributo
  91. ``type`` para preguntar por la hora de la entrega. Muchos de estos
  92. controles tiene atributos para controlar exactamente que valores pueden
  93. ser especificados; en este caso, tres atributos de interés son ``min``,
  94. ``max`` y ``step``. Establecen respectivamente el tiempo mínimo, el máximo
  95. y el intervalo entre los valores permitidos (en segundos). La pizzería
  96. solo entrega pedidos entre las 11 a.m. y las 9 p.m., y permite
  97. especificar un tiempo de entrega por incrementos de 15
  98. minutos (11:00, 11:15, 11:30...).
  99. .. code-block:: html
  100. <form>
  101. <div><label>Nombre del cliente: <input></label></div>
  102. <div><label>Teléfono: <input type=tel></label></div>
  103. <div><label>Correo electrónico: <input type=email></label></div>
  104. <fieldset>
  105. <legend> Tamaño de la Pizza </legend>
  106. <div><label> <input type=radio name=size> Pequeño </label></div>
  107. <div><label> <input type=radio name=size> Mediano </label></div>
  108. <div><label> <input type=radio name=size> Grande </label></div>
  109. </fieldset>
  110. <fieldset>
  111. <legend> Ingredientes extra </legend>
  112. <div><label> <input type=checkbox> Bacon </label></div>
  113. <div><label> <input type=checkbox> Extra de queso </label></div>
  114. <div><label> <input type=checkbox> Champiñones </label></div>
  115. <div><label> <input type=checkbox> Cebolla </label></div>
  116. </fieldset>
  117. <div><label>Tiempo de entrega: <input type=time min="11:00" max="21:00" step="900"></label></div>
  118. </form>
  119. El elemento ``<textarea>`` se puede utilizar para proporcionar un campo de
  120. texto extra para escribir mensajes largos. En este caso, vamos a usarlo
  121. para que el cliente pueda especificar instrucciones de entrega.
  122. .. code-block:: html
  123. <form>
  124. <div><label>Nombre del cliente: <input></label></div>
  125. <div><label>Teléfono: <input type=tel></label></div>
  126. <div><label>Correo electrónico: <input type=email></label></div>
  127. <fieldset>
  128. <legend> Tamaño de la Pizza </legend>
  129. <div><label> <input type=radio name=size> Pequeño </label></div>
  130. <div><label> <input type=radio name=size> Mediano </label></div>
  131. <div><label> <input type=radio name=size> Grande </label></div>
  132. </fieldset>
  133. <fieldset>
  134. <legend> Ingredientes extra </legend>
  135. <div><label> <input type=checkbox> Bacon </label></div>
  136. <div><label> <input type=checkbox> Extra de queso </label></div>
  137. <div><label> <input type=checkbox> Champiñones </label></div>
  138. <div><label> <input type=checkbox> Cebolla </label></div>
  139. </fieldset>
  140. <div><label>Tiempo de entrega: <input type=time min="11:00" max="21:00" step="900"></label></div>
  141. <div><label>Instrucciones de entrega: <textarea></textarea></label></div>
  142. </form>
  143. Finalmente, vamos a crear un botón para que el cliente pueda realizar el
  144. pedido.
  145. .. code-block:: html
  146. <form>
  147. <div><label>Nombre del cliente: <input></label></div>
  148. <div><label>Teléfono: <input type=tel></label></div>
  149. <div><label>Correo electrónico: <input type=email></label></div>
  150. <fieldset>
  151. <legend> Tamaño de la Pizza </legend>
  152. <div><label> <input type=radio name=size> Pequeño </label></div>
  153. <div><label> <input type=radio name=size> Mediano </label></div>
  154. <div><label> <input type=radio name=size> Grande </label></div>
  155. </fieldset>
  156. <fieldset>
  157. <legend> Ingredientes extra </legend>
  158. <div><label> <input type=checkbox> Bacon </label></div>
  159. <div><label> <input type=checkbox> Extra de queso </label></div>
  160. <div><label> <input type=checkbox> Champiñones </label></div>
  161. <div><label> <input type=checkbox> Cebolla </label></div>
  162. </fieldset>
  163. <div><label>Tiempo de entrega: <input type=time min="11:00" max="21:00" step="900"></label></div>
  164. <div><label>Instrucciones de entrega: <textarea></textarea></label></div>
  165. <div><button>Realizar pedido</button></div>
  166. </form>
  167. Haciendo que el formulario se comunique con un servidor
  168. -------------------------------------------------------
  169. El envío de formularios se puede realizar de diferentes maneras,
  170. las más comunes son las peticiones HTTP GET o POST. Para especificar
  171. el método que se quiere utilizar se utiliza el atributo ``method`` en
  172. el elemento ``<form>``. Esto, sin embargo, no especifica como se
  173. codifican los datos del formulario; para especificarlo se utiliza el
  174. atributo ``enctype``. También hay que especificar la URL del servicio
  175. que manejará los datos enviados, usando el atributo ``action``.
  176. Hay que darle un nombre a cada control del formulario que se quiere
  177. enviar. Anteriormente especificamos el nombre de los botones de opción.
  178. Los atributos de radio pueden distinguirse unos de otros utilizando
  179. diferentes valores a través del atributo ``value``.
  180. Puede haber controles que tengan el mismo nombre; por ejemplo, podemos
  181. darle a todas las casillas de verificación los mismos nombres, y el
  182. servidor distinguirá que casilla de verificación fue seleccionada
  183. viendo que valores fueros enviados con ese nombre.
  184. Vamos a aplicar estos conocimientos al formulario de la sección anterior...
  185. .. code-block:: html
  186. <form method="post"
  187. enctype="application/x-www-form-urlencoded"
  188. action="https://pizza.example.com/pedido.py">
  189. <div><label>Nombre del cliente: <input name="ncliente"></label></div>
  190. <div><label>Teléfono: <input type=tel name="telcliente"></label></div>
  191. <div><label>Correo electrónico: <input type=email name="emailcliente"></label></div>
  192. <fieldset>
  193. <legend> Tamaño de la Pizza </legend>
  194. <div><label> <input type=radio name=size value="pequeño"> Pequeño </label></div>
  195. <div><label> <input type=radio name=size value="mediano"> Mediano </label></div>
  196. <div><label> <input type=radio name=size value="grande"> Grande </label></div>
  197. </fieldset>
  198. <fieldset>
  199. <legend> Ingredientes extra </legend>
  200. <div><label> <input name="ingrediente" value="bacon" type=checkbox> Bacon </label></div>
  201. <div><label> <input name="ingrediente" value="queso" type=checkbox> Extra de queso </label></div>
  202. <div><label> <input name="ingrediente" value="champiñones" type=checkbox> Champiñones </label></div>
  203. <div><label> <input name="ingrediente" value="cebolla" type=checkbox> Cebolla </label></div>
  204. </fieldset>
  205. <div><label>Tiempo de entrega: <input type=time min="11:00" max="21:00" step="900" name="entrega"></label></div>
  206. <div><label>Instrucciones de entrega: <textarea name="comentarios"></textarea></label></div>
  207. <div><button>Realizar pedido</button></div>
  208. </form>
  209. Validación en el lado del cliente
  210. ---------------------------------
  211. Los formularios pueden validados por el navegador antes de enviarse.
  212. El servidor también deberá verificar si los datos son válidos (pues
  213. usuarios hostiles puede evitar fácilmente la validación del formulario).
  214. Para evitar que un control del formulario sea enviado sin información se
  215. puede utilizar el atributo ``required``. Añadiendo este atributo a los
  216. controles de nombre del cliente, del tamaño de la pizza y del tiempo de
  217. entrega, hacemos que el navegador avise al usuario cuando este intente
  218. enviar el formulario sin rellenar uno de esos campos.
  219. .. code-block:: html
  220. <form method="post"
  221. enctype="application/x-www-form-urlencoded"
  222. action="https://pizza.example.com/pedido.py">
  223. <div><label>Nombre del cliente: <input name="ncliente" required></label></div>
  224. <div><label>Teléfono: <input type=tel name="telcliente"></label></div>
  225. <div><label>Correo electrónico: <input type=email name="emailcliente"></label></div>
  226. <fieldset>
  227. <legend> Tamaño de la Pizza </legend>
  228. <div><label> <input type=radio name=size required value="pequeño"> Pequeño </label></div>
  229. <div><label> <input type=radio name=size required value="mediano"> Mediano </label></div>
  230. <div><label> <input type=radio name=size required value="grande"> Grande </label></div>
  231. </fieldset>
  232. <fieldset>
  233. <legend> Ingredientes extra </legend>
  234. <div><label> <input name="ingrediente" value="bacon" type=checkbox> Bacon </label></div>
  235. <div><label> <input name="ingrediente" value="queso" type=checkbox> Extra de queso </label></div>
  236. <div><label> <input name="ingrediente" value="champiñones" type=checkbox> Champiñones </label></div>
  237. <div><label> <input name="ingrediente" value="cebolla" type=checkbox> Cebolla </label></div>
  238. </fieldset>
  239. <div><label>Tiempo de entrega: <input type=time min="11:00" max="21:00" step="900" name="entrega" required></label></div>
  240. <div><label>Instrucciones de entrega: <textarea name="comentarios"></textarea></label></div>
  241. <div><button>Realizar pedido</button></div>
  242. </form>
  243. También es posible limitar la longitud de los controles de texto usando el
  244. atributo ``maxlength``. Añadiendo esto al elemento ``<textarea>`` podemos
  245. limitar el texto de los usuarios a 700 caracteres.
  246. .. code-block:: html
  247. <form method="post"
  248. enctype="application/x-www-form-urlencoded"
  249. action="https://pizza.example.com/pedido.py">
  250. <div><label>Nombre del cliente: <input name="ncliente" required></label></div>
  251. <div><label>Teléfono: <input type=tel name="telcliente"></label></div>
  252. <div><label>Correo electrónico: <input type=email name="emailcliente"></label></div>
  253. <fieldset>
  254. <legend> Tamaño de la Pizza </legend>
  255. <div><label> <input type=radio name=size required value="pequeño"> Pequeño </label></div>
  256. <div><label> <input type=radio name=size required value="mediano"> Mediano </label></div>
  257. <div><label> <input type=radio name=size required value="grande"> Grande </label></div>
  258. </fieldset>
  259. <fieldset>
  260. <legend> Ingredientes extra </legend>
  261. <div><label> <input name="ingrediente" value="bacon" type=checkbox> Bacon </label></div>
  262. <div><label> <input name="ingrediente" value="queso" type=checkbox> Extra de queso </label></div>
  263. <div><label> <input name="ingrediente" value="champiñones" type=checkbox> Champiñones </label></div>
  264. <div><label> <input name="ingrediente" value="cebolla" type=checkbox> Cebolla </label></div>
  265. </fieldset>
  266. <div><label>Tiempo de entrega: <input type=time min="11:00" max="21:00" step="900" name="entrega" required></label></div>
  267. <div><label>Instrucciones de entrega: <textarea maxlength=1000 name="comentarios"></textarea></label></div>
  268. <div><button>Realizar pedido</button></div>
  269. </form>
  270. Permitiendo rellenar campos automáticamente en el lado del cliente
  271. ------------------------------------------------------------------
  272. Algunos navegadores tratan de ayudar al usuario rellenando automáticamente
  273. controles de formularios, en vez de que el usuario tenga que volver
  274. a introducir la misma información cada vez. Por ejemplo, un campo
  275. que pregunte por el número de teléfono del usuario puede ser rellenado
  276. automáticamente con el número de teléfono de dicho usuario.
  277. Para ayudar a los navegadores con esta tarea, puede ser usado el atributo
  278. ``autocomplete``. En el caso de este formulario, tenemos tres campos
  279. que pueden aprovechar esta funcionalidad: la información sobre
  280. la persona a la que vamos a entregar la pizza. Vamos a añadir este
  281. atributo...
  282. .. code-block:: html
  283. <form method="post"
  284. enctype="application/x-www-form-urlencoded"
  285. action="https://pizza.example.com/pedido.py">
  286. <div><label>Nombre del cliente: <input name="ncliente" required autocomplete="shipping name"></label></div>
  287. <div><label>Teléfono: <input type=tel name="telcliente" autocomplete="shipping tel"></label></div>
  288. <div><label>Correo electrónico: <input type=email name="emailcliente" autocomplete="shipping email"></label></div>
  289. <fieldset>
  290. <legend> Tamaño de la Pizza </legend>
  291. <div><label> <input type=radio name=size required value="pequeño"> Pequeño </label></div>
  292. <div><label> <input type=radio name=size required value="mediano"> Mediano </label></div>
  293. <div><label> <input type=radio name=size required value="grande"> Grande </label></div>
  294. </fieldset>
  295. <fieldset>
  296. <legend> Ingredientes extra </legend>
  297. <div><label> <input name="ingrediente" value="bacon" type=checkbox> Bacon </label></div>
  298. <div><label> <input name="ingrediente" value="queso" type=checkbox> Extra de queso </label></div>
  299. <div><label> <input name="ingrediente" value="champiñones" type=checkbox> Champiñones </label></div>
  300. <div><label> <input name="ingrediente" value="cebolla" type=checkbox> Cebolla </label></div>
  301. </fieldset>
  302. <div><label>Tiempo de entrega: <input type=time min="11:00" max="21:00" step="900" name="entrega" required></label></div>
  303. <div><label>Instrucciones de entrega: <textarea maxlength=1000 name="comentarios"></textarea></label></div>
  304. <div><button>Realizar pedido</button></div>
  305. </form>
  306. Mejorando la experiencia del usuario en dispositivos móviles
  307. ------------------------------------------------------------
  308. Algunos dispositivos, en particular aquellos con teclados en la pantalla y
  309. aquellos cuya configuración regional tenga muchos caracteres (e.g., el
  310. japonés), pueden suministrar diferentes modalidades de entrada al usuario.
  311. Por ejemplo, cuando se escribe un número de tarjeta de crédito, el usuario
  312. puede querer ver un campo de formulario que por defecto ponga cada letra en
  313. mayúscula.
  314. Usando el atributo ``inputmode`` podemos seleccionar las modalidades de
  315. entrada apropiadas.
  316. .. code-block:: html
  317. <form method="post"
  318. enctype="application/x-www-form-urlencoded"
  319. action="https://pizza.example.com/pedido.py">
  320. <div><label>Nombre del cliente: <input name="ncliente" required autocomplete="shipping name" inputmode="latin-name"></label></div>
  321. <div><label>Teléfono: <input type=tel name="telcliente" autocomplete="shipping tel"></label></div>
  322. <div><label>Correo electrónico: <input type=email name="emailcliente" autocomplete="shipping email"></label></div>
  323. <fieldset>
  324. <legend> Tamaño de la Pizza </legend>
  325. <div><label> <input type=radio name=size required value="pequeño"> Pequeño </label></div>
  326. <div><label> <input type=radio name=size required value="mediano"> Mediano </label></div>
  327. <div><label> <input type=radio name=size required value="grande"> Grande </label></div>
  328. </fieldset>
  329. <fieldset>
  330. <legend> Ingredientes extra </legend>
  331. <div><label> <input name="ingrediente" value="bacon" type=checkbox> Bacon </label></div>
  332. <div><label> <input name="ingrediente" value="queso" type=checkbox> Extra de queso </label></div>
  333. <div><label> <input name="ingrediente" value="champiñones" type=checkbox> Champiñones </label></div>
  334. <div><label> <input name="ingrediente" value="cebolla" type=checkbox> Cebolla </label></div>
  335. </fieldset>
  336. <div><label>Tiempo de entrega: <input type=time min="11:00" max="21:00" step="900" name="entrega" required></label></div>
  337. <div><label>Instrucciones de entrega: <textarea maxlength=1000 name="comentarios" inputmode="latin-prose"></textarea></label></div>
  338. <div><button>Realizar pedido</button></div>
  339. </form>
  340. El elemento ``form``
  341. ====================
  342. Representa un conjunto de elementos relacionados con un formulario,
  343. algunos de los cuales representan valores editables que pueden ser
  344. enviados a un servidor.
  345. Este elemento cuenta con los siguientes atributos:
  346. - ``accept-charset``. Las codificaciones caracteres que deben ser
  347. usadas para el envío.
  348. - ``name``. El nombre del formulario.
  349. - ``autocomplete``. Autocompletado para el formulario. Puede estar
  350. activada (``on``) o desactivada (``off``).
  351. - ``action``. La URL que utilizar para el envío del formulario.
  352. - ``enctype``. Especifica cómo deben ser codificados los datos del
  353. formulario cuando se envían a un servidor. Este atributo solo
  354. tiene efecto si el método utilizado es POST (``method="post"``).
  355. Puede tener estos valores:
  356. - ``novalidate``. Si está presente, hace que el formulario no se
  357. valide durante el envío.
  358. - ``application/x-www-form-urlencoded``. Predeterminado. Todos
  359. los caracteres son codificados antes de ser enviados (los
  360. espacios se convierten al signo «+» y los caracteres especiales
  361. son convertidos usando los valores ASCII HEX).
  362. - ``multipart/form-data``. Ningún carácter es codificado. Este
  363. valor es requerido si estás utilizando formularios que tienen
  364. un control para la subida de archivos.
  365. - ``text/plain``. Los espacios son convertidos al signo «+», pero
  366. ningún caracter especial es codificado.
  367. - ``method``. El método HTTP para el envío del formulario. Puede usarse
  368. con los siguientes valores:
  369. - ``get``. Utiliza el método HTTP GET.
  370. - ``post``. Utiliza el método HTTP POST.
  371. El elemento ``label``
  372. =====================
  373. Representa una leyenda en la interfaz de usuario. Puede ser asociada con
  374. un control del formulario utilizando el atributo ``for``.
  375. .. code-block:: html
  376. <form>
  377. <label for="nombre">Nombre: </label><input name="nombre">
  378. </form>
  379. El elemento ``input``
  380. =====================
  381. Representa un control de un formulario, que permite al usuario editar
  382. los datos.
  383. El atributo ``type`` sirve para distinguir el tipo de elemento del
  384. formulario del que se trata.
  385. +----------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------+-----------------------------------------------+
  386. | Valor | tipo de dato | Tipo de control |
  387. +================+===================================================================================================================================================================+===============================================+
  388. | hidden | Una cadena cualquiera | No aplicable |
  389. +----------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------+-----------------------------------------------+
  390. | text | Texto sin saltos de línea | Campo de texto |
  391. +----------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------+-----------------------------------------------+
  392. | search | Texto sin saltos de línea | Campo de búsqueda |
  393. +----------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------+-----------------------------------------------+
  394. | tel | Texto sin saltos de línea | Campo de texto |
  395. +----------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------+-----------------------------------------------+
  396. | url | Una URL absoluta | Campo de texto |
  397. +----------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------+-----------------------------------------------+
  398. | email | Una dirección de correo electrónico | Campo de texto |
  399. +----------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------+-----------------------------------------------+
  400. | password | Texto sin saltos de línea (información sensible) | Campo de texto que oculta la entrada de datos |
  401. +----------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------+-----------------------------------------------+
  402. | date | Una fecha (año, mes, día) sin zona horaria | Control de fecha |
  403. +----------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------+-----------------------------------------------+
  404. | month | Una fecha que consiste en un mes y un año sin zona horaria | Control de semana |
  405. +----------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------+-----------------------------------------------+
  406. | week | Una fecha que consiste en un número de semana del año sin zona horaria | Control de tiempo |
  407. +----------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------+-----------------------------------------------+
  408. | time | Una hora (hora, minuto, segundos, fracciones de segundo) sin zona horaria | Control de fecha local y de tiempo |
  409. +----------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------+-----------------------------------------------+
  410. | datetime-local | Una fecha y hora local (año, mes, día, hora, minuto, segundo, fracciones de segundo) sin ajustes de zona horaria | Control de texto |
  411. +----------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------+-----------------------------------------------+
  412. | number | Un valor numérico | Control de deslizamiento o campo de texto |
  413. +----------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------+-----------------------------------------------+
  414. | range | Un valor número, con el significado extra de que el valor exacto no es importante | Control de deslizamiento o similar |
  415. +----------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------+-----------------------------------------------+
  416. | color | Un color sRGB con componentes para el rojo, el verde y el azul de 8 bits | Selector de color |
  417. +----------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------+-----------------------------------------------+
  418. | checkbox | Un conjunto de entre cero y más valores en una lista predefinida | Casilla de verificación |
  419. +----------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------+-----------------------------------------------+
  420. | radio | Un valor enumerado | Botón de opción |
  421. +----------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------+-----------------------------------------------+
  422. | file | Cero o más archivos con un tipo MIME y opcionalmente un nombre de archivo | Una leyenda y un botón |
  423. +----------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------+-----------------------------------------------+
  424. | sumbit | Un valor enumerado; debe ser el último valor seleccionado e inicia el envío del formulario | Un botón |
  425. +----------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------+-----------------------------------------------+
  426. | image | Una coordenada, relativa a un tamaño de imagen particular, con el significado extra de que debe ser el último valor seleccionado e inicia el envío del formulario | Una imagen clicable o un botón |
  427. +----------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------+-----------------------------------------------+
  428. | reset | No aplicable | Un botón |
  429. +----------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------+-----------------------------------------------+
  430. | button | No aplicable | Un botón |
  431. +----------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------+-----------------------------------------------+
  432. Cada tipo de ``<input>`` puede tener sus propios atributos. Se pueden
  433. `consultar todos en la documentación oficial <https://www.w3.org/TR/html51/sec-forms.html#the-input-element>`__.
  434. El elemento ``button``
  435. ======================
  436. Representa un botón. El atributo ``type`` controla el comportamiento del botón
  437. cuando es activado. Puede tener estos valores:
  438. - ``submit``. Envía el formulario.
  439. - ``reset``. Vacía el formulario.
  440. - ``button``. No hace nada.
  441. - ``menu``. Muestra un menú.
  442. El atributo ``form`` permite asociar explícitamente un elemento ``<button>``
  443. con un formulario.
  444. El atributo ``name`` representa el nombre del elemento.
  445. El atributo ``disabled`` se utiliza para hacer que el control no sea
  446. interactivo e impedir que su valor sea enviado.
  447. El atributo ``value`` indica el valor del elemento que se utiliza durante el
  448. envío de un formulario.
  449. El elemento ``select``
  450. ======================
  451. Representa un control para seleccionar entre un conjunto de opciones.
  452. Puede contener el atributo ``multiple``, que si está presente, permite
  453. seleccionar entre cero y más opciones de la lista de opciones.
  454. El elemento ``datalist``
  455. ========================
  456. Representa un conjunto de elementos ``<option>`` que representan opciones
  457. predefinidas para otros controles.
  458. .. code-block:: html
  459. <label>
  460. Sex:
  461. <input name=sex list=sexes>
  462. <datalist id=sexes>
  463. <option value="Female">
  464. <option value="Male">
  465. </datalist>
  466. </label>
  467. El elemento ``optgroup``
  468. ========================
  469. Representa un grupo de elementos ``<option>`` bajo una misma etiqueta.
  470. El elemento ``option``
  471. ======================
  472. Representa una opción dentro de un elemento ``<select>`` o parte de una
  473. lista de sugerencias en un elemento ``<datalist>``.
  474. El elemento ``textarea``
  475. ========================
  476. Representa una zona de texto de múltiples líneas. El valor inicial de este
  477. elemento siempre es una cadena vacía.
  478. El elemento ``keygen``
  479. ======================
  480. Representa un control para la generación de un conjunto de claves. Cuando
  481. el formulario es enviado, la clave privada es guardada en un registro
  482. local, y la clave pública es enviada al servidor.
  483. El elemento ``output``
  484. ======================
  485. Representa el resultado de un calculo realizado por la aplicación o el
  486. resultado de una acción realizada por el usuario.
  487. El elemento ``progress``
  488. ========================
  489. Representa el grado de compleción de una tarea.
  490. El elemento ``meter``
  491. =====================
  492. Expresa una medida escalar dentro de un rango conocido o un valor fraccional;
  493. por ejemplo, el uso de disco, la fracción de usuarios que ha seleccionado
  494. una determinada opción.
  495. El elemento ``fieldset``
  496. ========================
  497. Representa un conjunto de controles, opcionalmente agrupados bajo un mismo
  498. nombre.
  499. Puede contener el atributo ``disabled`` para indicar que el control del
  500. formulario está deshabilitado.
  501. El elemento ``legend``
  502. ======================
  503. Representa la leyenda para el resto de contenidos del elemento padre
  504. ``<fieldset>``, si existe.