English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Ce exemple partage avec vous H5Nouvelles fonctionnalités de validation des formulaires, comment créer une page de formulaire d'enregistrement utilisateur pour référence, le contenu détaillé suit
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">}}
<title>Page de formulaire d'enregistrement utilisateur</title>
<style>
#form_content{
width:600px;
margin:0 auto;
position:absolute;
left:400px;
}
#form_content .dc{
width:600px;
marge-top:10px;
overflow:hidden;
}
#form_content .dc h3{
text-align:center;
}
#form_content b{
display:inline-block;
height:40px;
line-height: 40px;
marge-left:20px;
}
#form_content input{
display:inline-block;
height:34px;
width:200px;
border-radius:2px;
marge-left:60px;
padding-left:10px;
}
.pc{
width:200px;
height:40px;
float:right;
line-height:40px;
text-align:center;
margin:0 20px 0;
background:#333;
color:#fff;
font-weight:bold;
border-radius:8px;
display:none;
}
input#sub{
display:inline-block;
width:215px;
background:#f0f;
marge-left:144px;
}
.show_pass{
background:limegreen;
display:block;
}
.show_warn{
background:#e4393c;
display:block;
}
#audio_bground{
width:100%;
height:100%;
background:#afa;
position:absolute;
z-index:-10;
}
</style>
</head>
<body>
<!--Nouvelles fonctionnalités du tag input-->
<form>
<!--Attribut email-->
Type d'e-mail<input type="email"/><br/>
<!--Attribut tel-->
Type de téléphone<input type="tel"/><br/>
<!--Attribut number-->
Type numérique<input type="number"/><br/>
<!--Attribut date-->
Type de date<input type="date"/><br/>
<!--Attribut month-->
Type de mois<input type="month"/><br/>
<!--Attribut week-->
Type de cycle<input type="week"/><br/>
<!--Attribut range-->
Portée numérique<input type="range" min="18" max="60"/><br/>
<!--Attribut search-->
Type de recherche<input type="search"/><br/>
<!--Attribut color-->
Sélecteur de couleur<input type="color"/><br/>
<!--Attribut url-->
Type de site Web<input type="url"/><br/>
<input type='submit'/>
</form>
<hr/>
<div id="form_content">
<form action="">
<div class="dc"><h3>Page d'enregistrement utilisateur</h3></div>
<div class="dc"><b>Nom d'utilisateur</b><input id="user" type="text" autofocus required pattern="^[0-9a-zA-Z]{6,10}$"/><p class="pc">Veuillez saisir votre nom d'utilisateur</p></div>
<div class="dc"><b>Mot de passe utilisateur</b><input id="pwd" type="password" required pattern="^\w{8,12}$"/><p class="pc">Veuillez saisir votre mot de passe</p></div>
<div class="dc"><b>Adresse e-mail personnelle</b><input id="email" type="email" required/><p class="pc">Veuillez saisir votre adresse e-mail</p></div>
<div class="dc"><b>Page personnelle</b><input id="url" type="url" required/><p class="pc">Veuillez saisir votre page personnelle (non obligatoire)</p></div>
<div class="dc"><b>Numéro de téléphone</b><input id="tel" type="tel" required/><p class="pc">Veuillez saisir votre numéro de téléphone</p></div>
<div class="dc"><b>Votre âge</b><input id="age" type="number" min="18" max="60" required/><p class="pc">Veuillez saisir votre âge</p></div>
<div class="dc"><b>Date de naissance</b><input id="date" type="date" required/><p class="pc">Veuillez sélectionner la date de naissance</p></div>
<div class="dc"><input id="sub" type="submit" value="Soumettre l'enregistrement"/></div>
</form>
</div>
<script>
var uname = document.getElementById('user');
uname.onfocus = function() {
this.nextElementSibling.style.display='block';
8-12
}
if(this.validity.valid)
this.nextElementSibling.className='pc show_pass';
}
this.nextElementSibling.className='pc show_warn';
}
}
this.nextElementSibling.style.display='block';
6-12//
}
if(this.validity.valid)
this.nextElementSibling.className='pc show_pass';
else if(this.validity.valueMissing)
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.className='pc show_warn';
}
}
this.nextElementSibling.style.display='block';
}
if(this.validity.valid) {
this.nextElementSibling.className = 'pc show_pass';
else if(this.validity.valueMissing)
this.nextElementSibling.className='pc show_warn';
}else if(this.validity.typeMismatch)
this.nextElementSibling.className='pc show_warn';
}
}
this.nextElementSibling.style.display='block';
this.nextElementSibling.innerHTML='请输入你的个人主页(选填)';
}
url.onblur=function(){
if(this.validity.valid) {
this.nextElementSibling.className = 'pc show_pass';
this.nextElementSibling.innerHTML = 'Le format de l'URL est correct';
}else if(this.validity.typeMismatch)
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='Le format de l'URL est incorrect';
}
}
var uphone=document.getElementById('tel');
uphone.onfocus=function(){
this.nextElementSibling.style.display='block';
this.nextElementSibling.innerHTML='Veuillez saisir votre numéro de téléphone de contact';
}
uphone.onblur=function(){
if(this.validity.valid)
this.nextElementSibling.className='pc show_pass';
this.nextElementSibling.innerHTML='Le format du numéro de téléphone est correct';
else if(this.validity.valueMissing)
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='Le numéro de téléphone ne peut pas être vide';
}else if(this.validity.typeMismatch)
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='Le format du numéro de téléphone est incorrect';
}
}
var uage=document.getElementById('age');
uage.onfocus=function(){
this.nextElementSibling.style.display='block';
this.nextElementSibling.innerHTML='Veuillez saisir votre âge';
}
uage.onblur=function(){
if(this.validity.valid)
this.nextElementSibling.className='pc show_pass';
this.nextElementSibling.innerHTML='Ton âge correspond aux exigences d'enregistrement';
}else if(this.validity.rangeOverflow)
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='Ton âge est supérieur à la plage d'enregistrement';
}else if(this.validity.rangeUnderflow)
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='Ton âge est inférieur à la plage d'enregistrement'
else if(this.validity.valueMissing)
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='L'âge ne peut pas être vide';
}
}
var udate=document.getElementById('date');
udate.onfocus=function(){
this.nextElementSibling.style.display='block';
this.nextElementSibling.innerHTML='Veuillez saisir votre date de naissance';
}
udate.onblur=function(){
if(this.validity.valueMissing){
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='La date de naissance ne peut pas être vide';
}else if(this.validity.valid){
this.nextElementSibling.className='pc show_pass';
this.nextElementSibling.innerHTML='La date de naissance a été sélectionnée';
}
}
</script>
</body>
</html>
Voici la totalité du contenu de cet article, j'espère qu'il vous sera utile dans vos études, et j'espère que vous soutiendrez également le tutoriel d'encouragement.
Déclaration : le contenu de cet article est issu du réseau, et les droits d'auteur appartiennent à leurs propriétaires respectifs. Le contenu est contribué et téléversé par les utilisateurs d'Internet de manière spontanée. Ce site ne détient pas de droits de propriété, n'a pas été édité par l'homme, et n'assume aucune responsabilité juridique connexe. Si vous trouvez du contenu suspect de violation de droits d'auteur, vous êtes invité à envoyer un e-mail à : notice#oldtoolbag.com (veuillez remplacer # par @ lors de l'envoi d'un e-mail pour signaler une violation, et fournir des preuves pertinentes. Une fois vérifié, ce site supprimera immédiatement le contenu suspect de violation de droits d'auteur.