使用HTML寫一個注冊頁面

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注冊頁面</title>
</head>
<body>
	<!-- 定義表單 -->
	<form action='#' method='post'>
		<table border='1' align='center' width='500'>
			<tr>
				<td><label for='username'>用戶名</label></td>
				<td><input type='text'  name='username' id='username'></td>
			</tr>
			<tr>
				<td><label for='password'>密碼</label></td>
				<td><input type='password'  name='password' id='password'></td>
			</tr>
			<tr>
				<td><label for='email'>Email</label></td>
				<td><input type='email'  name='email' id='email'></td>
			</tr>
			<tr>
				<td><label for='name'>姓名</label></td>
				<td><input type='text'  name='name' id='name'></td>
			</tr>
			
			
			<tr>
				<td><label for='tel'>手機號</label></td>
				<td><input type='text'  name='tel' id='tel'></td>
			</tr>
			<tr>
				<td><label>性別</label></td>
				<td><input type='radio'  name='gender' value='male'>男
					<input type='radio'  name='gender' value='female'>女
				</td>
			</tr>
			<tr>
				<td><label for='birthday'>出生日期</label></td>
				<td><input type='date'  name='birthday' id='birthday'></td>
			</tr>
			<tr>
				<td><label for='checkcode'>驗證碼</label></td>
				<td><input type='text'  name='checkcode' id='checkcode'>
					<img src='image/verify_code.jpg'>
				</td>
			</tr>
			<tr>
				<td colspan='2'  align='center'><input type='submit'  value='注冊'>
			
				</td>
			</tr>
		
		</table>
	
	</form>	
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登錄頁面</title>
    /*總體的樣式*/
    <style>
    	/*盒子樣式*/
        #box{
            width: 350px; //寬
            height: 450px; //高
            border: 1px solid black; //邊框
            border-radius: 10px; //邊框弧度
            font-family: 黑體; //字體
            letter-spacing:8px; //段間距
            word-spacing: 10px; //字間距
            line-height: 40px; //行高
            font-size: 18px; //字大小
            padding: 20px; //內(nèi)邊框
        }
        /*給'注冊'賦予樣式*/
        .register{
            width:280px ; //寬
            height: 50px; //高
            background-color: skyblue; //背景顏色
            border-radius: 10px; //邊框弧度

        }
        /*將所有邊框都改變*/
        *{
            border-radius: 5px; 邊框弧度
        }
        /*使用class選擇器，賦予number寬高和邊框*/
        .number{
            width: 185px; //寬
            height: 27px; //高
            border-width: 1px; //邊框寬度

        }
        /*id選擇器*/
        #two{
            width: 55px; //寬
            border-width: 1px; 邊框寬度
        }
        /*id選擇器*/
        #phone{
            width: 103px; //寬
        }
        /*class 選擇器*/
        .boxs{
            zoom: 75%; //清除浮動
            color: darkgray; //顏色
        }
        /*class選擇器*/
        .box_a{
            width: 50px; //寬
            height: 50px; //高
            background-image: url("../image/04.jpg "); //背景圖片
            background-repeat: no-repeat; // 是否平鋪
            background-size: 50px 25px; //背景尺寸
            position: relative; //定位 相對定位
            left: 310px; //定位后左移
            bottom: 32px; //定位后下移

        }
    </style>
</head>
<body>
<div id="box">
    <h1>請注冊</h1>
<p style="color: darkgray">已有帳號?<a href="https://im.qq.com/index">登錄</a></p>
<form action="" method="post">
    <label for="name">用戶名</label>
    <input type="text" placeholder="請輸入用戶名" id="name" class="number"> <br>
    <label for="phone">手機號</label>
    <select name="" id="two" class="number">
    <optgroup>
        <option style="" class="">+86</option>
    </optgroup>
    </select>
    <input type="text" placeholder="請輸入手機號" id="phone" class="number"> <br>
    <label for="mima">密?碼</label>
    <input type="password" placeholder="請輸入密碼" id="mima" class="number"> <br>
    <label for="mima">驗證碼</label>
    <input type="password" placeholder="請輸入驗證碼" id="is" class="number">
    <div class="box_a"></div>
    <div class="boxs">
        <input type="radio" id="" class="accept">閱讀并接受協(xié)議<br>
    </div>
    <input type="submit" value="注冊" class="register" >

    </form>
</div>


</body>
</html>
在這里插入圖片描述

單數(shù)據(jù)提交是網(wǎng)站中比較常見的用戶交互行為，在html頁面中常見的是注冊表單，提交數(shù)據(jù)前，會檢查表單數(shù)據(jù)的完整性，是否出現(xiàn)漏填、誤填）。如果出現(xiàn)漏填、誤填會提示用戶提示用戶，確保填寫數(shù)據(jù)準確有效。在檢查表單數(shù)據(jù)數(shù)據(jù)一般都是使用php或者JavaScript，今天為大家介紹怎么使用html5新增元素制作用戶注冊頁面并進行檢查的數(shù)據(jù)檢查。

html5代碼如下:

頁面運行結果

分析

1、H5中的fieldset標簽

fieldset標簽用于表單中的元素組合起來，標簽會在相關表單元素周圍繪制邊框，大部分瀏覽器支持這個標簽，本實例中fieldset標簽把表單中所有的元素都包裹起來。

2、input標簽

input標簽用戶信息，type有不同的值，輸入字段有很多形式。比如說文本字段、復選框、按鈕（單選、復選），input不是html5新增的元素，html4也可以支持iuput標簽。只是h5新增加了一些新的input屬性，比如說本例中的required屬性，它告訴用戶輸入字段的值是必需的，不能為空，input的placeholder屬性用于幫助用戶填寫輸入字段的提示。input標簽的list屬性，表示輸入字段的預定義選項的 datalist 。

3、output標簽

output是h5中的新標簽，它定義不同類型的輸出。onforminput是input標簽的屬性，h5支持onforminput屬性，它表示戶輸入時運行的腳本。本例中是用戶輸入時運行“value=range1.value”。

4、datalist標簽

datelist定義選項列表，和input元素配合使用，input 元素的 list 屬性來綁定 datalist標簽，不能單獨使用。本例中的datelist標簽是提示輸入的個人主頁的示例列表。注意的是ie不支持datelist標簽這一點是需要注意的。

5、label標簽

label標簽不會向用戶呈現(xiàn)任何效果，如果在 label 元素內(nèi)點擊文本，會觸發(fā)控件。它不是h5中的新標簽。

關于“html5新增元素制作用戶注冊頁面”先聊到這。每天學習一個知識點，每日寄語”每一個成功者都有一個開始。勇于開始，才能找到成功的路。”如轉載請標注出處。

在線咨詢

上一篇：ASP.NET Web Forms-數(shù)據(jù)綁定
下一篇：新手建站無需購買服務器10分鐘快速部署你的靜態(tài)網(wǎng)頁

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商

使用HTML寫一個注冊頁面

您的項目需求