HTML forms guide

Aquesta guia és una sèrie d'articles que l'ajudaran a dominar els formularis HTML. Els formularis HTML són una eina molt potent per interactuar amb els usuaris; No obstant això, per raons històriques i tècniques, no sempre és obvi com usar-los al seu màxim potencial. En aquesta guia, anem a cobrir tots els aspectes dels formularis HTML, des de donar estil a l'estructura, des de la manipulació de dades amb components personalitzats. Aprendràs a gaudir de la gran potència que ofereixen!

Articles

  1. El meu primer formulari HTML
  2. Com estructurar un formulari HTML
  3. Formularis widgets nadius
  4. CSS amb formularis HTML
    1. Estil en formularis HTML
    2. Estils avançats en formularis HTML
    3. Taula de propietats compatibles per formularis widgets
  5. Enviar y recuperar dades del formulari
  6. Validació de dades del formulari
  7. Contruir formularis widgets personalitzats
  8. Enviament de formularis amb JavaScript
    1. Utilitzant l'objecte FormData
  9. Formularis HTML en navegadors antics

Documentació HTML

Elements HTML

Element Interfície DOM relacionat Descripció
<button> HTMLButtonElement L'element button representa un botó que es premi.
<datalist> HTMLDataListElement L'element datalist conté un conjunt d'elements <option> que representen les opcions possibles per al valor d'altres elements de formulari.
<fieldset> HTMLFieldSetElement El fieldset s'utilitza per agrupar diversos elements formulari dins d'un formulari.
<form> HTMLFormElement L'element form representa una secció del document que conté l'element interactiu que permet a un usuari enviar informació a un servidor web.
<input> HTMLInputElement L'element input s'utilitza per crear controls interactius per als formularis.
<keygen> HTMLKeygenElement L'element keygen existeix per facilitar la generació de material clau, i l'enviament de la clau pública com a part d'un formulari HTML
<label> HTMLLabelElement L'element label representa un títol d'un article en una interfície d'usuari
<legend> HTMLLegendElement L'element legend representa una llegenda per al contingut del seu pare <fieldset>.
<meter> HTMLMeterElement L'element metre representa o bé un valor escalar dins d'un rang conegut o un valor fraccionari.
<optgroup> HTMLOptGroupElement l'element optgroup crea un grup d'opcions dins d'un element <select> element.
<option> HTMLOptionElement l'element HTML option  s'utilitza per crear un control que representa un element dins d'un element <select>, o un <optgroup> o un <datalist>.
<output> HTMLOutputElement L'element output representa el resultat d'un càlcul.
<progress> HTMLProgressElement L'element progress s'utilitza per veure el progrés de la finalització d'una tasca.
<select> HTMLSelectElement L'element select representa un control que presenta un menú d'opcions.
<textarea> HTMLTextAreaElement L'element textarea representa un control d'edició de text pla multilínia.

Nota: Tots els elements formulari, com tots els elements d'HTML, suportan la interfície DOM HTMLElement.

Atributs HTML

Nom Atribut Elements Descripció
accept <form>, <input> Llista de tipus que accepta el servidor, normalment un tipus de fitxer.
accept-charset <form> Llista de jocs de caràcters suportats.
action <form> L'URI d'un programa que processa la informació presentada a través del formulari.
autocomplete <form>, <input> Indica si els controls d'aquest formulari poden tenir per defecte els seus valors emplenats automàticament pel navegador.
autofocus <button>, <input>, <keygen>, <select>, <textarea> L'element ha de tenir el focus automàticament després de carregar la pàgina.
challenge <keygen> Una cadena proposada que es presenta juntament amb la clau pública.
checked <input> Indica si l'element s'ha de comprovar en carregar la pàgina.
cols <textarea> Defineix el nombre de columnes en una àrea de text.
data <object> Especifica l'adreça URL del recurs.
dirname <input>, <textarea>  
disabled <button>, <fieldset>, <input>, <keygen>, <optgroup>, <option>, <select>, <textarea> Indica si l'usuari pot interactuar amb l'element.
enctype <form> Defineix el tipus de contingut de les dades del formulari quan el mètode és POST.
for <label>, <output> Descriu els elements que pertanyen a aquest.
form <button>, <fieldset>, <input>, <keygen>, <label>, <meter>, <object>, <output>, <progress>, <select>, <textarea> Indica el formulari que és el propietari de l'element.
high <meter> Indica el límit inferior del rang superior.
keytype <keygen> Especifica el tipus de clau generada.
list <input> Identifica una llista d'opcions predefinides per suggerir a l'usuari.
low <meter> Indica el límit superior del rang inferior.
max <input>, <meter>, <progress> Indica el valor màxim permès.
maxlength <input>, <textarea> Defineix el nombre màxim de caràcters permesos en l'element.
method <form> Defineix quin mètode HTTP a utilitzar al enviar el formulari. Pot ser GET (per defecte) o POST.
min <input>, <meter> Indica el valor mínim permès.
multiple <input>, <select> Indica si diversos valors es poden introduir en una entrada del correu electrònic o tipus  arxiu.
name <button>, <form>, <fieldset>, <input>, <keygen>, <output>, <select>, <textarea> Nom de l'element. Per exemple el usat en el servidor per identificar els camps de formulari enviat.
novalidate <form> Aquest atribut indica que el formulari no ha de ser validat quan sigui enviat.
optimum <meter> Indica el valor numèric òptim.
pattern <input> Defineix una expressió regular que es validarà el valor de l'element en contra.
placeholder <input>, <textarea> Proporciona un suggeriment a l'usuari de què es poden introduir en el camp.
readonly <input>, <textarea> Indica si l'element pot ser editat o no.
required <input>, <select>, <textarea> Indica si es requereix aquest element per omplir o no.
rows <textarea> Defineix el nombre de files en una àrea de text.
selected <option> Defineix un valor que serà seleccionat en carregar la pàgina.
size <input>, <select> Defineix l'amplada de l'element (en píxels). Si el atribut type de l'element és text o contrasenya, llavors és el nombre de caràcters.
src <img> La URL del contingut integrable.
step <input>  
target <form>  
type <button>, <input> Defineix el tipus d'element.
usemap <img>  
value <button>, <option>, <input>, <meter>, <progress> Defineix un valor predeterminat que es mostrarà en l'element en la càrrega de la pàgina.
wrap <textarea> Indica si el text ha de ser embolicat o no.

Referència normativa