html注冊頁面
發布時間: 2020-12-20 06:37:31
① HTML5寫注冊頁面
http://blog.csdn.net/miachen520/article/details/51811253
② JavaScript+html設計一個用戶注冊頁面
var reg=/^[a-zA-Z]\w*$/; var flag1=false,flag2=false,flag3=false; function chang1(obj){ var name=obj.value; if(name.length<3||name.length>8){ //alert("密碼要求3-8位！"); document.getElementById("usName").innerHTML=" 用戶名要求3-8位！"; } else if(!reg.test(name)){ //alert("用戶名由字母開頭，後字母、數字專或下劃線屬!"); document.getElementById("usName").innerHTML=" 用戶名由字母開頭，後字母、數字或下劃線"; flag1=false;
③ 動態html頁面。用html實現注冊和登錄的一些問題。
登錄頁面 login.html
<!doctypehtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>login</title>
<script>
window.addEventListener('load',function(){
varform=document.forms[0];
form.addEventListener('submit',function(e){
e.preventDefault();
varuserName=form.userName.value;
varpwd=form.pwd.value;
varuserInfo=JSON.parse(localStorage.getItem(userName));
if(userInfo&&userInfo.pwd===pwd)
returnalert('登錄成功!');
alert('登錄失敗請先注冊!');
});
document.getElementsByTagName('button')[0].addEventListener('click',function(e){
e.preventDefault();
location.href='regist.html';
});
});
</script>
</head>
<body>
<formaction="#">
<inputname="userName"type="text"placeholder="賬戶名"required>
<inputname="pwd"type="password"placeholder="密碼"required>
<inputtype="submit"value="登錄">
<button>注冊</button>
</form>
</body>
</html>
注冊頁面 regist.html
<!doctypehtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>regist</title>
<script>
window.addEventListener('load',function(){
varform=document.forms[0];
vargetUserInfo=function(){
varvalue={};
for(vari=0,len=form.elements.length;i<len;i++){
varel=form.elements[i];
if(/text|password/.test(el.type)){
value[el.name]=el.value;
}
}
returnvalue;
};
form.addEventListener('submit',function(e){
e.preventDefault();
varuserInfo=getUserInfo();
localStorage.setItem(userInfo.userName,JSON.stringify(userInfo));
alert('注冊成功!');
});
document.getElementsByTagName('button')[0].addEventListener('click',function(e){
e.preventDefault();
varvalue=getUserInfo();
varout=[];
for(varnameinvalue)
out.push(name+'='+value[name]);
alert(out.join(','));
});
});
</script>
</head>
<body>
<formaction="#">
<inputname="userName"type="text"placeholder="賬戶名"required>
<inputname="pwd"type="password"placeholder="密碼"required>
<inputname="confirmPwd"type="password"placeholder="確認密碼"required>
<inputtype="submit"value="注冊">
<button>驗證</button>
</form>
</body>
</html>
④ 用html和css如何做注冊頁面
<div>
<inputtype="text"value=""/>
<inputtype="text"value=""/>
<inputtype="text"value=""/>
<inputtype="text"value=""/>
<p>我已閱讀並接受<span>用戶服務協議</span></p>
<ahref="javascript">注冊</a>
</div>
大致就這樣
⑤ html注冊頁面 提交
你這個不是已經有判斷的js了嗎？ 如果是沒有執行的話，應該是form標簽後面onsubmit="return check(this)"與method="post"中間沒有空格。可以先試試是不是這個原因，不是的話可以繼續問
⑥ html5寫這個注冊頁面怎麼寫啊
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<metaname="viewport"content="width=device-width,initial-scale=1">
<title>Bootstrap4</title>
<linkrel="stylesheet"href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+/dAiS6JXm"crossorigin="anonymous">
<linkrel="stylesheet"href="bootstrap-colorpicker/css/bootstrap-colorpicker.css">
<linkrel="stylesheet"href="bootstrap-datepicker/css/bootstrap-datetimepicker.min.css">
<styletype="text/css">
.main-box{
width:640px;
margin:40pxauto;
}
</style>
</head>
<body>
<divclass="main-box">
<form>
<divclass="form-grouprow">
<labelfor="name"class="col-sm-2col-form-label">用戶名</label>
<divclass="col-sm-10">
<inputtype="text"class="form-control"id="name"placeholder="請輸入用戶名">
</div>
</div>
<divclass="form-grouprow">
<labelfor="pwd"class="col-sm-2col-form-label">密碼</label>
<divclass="col-sm-10">
<inputtype="password"class="form-control"id="pwd"placeholder="請輸入密碼">
</div>
</div>
<divclass="form-grouprow">
<labelfor="pwd2"class="col-sm-2col-form-label">確認密碼</label>
<divclass="col-sm-10">
<inputtype="password"class="form-control"id="pwd2"placeholder="請輸入確認密碼">
</div>
</div>
<divclass="form-grouprow">
<labelfor="area"class="col-sm-2col-form-label">區域</label>
<divclass="col-sm-10">
<selectclass="form-controlform-control-lg"id="area">
<option>四川省</option>
</select>
</div>
</div>
<fieldsetclass="form-group">
<divclass="row">
<legendclass="col-form-labelcol-sm-2pt-0">性別</legend>
<divclass="col-sm-10">
<divclass="form-checkform-check-inline">
<inputclass="form-check-input"type="radio"name="inlineRadioOptions"id="inlineRadio1"value="option1"
checked="true">
<labelclass="form-check-label"for="inlineRadio1">男</label>
</div>
<divclass="form-checkform-check-inline">
<inputclass="form-check-input"type="radio"name="inlineRadioOptions"id="inlineRadio2"value="option2">
<labelclass="form-check-label"for="inlineRadio2">女</label>
</div>
</div>
</div>
</fieldset>
<divclass="form-grouprow">
<labelfor="age"class="col-sm-2col-form-label">年齡</label>
<divclass="col-sm-10">
<inputtype="email"class="form-control"id="age"placeholder="請輸入年齡">
</div>
</div>
<divclass="form-grouprow">
<labelfor="age"class="col-sm-2col-form-label">生日</label>
<divclass="col-sm-10">
<inputsize="16"type="text"value="2012-06-15"readonlyclass="form-controlform_datetime">
</div>
</div>
<divclass="form-grouprow">
<labelfor="phone"class="col-sm-2col-form-label">手機號</label>
<divclass="col-sm-10">
<inputtype="text"class="form-control"id="phone"placeholder="請輸入手機號">
</div>
</div>
<divclass="form-grouprow">
<labelfor="phone"class="col-sm-2col-form-label">頭像</label>
<divclass="col-sm-10">
<inputtype="file"class="form-control-file"id="exampleFormControlFile1">
</div>
</div>
<divclass="form-grouprow">
<labelfor="site"class="col-sm-2col-form-label">主頁</label>
<divclass="col-sm-10">
<inputtype="text"class="form-control"id="site"placeholder="請輸入主頁">
</div>
</div>
<divclass="form-grouprow">
<labelfor="email"class="col-sm-2col-form-label">Email</label>
<divclass="col-sm-10">
<inputtype="email"class="form-control"id="email"placeholder="請輸入Email">
</div>
</div>
<divclass="form-grouprow">
<labelclass="col-sm-2col-form-label">喜歡的顏色</label>
<divclass="col-sm-10">
<inputid="likeColor"type="text"class="form-control"value="#5367ce"/>
</div>
</div>
<divclass="form-grouprow">
<divclass="col-sm-2"></div>
<divclass="col-sm-10">
<divclass="form-check">
<inputclass="form-check-input"type="checkbox"value=""id="defaultCheck1">
<labelclass="form-check-label"for="defaultCheck1">
同意服務條款
</label>
</div>
</div>
</div>
<divclass="form-grouprow">
<divclass="col-sm-10">
<buttontype="submit"class="btnbtn-primary">注冊</button>
<buttontype="submit"class="btn">取消</button>
</div>
</div>
</form>
</div>
<scriptsrc="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X++8abtTE1Pi6jizo"crossorigin="anonymous">
</script>
<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-"crossorigin="anonymous">
</script>
<scriptsrc="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-/nJGzIxFDsf4x0xIM+B07jRM"crossorigin="anonymous">
</script>
<scriptsrc="bootstrap-colorpicker/js/bootstrap-colorpicker.js"></script>
<scriptsrc="bootstrap-datepicker/js/bootstrap-datetimepicker.min.js"></script>
<script>
$('#likeColor').colorpicker();
$(".form_datetime").datetimepicker({
format:'yyyy-mm-dd',
weekStart:1,
todayBtn:1,//今日日期按鈕
autoclose:1,//自動關閉
todayHighlight:1,//高亮今日日期
startView:2,//從日期視圖開始
minView:2,
forceParse:0
});
</script>
</body>
</html>
案例下載
⑦ 怎樣用HTML製作注冊的頁面
可以做出了頁面，但是不能進行交互，，html只是前端語言，，
⑧ html 中的注冊頁面怎麼寫來著，希望給個源碼多謝了。
注冊頁面密碼最好輸入兩次 而且需要的話 注意採集一些必要的信息
⑨ html點擊按鈕彈出注冊頁面
我的思路是：設置注冊的<div>初始時隱藏的，裡面寫好各種表單，當點擊頁面注冊按鈕時，讓初始隱藏的<div>顯示在最上面，
熱點內容