Home-theater-designers
La recopilació de dades d’un usuari del lloc web es pot fer de diverses maneres. Els formularis dels llocs web poden tenir una funció senzilla, com ara subscriure un usuari a un butlletí informatiu o un propòsit més complex, com actuar com a formulari de sol·licitud de feina.
No obstant això, una cosa que tenen en comú totes aquestes formes senzilles o complexes és l'HTML i, més concretament, l'HTML etiqueta.
Utilitzant l’etiqueta de formulari
El tag és un element HTML que s'utilitza com a contenidor per incloure altres elements que es poden considerar com a blocs de construcció de formularis. Alguns d'aquests elements fonamentals inclouen el etiqueta, el i l'etiqueta etiqueta.
El tag té un atribut important que contribueix a la seva funcionalitat. Aquest atribut s’anomena acció i s’utilitza per identificar el fitxer al qual es passaran les dades introduïdes al formulari.
Utilitzant l’exemple d’etiqueta
L'exemple anterior mostra com utilitzar l'etiqueta de formulari als vostres projectes. Un dels principals menjars per emportar és que si obriu una etiqueta de formulari, recordeu de tancar-la. Això crearà una estructura de formulari i també garantirà que les dades introduïdes al formulari es processin correctament.
Ús de l’etiqueta
El L'etiqueta s'utilitza per descriure les dades de cada camp d'entrada en un formulari. Aquesta etiqueta té un per atribut, que s’utilitza per millorar la funcionalitat d’un formulari.
Relacionat: Els millors editors HTML gratuïts en línia per provar el vostre codi
Si l'identificador assignat al camp d'entrada corresponent coincideix amb per valor a , el camp d’entrada es ressaltarà automàticament quan feu clic a l’etiqueta.
Utilitzant l’exemple d’etiqueta
First Name:
A l'exemple anterior podeu veure que el fitxer per a l'atribut se li assigna el valor fname . Per tant, si creeu un camp d'entrada amb el fitxer fname id, aquest camp es ressaltarà cada cop que feu clic a Primer Nom etiqueta.
Ús de l’etiqueta
En la seva forma més bàsica, el etiqueta es pot veure com un quadre de text. El L'etiqueta captura dades de l'usuari i una de les seves característiques més crucials és la tipus atribut. El tipus atribut indica el tipus de dades que pot recopilar aquest quadre de text.
Relacionat: Com es crea un formulari apilat a CSS
Hi ha diversos valors diferents que podeu assignar a tipus atribut, però alguns dels més populars són els següents.
- Text
- Número
- Correu electrònic
- Imatge
- Data
- Casella de selecció
- ràdio
- Contrasenya
Utilitzant l'etiqueta Exemple
First Name:
El L'etiqueta del codi anterior té tres atributs diferents que tenen una funció única. El tipus a l'atribut se li assigna un valor de text que significa que el quadre de text només accepta caràcters.
El identificador atribut és un identificador únic per al quadre de text i és important perquè proporciona accés a aquest element des d’un fitxer CSS. El nom l'atribut també és un identificador únic; tanmateix, l'atribut name s'utilitza per interactuar amb un element del costat del servidor del desenvolupament.
El identificador i nom als atributs se’ls assigna normalment el mateix valor que un proporciona accés a un element des del costat del client i l’altre des del servidor.
Mitjançant l’element de la casella de selecció
L'element de la casella de selecció és molt únic en comparació amb els altres elements que podeu utilitzar amb etiqueta. Permet a l'usuari seleccionar una o més opcions d'una llista d'eleccions relacionades. Les caselles de selecció s’identifiquen fàcilment perquè estan representades per petites caselles quadrades que contenen una comprovació quan se seleccionen.
Mitjançant l'exemple de l'element de la casella de selecció
Programming Languages:
Java
JavaScript
Python
A l'exemple anterior, cadascun dels elements de la casella de selecció té un atribut de valor, i això és important perquè ajuda a distingir cada opció de casella de selecció de la col·lecció. Per tant, si un usuari selecciona 'Java' entre les opcions anteriors, les dades ho reflectiran.
Utilitzant l’etiqueta i els elements radiofònics
El tag i els elements radiofònics són similars en el sentit que només permeten a l'usuari seleccionar un valor únic alhora; per tant, es pot dir que tenen la mateixa funció. Tanmateix, tenen una aparença molt diferent.
L’element de ràdio és més proper a l’element de la casella de selecció, però, amb l’element de ràdio teniu cercles en lloc de quadrats.
El l'etiqueta produeix el que és essencialment un quadre desplegable, que permet a l'usuari seleccionar un valor únic.
Utilitzant l'exemple d'etiqueta i d'element de ràdio
Sex:
Male
Female
Other
Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer
Ús de l’element Data
L'element data produeix un petit quadre de text que genera un calendari quan es fa clic. Utilitzant data com a tipus d’entrada als vostres formularis, es garanteix que l’usuari no pugui introduir una data incorrecta, cosa que pot conduir a la recopilació de dades errònies.
Utilitzant l'exemple de l'element de data
Utilitzant l’element de correu electrònic i contrasenya
Quan un desenvolupador assigna els valors de correu electrònic o de contrasenya a l'atribut type d'un fitxer , produeixen un quadre de text idèntic. No obstant això, quan comenceu a utilitzar aquestes caixes, les diferències es manifesten.
L'element de correu electrònic controla les dades introduïdes al quadre de text i garanteix que cada enviament compleixi els requisits estàndard d'una adreça de correu electrònic; el que significa tenir una part local, seguit del símbol @ i acabar amb un domini.
Utilitzant l'exemple de l'element de correu electrònic
A l'exemple anterior se us presenta un atribut nou anomenat posseïdor del lloc , i aquest atribut pren un valor de text que es mostra al quadre de text en color gris esvaït. Aquest text s'utilitza per indicar les dades que s'han de col·locar al quadre de text tal com es veu a l'exemple anterior.
L'element de la contrasenya converteix els caràcters en asteriscs mentre es van introduint al quadre de text. Per tant, si la pantalla del vostre ordinador és visible per a altres persones, no veuran la contrasenya que introduïu.
Utilitzant l'exemple de l'element de contrasenya
Utilitzant l’etiqueta de botó
En una forma, normalment hi ha dos tipus de botons diferents. El primer és el botó d'enviament, que envia les dades introduïdes al formulari al valor assignat a l'atribut d'acció (que es troba a la < forma> etiqueta).
Exemple de botó d'enviament
Submit
El segon tipus de botó que s’utilitza normalment en un formulari és un botó de reinici, que neteja les dades d’un formulari perquè l’usuari pugui introduir dades noves. El etiqueta té un tipus atribut, que s’utilitza per indicar la funció del botó. A l'exemple anterior, el fitxer tipus atribut és assignar el valor Presentar , per tant, un botó que té un tipus el valor de restableix s'utilitza per restablir el formulari.
Exemple de botó de reinici
Reset
Creació d’un formulari
Per crear un formulari senzill en HTML, haureu d'incloure tots els elements esmentats anteriorment en un fitxer etiqueta.
Creació d’un exemple de formulari
Forms
First Name:
Last Name:
Date of birth:
Age:
Gender:
Male
Female
Other
Email Address:
Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer
Programming Languages:
Java
JavaScript
Python
Password:
Confirm Password:
Submit
Reset
El codi anterior produirà el següent formulari:
com fer que usb Windows 7 arrencable
Ara podeu crear un formulari senzill en HTML
Aquest article proporciona totes les eines per crear un formulari HTML funcional. Identifica les diferents etiquetes HTML que s’utilitzen en la creació de formularis i explora els diferents atributs que es poden utilitzar amb aquestes etiquetes.
Tanmateix, la majoria de formularis que veieu als llocs web tenen un component addicional; CSS, que s’utilitza per donar vida a la forma i fer-la més estètica.
Compartir Compartir Tweet Correu electrònic Full de trucs de les propietats essencials de CSS3Domina la sintaxi CSS essencial amb el nostre full de trucs de propietats CSS3.
Llegiu a continuació Temes relacionats- Programació
- HTML
- Desenvolupament web
- Tutorials de codificació
Kadeisha Kean és un desenvolupador de programari complet i escriptor tècnic / tecnològic. Té la capacitat diferent de simplificar alguns dels conceptes tecnològics més complexos; la producció de material fàcilment comprensible per a qualsevol novell en tecnologia. L’apassiona escriure, desenvolupar programes interessants i viatjar pel món (a través de documentals).
Més de Kadeisha KeanSubscriu-te al nostre butlletí
Uniu-vos al nostre butlletí per obtenir consells tècnics, ressenyes, llibres electrònics gratuïts i ofertes exclusives.
Feu clic aquí per subscriure-us