Aquest article demostra l'ús del tipus d'entrada = 'data' en HTML juntament amb la implementació pràctica.
Com utilitzar el tipus d'entrada = 'data' a HTML?
El 'tipus d'entrada='data'' es pot utilitzar en diversos llocs web, com ara llocs web d'assistència sanitària, llocs web de reserves aèries, llocs web de comerç electrònic, llocs de xarxes socials, etc. La sintaxi del selector de dates s'indica a continuació:
< entrada tipus = 'data' id = '' nom = '' >
Els atributs utilitzats en els fragments de codi anteriors són:
- En primer lloc, el ' tipus L'atribut ” permet que el camp d'entrada actuï com a selector de dates des del qual l'usuari pot escollir qualsevol data.
- A continuació, el ' id L'atribut defineix la singularitat d'aquest element. En utilitzar-lo, es pot seleccionar l'element i aplicar la funcionalitat de JavaScript.
- Després d'això, el ' nom ” l'atribut especifica el nom d'aquest element. Proporciona ajuda en el procés de validació per obtenir el valor de l'element seleccionat.
Per millorar el nivell de comprensió, passem per diferents exemples:
Exemple 1: utilitzant type= 'data' en HTML
Al fitxer HTML, creeu un '
< forma >
< etiqueta per = 'joinDate' > Seleccioneu la vostra data d'incorporació: < / etiqueta >
< entrada tipus = 'data' id = 'joinDate' nom = 'joinDate' >
< / forma >
Al fragment de codi anterior:
- En primer lloc, el '
s'utilitza l'etiqueta en la qual es col·loquen dades simulades i el valor de ' joinDate ' s'ha proporcionat a la ' per ” atribut. - A continuació, el '
L'etiqueta s'utilitza amb un valor de data 'al seu' tipus ” atribut. - Després d'això, establiu el valor de ' joinDate ' fins al ' id ” atribut. A més, establiu el valor de ' nom ” atribut segons la necessitat.
Després de l'execució del fragment de codi anterior, la pàgina web apareix així:
El gif anterior il·lustra que el selector de dates s'ha creat mitjançant el tipus d'entrada = 'data' en HTML.
Exemple 2: Recuperació de la data mitjançant JavaScript
Per recuperar les dades, els usuaris poden utilitzar les funcionalitats de JavaScript. Per a una millor comprensió, visiteu el bloc de codi següent:
< botó fent clic = 'RecuperarData()' >Obtenir data< / botó >< guió tipus = 'text/javascript' >
funció retrieveDate ( ) {
era dataInput = document.getElementById ( 'joinDate' ) ;
var selectedDate = dataInput. valor ;
alerta ( 'Data seleccionada:' + data seleccionada ) ;
}
< / guió >
Al fragment de codi anterior:
- En primer lloc, el ' retrieveDate() La funció ' es crea dins del '