JavaScript rencontre certains attributs de formulaire des compétences HTML5_javascript

attribut d'entrée :
espace réservé : la valeur par défaut de la zone de saisie, affichant un texte descriptif ou des informations d'invite à l'utilisateur

complétion automatique : les valeurs sont activées et désactivées. . "on" signifie que lorsque le champ est rempli et soumis puis renvoyé à la page, les informations précédemment saisies seront affichées lors d'une nouvelle saisie. off signifie fermé, y compris la sécurité des données saisies par l'utilisateur. La valeur par défaut est activée
autofocus : définir une entrée pour qu'elle obtienne automatiquement le focus lors du chargement de la page. Notez que la page ne peut définir cet attribut que pour une seule entrée. Définir plusieurs entrées équivaut à aucun paramètre.
Fonctionnalité de liste et liste de données : ajoutez une liste déroulante à une zone de saisie via une liste. . C'est équivalent à la fonction "auto-complete" implémentée dans js, mais elle ne peut pas effectuer de requêtes floues
S'il y a deux valeurs dans la liste de données : "a34343" et "24234", l'utilisateur s'attend à ce que les deux valeurs apparaissent après avoir saisi 3, mais en fait aucune d'entre elles n'apparaîtra.
Cela nécessite une correspondance complète. Par exemple, si vous entrez a, la liste déroulante a34343 apparaîtra, puis si vous entrez 4, la valeur déroulante disparaîtra.

obligatoire : Cet élément doit être renseigné avant la soumission du formulaire, c'est-à-dire qu'il ne peut pas être vide. Non recommandé en raison du message d'invite « Veuillez remplir ce champ », sauf s'il existe un attribut pouvant remplacer le message d'invite.
Modèle : un endroit pour écrire des modèles réguliers dans la balise d'entrée. . Le contrôle d'entrée dont le type est email ou url possède des expressions régulières associées intégrées. Si la valeur ne correspond pas à son expression régulière, le formulaire échouera à la vérification et ne pourra pas être soumis. .
Il n'est pas recommandé de l'utiliser pour les éléments dont le type est email ou url, car les informations d'invite sont corrigées et le modèle régulier est corrigé. . Il vaut mieux réécrire directement en js.

Quelques paramètres de saisie :
rangeUnderflow limite la valeur minimale de la commande numérique Set min, input type="number" min="0" value="20"
. rangeOverflow limite la valeur maximale de la commande numérique Set max, input type="number" max="100" value="20"
. stepMismatch garantit que la valeur d'entrée est conforme aux paramètres min, max et step. Set max min step, input type="number" min="0" max="100" step="10" value="20"<.>

Ce qui suit est une petite fonction utilisée par input=number :

function inputV(inpFields,tips){//input值范围判断。。0-100.正正数
/**
* input值范围判断。。0-100.正正数
* range 范围：使用<input type="number" min="0" max="100"/>
* if(inputV(v3,msgABC.t4)==false){return false;}
* **/
var km=inpFields[0].validity,v3=inpFields.val();
console.log('不是数字：',km.badInput,'超出范围：',km.rangeOverflow,'小于最小值：',km.rangeUnderflow);
if(km.badInput||km.rangeOverflow||km.rangeUnderflow){//a返回true 22返回true -1 返回 true
alert(tips);
return false;
}
if(isNaN(parseInt(v3))){
console.log('NaN 不判断.因为值为空');
return true;
}
else if(!!isNaN(v3)||parseInt(v3)!=parseFloat(v3)){//不是数字!!isNaN('v3')
alert(tips);
return false;
}
return true;
}

propriétés de la liste et liste de données :

<input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.w3school.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

<form action="http://localhost/test.php" method="post" id="register"></form>
url：<input type="url" name="url" form="register" required/><br />
user：<input type="text" name="user" value="" form="register"/><br />
pwd：<input type="password" name="pwd" value="" form="register" /><br />
<select name="year" form="register">
<option value="1970">1970</option> 
<option value="1980">1980</option> 
<option value="1990">1990</option> 
</select>
<input type="submit" value="注册" form="register"/>

Régulier :

E-mail :< ;br />

Adresse :
DATE :

TEMPS : MOIS :
Semaine :
Numéro :

Slider
Recherche :
Couleur :




Formulaire de remplissage automatique

<input type="text" name="auto" value="" list="movie" />
<datalist id="movie">
<option>11111111</option>
<option>243234234</option>
<option>3324234</option>
</datalist>

Sortie du formulaire de sortie

<form action="" method="post" oninput="result.value=parseInt(no1.value*no2.value)">
<input type="number" name="no1" value=""/>
<input type="number" name="no2" value=""/>
<output name="result" ></output>
</form>

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.