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
- El meu primer formulari HTML
- Com estructurar un formulari HTML
- Formularis widgets nadius
- CSS amb formularis HTML
- Enviar
y recuperardades del formulari - Validació de dades del formulari
- Contruir formularis widgets personalitzats
- Enviament de formularis amb JavaScript
- 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. |