Il existe une variété de boîtes de saisie et de boutons dans HTML5. et les attributs.
Boîte d'entrée de texte uniqueLe type est un texte que l'élément d'entrée est une zone de texte unique, qui est la manifestation par défaut de l'élément d'entrée. La boîte d'entrée de texte unique prend en charge les paramètres d'attribut suivant.
Régler la taille de l'élémentL'attribut MaxLength définit le nombre maximal de caractères que les utilisateurs peuvent entrer; l'attribut de taille définit le nombre de caractères que la zone de texte peut afficher.
<Formulaire méthode = post-action = http: // titan: 8080 / form> <p> <étiquette pour = nom> name: <entrée maxlenth = 10 id = name name = name /> </p> </p> p > <Étiquette pour = ville> Ville: <Taille d'entrée = 10 id = nom de la ville = ville /> </p> <p> <étiquette pour = fave> Fruit: <Taille d'entrée = 10 maxlenth = 10 10 id = nom préféré = Fave /> </ label> </p> <Button Type = Soumettre> Soumettre le vote </fruts> </ form>Définissez l'invite d'occupation de la valeur initiale
Les attributs de valeur peuvent spécifier une valeur par défaut pour la zone d'entrée;
<Formulaire méthode = post-action = http: // titan: 8080 / form> <p> <étiquette pour = nom> name: <entrée placeholder = votre nom id = nom name /> </p> <p> <p> <Étiquette pour = ville> Ville: <entrée placeholder = où vous vivez id = City Name = City /> </p> <p> <étiquette pour = fave> fave> <valeur d'entrée = Apple id = fave name = fave / > </ Label> </p> <Button Type = Soumider> Soumettre le vote </fruton> </form>
L'effet dans Chrome est le suivant:
Lors de la réinitialisation du formulaire avec l'élément bouton, le navigateur restaure les invites de positionnement et les valeurs par défaut dans la zone de texte.
Liste de donnéesL'attribut de liste peut être défini sur la valeur d'attribut ID d'un élément de données de données afin que l'utilisateur puisse choisir dans une liste spécifiée par l'élément de données. L'élément de données est nouvellement ajouté dans HTML5 pour fournir un lot de valeur pour aider les utilisateurs à saisir les données requises.
<Formulaire méthode = post-action = http: // titan: 8080 / form> <p> <étiquette pour = nom> name: <entrée placeholder = votre nom id = nom name /> </p> <p> <p> <Étiquette pour = ville> ville: <entrée placeholder = où vous vivez id = nom de la ville = ville /> </p> <p> <étiquette pour = fave> st id = fave name = fave /> </ label> < / p> <Button Type = soumettre> Soumettre le vote </button> </ form> <Datalist id = fructerList> <Option Value = Apples Label = Lovely A Ples /> <Option Value = Oranges> Oranges rafraîchissants </opoption> < Valeur de l'option = Cherries /> </ Datalist>
Chaque option de l'élément Datalist représente une valeur qui peut être sélectionnée par un utilisateur.
Générer des zones de texte qui lisent uniquement ou sont désactivéesL'attribut ReadOnly indique que la zone de texte est uniquement lue, l'attribut désactivé indique qu'il ne peut pas être modifié et il existe des différences de performance d'apparence.
<Formulaire méthode = post-action = http: // titan: 8080 / form> <p> <étiquette pour = name> name: <input value = Adam Disabled id = name name /> </p> <p> <p> <Étiquette pour = ville> Ville: <Valeur d'entrée = Boston ReadOnly ID = City Name = City /> </p> <p> <étiquette pour = Fave> Fruit: <Value Entrée = Apple Id = Fave Name = Fave /> </ Label> </p> <Button Type = Soumider> Soumettre le vote </fruts> </form>
L'effet dans Chrome est le suivant:
Le formulaire avec la propriété désactivée est défini sur Gray. Encadré, mais cela n'affecte pas l'effet de l'apparence et le contenu sera envoyé au serveur.
Boîte d'entrée de mot de passeL'élément d'entrée de l'attribut de type est utilisé pour entrer le mot de passe. L'élément d'entrée de cet attribut prend en charge les attributs suivants:
1) MaxLength: le nombre maximum de caractères que les utilisateurs peuvent entrer dans la zone de mot de passe;
2) Modèle: utilisé pour entrer dans l'expression régulière de la vérification;
3) Placeholder: invite sur le type de données requis;
4) Readonly: Définissez la zone de mot de passe pour lire uniquement;
5) Obligatoire: l'utilisateur doit saisir une valeur, sinon il ne peut pas passer la vérification d'entrée;
6) Taille: définissez sa largeur via le nombre de caractères visibles dans la zone de mot de passe spécifiée;
7) Valeur: Définissez la valeur initiale du mot de passe.
<Formulaire méthode = post-action = http: // titan: 8080 / form> <p> <étiquette pour = name> name: <input value = Adam Disabled id = name name /> </p> <p> <étiquette pour = Mot de passe> Mot de passe: <Type d'entrée = Mot de passe Splayholder = min 6 caractères = nom de mot de passe = Mot de passe / </p> <p> <p> <label = fave> fruit: <valeur d'entrée = pommes id = fave name = fave / </ Label> </p> <Button Type = Soumider> Soumettre le vote </fruts> </form>
Les caractères entrés par l'utilisateur sont affichés comme * dans la zone de mot de passe, mais il convient de noter que lors de la soumission du formulaire, le serveur reçoit un mot de passe en texte clair. Envisagez d'utiliser SSL / HTTPS dans le navigateur et le contenu de communication entre le serveur est chiffré.
BoutonLa propriété Type est définie pour soumettre, réinitialiser et bouton pour générer un bouton comme l'élément de bouton.
1) Soumettre: Générez le bouton pour soumettre des formulaires, des attributs de support: FormAction, FormencType, FormMethod, FormTarget et FormNovateDid.
2) Réinitialiser: générer le bouton de la forme fixe;
3) Bouton: générer des boutons ordinaires sans aucune opération.
Le texte de description du bouton en 3 est spécifié via l'attribut de valeur.
<Formulaire méthode = post-action = http: // titan: 8080 / form> <p> <étiquette pour = name> name: <input value = Adam Disabled id = name name /> </p> <p> <étiquette pour = Mot de passe> Mot de passe: <Type d'entrée = Mot de passe Splayholder = min 6 caractères = nom de mot de passe = Mot de passe / </p> <p> <p> <label = fave> fruit: <valeur d'entrée = pommes id = fave name = fave / </ Label> </p> <Type de saisie = Soumider Value = Soumider Vote /> <Type d'entrée = RESET VALUE = RESYPE = B UTTON VALEUR = MY BUTTON /> </ FORM>
L'effet dans Chrome est le suivant:
La différence entre la génération du bouton et l'utilisation de l'élément de bouton avec l'élément de sortie est que ce dernier peut être utilisé pour afficher le texte contenant du texte. Cependant, comme chaque navigateur a la même méthode de traitement des éléments d'entrée, et certains navigateurs plus anciens (tels que IE6) ne peuvent pas gérer correctement l'élément de bouton, de nombreux sites Web sont plus enclins à utiliser des éléments d'entrée.
Boîte d'entrée restreinte Boîte d'entrée numériqueL'élément d'entrée de l'attribut de type accepte uniquement la valeur. Les attributs de support comprennent:
1) Liste: Spécifiez l'élément de données qui fournit la valeur recommandée dans la zone de texte, et sa valeur est la valeur d'ID de l'élément de données;
2) MIN: Réglez la valeur minimale;
3) Max: définissez la valeur maximale;
4) Readonly: Lire uniquement;
5) Obligatoire: Cela signifie que l'utilisateur doit saisir une valeur;
6) Étape: l'étape pour ajuster la valeur de haut en bas;
7) Valeur: la valeur initiale de l'élément spécifié.
<Formulaire méthode = post-action = http: // titan: 8080 / form> <p> <étiquette pour = name> name: <input value = Adam Disabled id = name name /> </p> <p> <étiquette pour = Mot de passe> Mot de passe: <Type d'entrée = Mot de passe Splayholder = min 6 caractères = nom de mot de passe = Mot de passe / </p> <p> <p> <label = fave> fruit: <valeur d'entrée = pommes id = fave name = fave / > </ Label> </p> <p> <étiquette pour = prix> $ par unité dans votre zone: <Type d'entrée = nombre étape = 1 min = 0 max = 100 valeur = 1 id = nom de prix = prix /> </ Label> </p> <Type d'entrée = Soumider Value = Soumider Vote /> </ Form>
L'effet dans Chrome est le suivant:
Sélecteur de gammeEn utilisant l'élément d'entrée avec l'attribut de type, les utilisateurs ne peuvent l'utiliser que pour sélectionner une valeur numérique dans la portée spécifiée d'abord.
<Formulaire méthode = post-action = http: // titan: 8080 / form> <p> <étiquette pour = name> name: <input value = Adam Disabled id = name name /> </p> <p> <étiquette pour = Mot de passe> Mot de passe: <Type d'entrée = Mot de passe Splayholder = min 6 caractères = nom de mot de passe = Mot de passe / </p> <p> <p> <label = fave> fruit: <valeur d'entrée = pommes id = fave name = fave / </ Label> </p> <p> <étiquette pour = prix> $ par unité dans votre zone: 1 <Type d'entrée = plage étape = 1 min = 0 max = 100 valeur = 1 id = nom de prix = prix / 100 </ label> </p> <Type d'entrée = Soumider Value = Soumider Vote /> </ Form>
L'effet dans Chrome est le suivant:
CocherL'attribut de type est à cocher pour représenter la case à cocher.
1) Vérifié: s'il faut choisir par défaut;
2) Obligatoire: indique que l'utilisateur doit cocher la case;
3) Valeur: Définissez la valeur de données soumise au serveur, par défaut.
<Formulaire méthode = post-action = http: // titan: 8080 / form> <p> <étiquette pour = name> name: <input value = Adam Disabled id = name name /> </p> <p> <étiquette pour = Mot de passe> Mot de passe: <Type d'entrée = Mot de passe Splayholder = min 6 caractères = nom de mot de passe = Mot de passe / </p> <p> <p> <label = fave> fruit: <valeur d'entrée = pommes id = fave name = fave / </ Label> </p> <p> <étiquette pour = Veggie> Êtes-vous végétarien: <Type d'entrée = Checkbox ID = Veggie = Veggie /> Veg Etarian </ Label> </p> <Type d'entrée = Soumider Value = Soumettre le vote /> </ form>
L'effet dans Chrome est le suivant:
Notez que lors de l'utilisation de la boîte à cocher, la case à cocher est envoyée au serveur uniquement lorsque la case est soumise.
Groupe de bouton à un seul choixL'élément d'entrée de l'attribut de type peut être utilisé pour générer un ensemble de boutons de choix unique. Chaque radio représente une option et le même groupe de radio utilise le même nom. Le groupe de bouton de sélection unique convient aux scènes avec moins d'options.
<Formulaire méthode = post-action = http: // titan: 8080 / form> <p> <étiquette pour = name> name: <input value = Adam Disabled id = name name /> </p> <p> <étiquette pour = Mot de passe> Mot de passe: <Type d'entrée = Mot de passe Planholder = min 6 caractères = Nom de mot de passe = Mot de passe /> </p> <p> D> Votez pour votre fruit préféré </gend> <étiquette pour = pommes> <Type d'entrée = Radio Check Value = Apples id = Apples Name = Fave /> Apples </ Label> <Label for = Orange> <INPUT TYPE = Radio Value = Oranges ID = Orange Name = Fave /> Orange </ Label> <Label for = Cherries > <entrée type = Radio Value = Cherries ID = Cherries Name = Fave /> </ Label> </ Fieldset> </p> <Type de saisie = Value = Soumider Vote /> </ Form>
L'effet dans Chrome est le suivant:
Boîte d'entrée de format limitéType d'attribut Email, Tel et URL correspondent respectivement à l'adresse e-mail, au numéro de téléphone et à l'URL.
1) Liste: Spécifiez l'élément de données qui fournit la valeur recommandée dans la zone de texte, et sa valeur est la valeur d'ID de l'élément de données;
2) MaxLength: le nombre maximum de caractères d'entrée;
3) Modèle: spécifiez l'expression régulière pour vérifier l'entrée;
4) Payholder: spécifiez une invite sur le type de données requis;
5) Readonly: Lisez la zone de texte et lisez uniquement;
6) Obligatoire: indique que l'utilisateur doit saisir une valeur;
7) Taille: nombre visible de caractères;
8) Valeur: la valeur initiale de l'élément spécifié.
Le courrier électronique prend également en charge plusieurs attributs, indiquant que plusieurs adresses e-mail peuvent être acceptées.
<Formulaire méthode = post-action = http: // titan: 8080 / form> <p> <étiquette pour = name> name: <input value = Adam Disabled id = name name /> </p> <p> <étiquette pour = Mot de passe> Mot de passe: <Type d'entrée = Mot de passe Planholder = min 6 caractères = Nom de mot de passe = Mot de passe /> </p> <p> <label = email = Email> Email: <entrée Type = Email [email protected] Id = e-mail Nom = Email /> </p> <p> <p> <étiquette pour = tél> tél: <Type d'entrée = Tel Planholder = (xxx) -xxx- xxxx id = tel name = Tel /> </ étiquette> </p> <p> <étiquette pour = URL> Votre page d'accueil: <Type d'entrée = URL ID = nom d'URL = URL /> </p> <Type d'entrée = Soumider Value = Soumider Vote /> </ Form>
L'effet dans Chrome est le suivant:
Boîte d'entrée d'heure et de dateCertains types de date de saisie et d'heure sont ajoutés à HTML5, notamment:
1) DateTime: Obtenez la date et l'heure mondiales, y compris les informations de fuseau horaire;
2) DateTime-local: obtenir la date et l'heure locales, n'inclut pas les informations de fuseau horaire;
3) Date: Obtenez la date locale, sans le délai et les informations de fuseau horaire;
4) Mois: obtenir les informations annuelles et mensuelles, sans le jour, l'heure et les informations de fuseau horaire;
5) Temps: Obtenez le temps;
6) Semaine: Obtenez la semaine en cours.
Les attributs supplémentaires pris en charge par l'élément d'entrée de date et d'heure comprennent:
1) Liste: Spécifiez l'élément de données qui fournit la valeur recommandée dans la zone de texte, et sa valeur est la valeur d'ID de l'élément de données;
2) MIN: Réglez la valeur minimale;
3) Max: définissez la valeur maximale;
4) Readonly: Lire uniquement;
5) Obligatoire: l'utilisateur doit saisir une valeur, sinon il ne peut pas passer la vérification d'entrée;
6) Étape: l'étape pour ajuster la valeur de haut en bas;
7) Valeur: la valeur initiale de l'élément spécifié.
<Formulaire méthode = post-action = http: // titan: 8080 / form> <p> <étiquette pour = name> name: <input value = Adam Disabled id = name name /> </p> <p> <étiquette pour = Mot de passe> Mot de passe: <Type d'entrée = Mot de passe Splayholder = min 6 caractères = nom de mot de passe = Mot de passe / </p> <p> <p> <label = fave> fruit: <valeur d'entrée = pommes id = fave name = fave / > </ label> </p> <p> <étiquette pour = lastBuy> Quand avez-vous acheté: <input type = date id = lastbuy name = lastBuy /> </ label> </p> <entrée type = soumettre Value = Soumettre Vote /> </ Form>
L'effet dans Chrome est le suivant:
À l'heure actuelle, la boîte d'entrée de date et d'heure n'est pas bien prise en charge dans la plupart des navigateurs.
Boîte d'entrée de couleurL'attribut de type est le sélectionneur de couleurs, et la valeur de couleur est représentée dans le format de 7 caractères: en commençant par #, et les trois prochaines avancées, qui représentent les valeurs des trois couleurs primaires du rouge, du vert et du bleu , comme la valeur du rouge, du vert et du bleu, comme les valeurs des trois couleurs primaires du rouge, du vert et du bleu, telles que # FF1234.
<Formulaire méthode = post-action = http: // titan: 8080 / form> <p> <étiquette pour = name> name: <input value = Adam Disabled id = name name /> </p> <p> <étiquette pour = Mot de passe> Mot de passe: <Type d'entrée = Mot de passe Splayholder = min 6 caractères = nom de mot de passe = Mot de passe / </p> <p> <p> <label = fave> fruit: <valeur d'entrée = pommes id = fave name = fave / </ Label> </p> <p> <étiquette pour = couleur> Couleur: <Type d'entrée = Color Name = Color /> </p> </ P. / Form>
L'effet dans Chrome est le suivant:
Notez que la plupart des navigateurs n'ont pas fourni un support spécial pour cet élément d'entrée.
Boîte d'entrée cachéeL'élément d'entrée de type caché peut être utilisé pour masquer un élément de données et l'envoyer au serveur lors de la soumission du formulaire (généralement pour utiliser cette fonction).
<Formulaire méthode = post-action = http: // titan: 8080 / form> <input type = caché name = enregistred value = 1234 / <p> <étiquette pour = name> name: <input value = Adam Disabled id = name name = name /> </ label> </p> <p> <étiquette pour = mot de passe> Mot de passe: <Type de mot de passe = Mot de passe Splayholder = min 6 charals id = mot de passe = mot de passe /> </ lab el> </p> < p> <p> <étiquette pour = fave> fruit: <valeur d'entrée = pommes id = fave name = fave /> </p> </p> <Type d'entrée = soumettre la valeur = soumettre vote /> </ form>Bouton d'image
Le bouton généré par l'élément d'entrée de type d'image s'affiche sous forme d'icône, et le formulaire est soumis après avoir cliqué. Les attributs de support comprennent:
1) ALT: Fournir un texte d'explication des éléments, qui est utile pour les utilisateurs qui ont besoin d'utiliser la technologie d'assistance désactivée;
2) Formaction: même élément bouton;
3) FormeencType: même élément de bouton;
4) FormMethod: même élément de bouton;
5) FormTarget: même élément de bouton;
6) Formationnovated: même élément de bouton;
7) Hauteur: Réglez la hauteur des images en pixels;
8) SRC: spécifiez l'URL de l'image à afficher;
9) Largeur: définissez la largeur de l'image dans le pixel;
<Formulaire méthode = post-action = http: // titan: 8080 / form> <input type = caché name = enregistred value = 1234 / <p> <étiquette pour = name> name: <input value = Adam Disabled id = name name = name /> </ label> </p> <p> <étiquette pour = mot de passe> Mot de passe: <Type de mot de passe = Mot de passe Splayholder = min 6 charals id = mot de passe = mot de passe /> </ lab el> </p> < p> <p> <étiquette pour = fave> fruit: <valeur d'entrée = pommes id = fave name = fave /> </p> </p> <Type d'entrée = image src = accepter.png name = soumed /> < /Formulaire "
Cliquez sur le bouton de l'image pour soumettre le formulaire.
Télécharger le bouton FichierL'élément d'entrée de type fichier est utilisé pour télécharger des fichiers et le fichier peut être téléchargé sur le serveur lors de la soumission du formulaire. Les attributs de support comprennent:
1) Accepter: Spécifiez le type d'acceptation. Définition du type MIME, reportez-vous à RFC 2046 (http://tools.ies.org/html/rfc2046);
2) multiple: définissez cet attribut pour télécharger plusieurs fichiers en même temps;
3) Obligatoire: l'utilisateur doit saisir une valeur.
<Formulaire méthode = post-action = http: // titan: 8080 / formECType = multipart / form-data> <p> <étiquette pour = name> name: <input value = Adam Disabled id = name na me = name /> </ Label> </p> <p> <étiquette pour = mot de passe> Mot de passe: <Type d'entrée = Passway Plants = Min 6 Caracter = Motword Name = Motword /> </p> <p> <lab el for = fave> Fruit: <valeur d'entrée = pommes id = fave name = fave /> </p> <p> <Type d'entrée = nom de fichier = fileData /> </p> <Type d'entrée = soumettre Value = Soumider Vote /> </ form >
Notez que le type de code de formulaire peut être téléchargé lorsque les données multipartinées / formulaires peuvent être téléchargées. L'effet dans Chrome est le suivant:
Liste d'optionsSELET L'élément est utilisé pour générer une liste d'options, qui est plus compacte que l'élément d'entrée de type radiiiiobutton et plus adapté à la situation avec plus d'options. L'attribut pris en charge par cet élément comprend:
1) Nom: le nom de la liste;
2) Désactivé: Désactivez la liste Drop -Down;
3) Formulaire: une ou plusieurs formes appartenant à la zone de texte;
4) Autofocus: la zone de texte obtient automatiquement le foyer après le chargement de la page;
5) Obligatoire: doit être rempli;
6) Taille: Le nombre d'options peut être vu dans la liste de drop -down;
7) multiple: vous pouvez choisir plusieurs options.
Liste de drop singleSélectionner l'élément par défaut est une liste de drop-drop -down à une seule sélection
<Formulaire méthode = post-action = http: // titan: 8080 / formECType = multipart / form-data> <p> <étiquette pour = name> name: <input value = Adam Disabled id = name na me = name /> </ Label> </p> <p> <étiquette pour = mot de passe> Mot de passe: <Type d'entrée = Passway Plants = Min 6 Caracter = Motword Name = Motword /> </p> <p> <lab el for = fave> Fruit préféré: <select id = fave name = fave> <option valu = pommes sélectionnées label = pommes> pommes </ option> <option value = orange = orange> oranges </opoption> <option value = ceriries label = cerises> cerises </ option> <Option Value = Pears Label = Pears> Pears> </ Option> </lect> </p> <Type de saisie = Soumider Value = Soumider Vote /> M>
L'effet dans Chrome est le suivant:
CocherAprès avoir réglé des attributs de taille et plusieurs attributs pour la liste, il devient une case à cocher.
<Formulaire méthode = post-action = http: // titan: 8080 / formECType = multipart / form-data> <p> <étiquette pour = name> name: <input value = Adam Disabled id = name na me = name /> </ Label> </p> <p> <étiquette pour = mot de passe> Mot de passe: <Type d'entrée = Passway Plants = Min 6 Caracter = Motword Name = Motword /> </p> <p> <lab el for = fave> Fruit préféré: <SELECT ID = FAVE NAME = FAVE SIZE = 5 Multiple> <Option Value = Apples Selectd Label = Apples> Apples </ Option> <Option> ES Label = Orange> Orange </ Option> <Option Valu = Cherries Label = Cerises> cerises </ option> <Value = PEARS Label = Pears> Pears </ Option> </lect> </p> <Type de saisie = Soumider Value = Soumider Vote /> </ Form>
Appuyez sur la touche CTRL lorsque vous cliquez sur l'option pour sélectionner plusieurs options. L'effet dans Chrome est le suivant:
Liste avec structureLes éléments OPTGROUP peuvent être utilisés pour établir une certaine structure dans le contenu de l'élément sélectionné.
1) Étiquette: il est utilisé pour fournir un petit titre pour l'ensemble des options;
2) Désactivé: toutes les options du groupe du groupe.
<Formulaire méthode = post-action = http: // titan: 8080 / formECType = multipart / form-data> <p> <étiquette pour = name> name: <input value = Adam Disabled id = name na me = name /> </ Label> </p> <p> <étiquette pour = mot de passe> Mot de passe: <Type d'entrée = Passway Plants = Min 6 Caracter = Motword Name = Motword /> </p> <p> <lab el for = fave> Fruit préféré: <SELECT ID = Fave Name = Fave> <OptGroup Label = Top Choices> <Option Valu = Apples Selected Label = Apples> Apples </ Option> Ion Valu = Oranges Label = Oranges> Orange </opoption> </ptgroup > <optgroup label = autres> <option valu = ceriries label = cerises> cerises </opoption> <option value = Pears Label = Pears> Pears </ Option> Tgroup> </lect> </ Label> </p> < Type d'entrée = Soumettre Value = Soumettre Vote /> </ Form>
L'effet dans Chrome est le suivant:
Les éléments OptGroup ne jouent qu'un rôle organisationnel, et les utilisateurs ne peuvent pas le choisir comme une option.
Boîte d'entrée multi-lignesL'élément TextArea génère des zones de texte multi-lignes et les utilisateurs peuvent y entrer du texte multi-lignes. Y compris les attributs incluent:
1) Autofocus: la zone de texte obtient automatiquement le foyer après le chargement de la page;
2) Cols: largeur visible, entier;
3) Désactivé: Désactivez cette zone de texte;
4) Formulaire: une ou plusieurs formes appartenant à la zone de texte;
5) MaxLength: le nombre maximum de caractères dans la zone de texte;
6) Nom: le nom de la zone de texte;
7) Placeholder: un court rappel de la valeur attendue de la zone de texte;
8) Readonly: la zone de texte est lue uniquement;
9) Obligatoire: La zone de texte est nécessaire;
10) lignes: le nombre de lignes visibles dans la zone de texte, entier;
11) Enveloppez: comment modifier le texte dans la zone de texte, y compris: Soft (par défaut).
<Formulaire méthode = post-action = http: // titan: 8080 / formECType = multipart / form-data> <p> <étiquette pour = name> name: <input value = Adam Disabled id = name na me = name /> </ Label> </p> <p> <étiquette pour = mot de passe> Mot de passe: <Type d'entrée = Passway Plants = Min 6 Caracter = Motword Name = Motword /> </p> <p> <lab el for = fave> Fruit préféré: <SELECT ID = Fave Name = Fave> <OptGroup Label = Top Choices> <Option Valu = Apples Selected Label = Apples> Apples </ Option> Ion Valu = Oranges Label = Oranges> Orange </opoption> </ptgroup > <optgroup label = autres> <option valu = ceriries label = cerises> cerises </opoption> <option value = Pears Label = Pears> Pears </ Option> Tgroup> </lect> </ Label> </p> < p> <textarea cols = 20 lignes = 5 wrap = hard id = story name = story> Dites-nous pourquoi c'est votre faveur </ textarea> </p> <Type d'entrée = soumettre va lue = soumettre vote /> </ form >
L'effet dans Chrome est le suivant:
Zone d'affichage des résultatsL'élément de sortie représente le résultat du calcul. Les attributs de support comprennent:
1) Pour: un ou plusieurs éléments liés au domaine de sortie, séparément dans l'espace moyen;
2) Formulaire: une ou plusieurs formes du champ de saisie;
3) Nom: le seul nom de l'objet (utilisé lorsque le formulaire est soumis).
<Formulaire onSubmit = return false sort = res.value = quant.valueasNumber * price.valueasNumber> <fieldset> <gend> calculatrice de prix </ légende> t type = nombre placeholder = quantité id = quant name = quant /> <Type d'entrée = Numéro de placement = ID de prix = Nom de prix = Price /> = <Outpture pour = quant Nom Name = Res /> </ Form>
Le système temporel de JavaScript est utilisé pour générer une calculatrice simple.
Ce qui précède est tout le contenu de cet article.