English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. 현재 위치
  2. 홈페이지
  3. 경험 노트
  4. 본문

H5사용자 등록 양식 페이지 등록 모달!

이 예제에서는 H5양식��별 새로운 기능, 사용자 등록 양식 페이지에 대해 참고하시오, 구체적인 내용은 다음과 같습니다

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">}}
 <title>사용자 등록 양식 페이지</title>
 <style>
  #form_content{
   width:600px;
   margin:0 auto;
   position:absolute;
   left:400px;
  }
  #form_content .dc{
   width:600px;
   margin-top:10px;
   overflow:hidden;
  }
  #form_content .dc h3{
   text-align:center;
  }
  #form_content b{
   display:inline-block;
   height:40px;
   line-height: 40px;
   margin-left:20px;
  }
  #form_content input{
   display:inline-block;
   height:34px;
   width:200px;
   border-radius:2px;
   margin-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;
   margin-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>
 <!--input 태그의 새로운 기능-->
 <form>
  <!--email 속성-->
  이메일 유형<input type="email"/><br/>
  <!--tel 속성-->
  전화 유형<input type="tel"/><br/>
  <!--number 속성-->
  숫자 유형<input type="number"/><br/>
  <!--date 속성-->
  날짜 유형<input type="date"/><br/>
  <!--month 속성-->
  월자 유형<input type="month"/><br/>
  <!--week 속성-->
  주기 유형<input type="week"/><br/>
  <!--range 속성-->
  숫자 범위<input type="range" min="18" max="60"/><br/>
  <!--search 속성-->
  검색 유형<input type="search"/><br/>
  <!--color 속성-->
  색상 선택기<input type="color"/><br/>
  <!--url 속성-->
  웹 주소 유형<input type="url"/><br/>
  <input type='submit'/>
 </form>
  <hr/>
 <div id="form_content">
  <form action="">
   <div class="dc"><h3>用户注册页面</h3></div>
   <div class="dc"><b>用户昵称</b><input id="user" type="text" autofocus required pattern="^[0-9a-zA-Z]{6,10$"/><p class="pc">请输入用户名</p></div>
   <div class="dc"><b>用户密码</b><input id="pwd" type="password" required pattern="^\w{8,12$"/><p class="pc">请输入密码</p></div>
   <div class="dc"><b>个人邮箱</b><input id="email" type="email" required/><p class="pc">请输入邮箱</p></div>
   <div class="dc"><b>个人主页</b><input id="url" type="url" required/><p class="pc">请输入个人主页(可不填)</p></div>
   <div class="dc"><b>联系电话</b><input id="tel" type="tel" required/><p class="pc">请输入联系电话</p></div>
   <div class="dc"><b>你的年龄</b><input id="age" type="number" min="18" max="60" required/><p class="pc">请输入你的年龄</p></div>
   <div class="dc"><b>出生日期</b><input id="date" type="date" required/><p class="pc">请选择出生日期</p></div>
   <div class="dc"><input id="sub" type="submit" value="提交注册"/></div>
  </form>
 </div>
 <script>
  var uname = document.getElementById('user');
  uname.onfocus = function() {
   this.nextElementSibling.style.display='block';
   this.nextElementSibling.innerHTML='8-12数字或字母组成';
  }
  uname.onblur=function(){
   if(this.validity.valid){
    this.nextElementSibling.className='pc show_pass';
    this.nextElementSibling.innerHTML='用户名格式正确';
   }
   else if(this.validity.valueMissing) {
    this.nextElementSibling.className = 'pc show_warn';
    this.nextElementSibling.innerHTML = '用户名不能为空';
   }else if(this.validity.patternMismatch){
    this.nextElementSibling.className='pc show_warn';
    this.nextElementSibling.innerHTML='用户名格式非法';
   }
  }
  var upwd=document.getElementById('pwd');
  upwd.onfocus=function(){
   this.nextElementSibling.style.display='block';
   this.nextElementSibling.innerHTML='6-12位数字/字母/英文符号组成';
  }
  upwd.onblur=function(){
   if(this.validity.valid){
    this.nextElementSibling.className='pc show_pass';
    this.nextElementSibling.innerHTML='密码格式正确';
   else if(this.validity.valueMissing)
    this.nextElementSibling.className='pc show_warn';
    this.nextElementSibling.innerHTML='用户密码不能为空';
   }else if(this.validity.patternMismatch){
    this.nextElementSibling.className='pc show_warn';
    this.nextElementSibling.innerHTML='密码格式非法';
   }
  }
  var e_mail=document.getElementById('email');
  e_mail.onfocus=function(){
   this.nextElementSibling.style.display='block';
   this.nextElementSibling.innerHTML='请输入你的常用邮箱';
  }
  e_mail.onblur=function(){
   if(this.validity.valid) {
    this.nextElementSibling.className = 'pc show_pass';
    this.nextElementSibling.innerHTML = '邮箱格式正确';
   else if(this.validity.valueMissing)
    this.nextElementSibling.className='pc show_warn';
    this.nextElementSibling.innerHTML='邮箱不能为空';
   }else if(this.validity.typeMismatch)
    this.nextElementSibling.className='pc show_warn';
    this.nextElementSibling.innerHTML='邮箱格式有误';
   }
  }
  var url=document.getElementById('url');
  url.onfocus=function(){
   this.nextElementSibling.style.display='block';
   this.nextElementSibling.innerHTML='请输入你的个人主页(选填)';
  }
  url.onblur=function(){
   if(this.validity.valid) {
    this.nextElementSibling.className = 'pc show_pass';
    this.nextElementSibling.innerHTML = '网址格式正确';
   }else if(this.validity.typeMismatch)
    this.nextElementSibling.className='pc show_warn';
    this.nextElementSibling.innerHTML='网址格式非法';
   }
  }
  var uphone=document.getElementById('tel');
  uphone.onfocus=function(){
   this.nextElementSibling.style.display='block';
   this.nextElementSibling.innerHTML='请输入你的联系电话';
  }
  uphone.onblur=function(){
   if(this.validity.valid){
    this.nextElementSibling.className='pc show_pass';
    this.nextElementSibling.innerHTML='电话号码格式正确';
   else if(this.validity.valueMissing)
    this.nextElementSibling.className='pc show_warn';
    this.nextElementSibling.innerHTML='电话号码不能外空';
   }else if(this.validity.typeMismatch)
    this.nextElementSibling.className='pc show_warn';
    this.nextElementSibling.innerHTML='电话号码格式非法';
   }
  }
  var uage=document.getElementById('age');
  uage.onfocus=function(){
   this.nextElementSibling.style.diplay='block';
   this.nextElementSibling.innerHTML='请输入你的年龄';
  }
  uage.onblur=function(){
   if(this.validity.valid){
    this.nextElementSibling.className='pc show_pass';
    this.nextElementSibling.innerHTML='你的年龄符合注册要求';
   }else if(this.validity.rangeOverflow)
    this.nextElementSibling.className='pc show_warn';
    this.nextElementSibling.innerHTML='你的年龄大于注册范围';
   }else if(this.validity.rangeUnderflow)
    this.nextElementSibling.className='pc show_warn';
    this.nextElementSibling.innerHTML='你的年龄小于注册范围'
   else if(this.validity.valueMissing)
    this.nextElementSibling.className='pc show_warn';
    this.nextElementSibling.innerHTML='연령을 입력하지 마세요';
   }
  }
  var udate=document.getElementById('date');
  udate.onfocus=function() {
   this.nextElementSibling.style.display='block';
   this.nextElementSibling.innerHTML='생일 날짜를 입력하세요';
  }
  udate.onblur=function() {
   if (this.validity.valueMissing) {
    this.nextElementSibling.className='pc show_warn';
    this.nextElementSibling.innerHTML='생일 날짜를 입력하지 마세요';
   } else if (this.validity.valid) {
    this.nextElementSibling.className='pc show_pass';
    this.nextElementSibling.innerHTML='생일 날짜가 선택되었습니다';
   }
  }
 </script>
</body>
</html>

이 문서의 모든 내용이 끝났습니다. 여러분의 학습에 도움이 되었기를 바랍니다. 또한, 노래教程에 많은 지지를 부탁드립니다.

언급: 이 문서의 내용은 인터넷에서 가져왔으며, 저작권은 원저자에게 있으며, 인터넷 사용자가 자발적으로 기여하고 업로드한 내용입니다. 이 사이트는 이를 소유하지 않으며, 인공적인 편집 처리를 하지 않았으며, 관련 법적 책임도 부담하지 않습니다. 저작권 문제가 있음을 발견하면 notice#w로 이메일을 보내 주세요.3codebox.com에 대한 신고를 보내면 (#을 @으로 변경하십시오) 관련 증거를 제공하시면, 해당 내용이 명확히 인정되면 이 사이트는 즉시 해당 부분을 삭제합니다.

기본 튜토리얼
추천해요