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

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