HTML基礎實現簡單的註冊和登入頁面

Tsuyuri kanawu發表於2020-12-14
HTML

為了保證格式的規範，使用table表格
註冊頁面

<body >
		<form action="#" method="">
			<h3 align="center">註冊</h3>
			<a id="position"></a>
			<table align="center">
				<tr>
					<td><label for="username">使用者名稱：</label></td>
					<td><input type="rdt" name="uname" id="username" placeholder="請輸入手機號或郵箱" /><br></td>
					<td></td>
				</tr>
				<tr>
					<td><label for="pwd">密&nbsp;&nbsp;&nbsp;碼：</label></td>
					<td><input type="password" name="password" id="pwd" placeholder="請輸入密碼"/></td>
					<td></td>
				</tr>
				<tr>
					<td><label for="pwd">確認密碼：</label></td>
					<td><input type="password" name="password" id="pwd" placeholder="請再次輸入密碼"/></td>
					<td></td>
				</tr>
				<tr>
					<td>家庭住址：</td>
					<td> <select name="pros" id="">
                         <option value="beijing">河南省</option>
                         <option value="henan">江蘇省</option>
                         <option value="zhejiang">浙江省</option>
                         </select></td>
					<td> <select name="citys" id="">
                         <option value="nanyang">南陽市</option>
                         <option value="shangqiu">商丘市</option>
                         <option value="zhengzhou">鄭州市</option>
                         </select></td>
				</tr>
				<tr>
					<td>性&nbsp;&nbsp;&nbsp;別：</td>
					<td><input type="radio" name="sex" value="男" checked/>男
					<input type="radio" name="sex" value="女" >女</td>
				</tr>
				<tr>
					<td><label for="phone">聯絡方式：</label></td>
					<td><input type="rdt" name="phone" id="phone" placeholder="請輸入手機號" ></td>
					<td><input type="submit" value="獲取驗證碼" /></td>
				</tr>
				<tr>
					<td><label for="code">驗證碼：</label></td>
					<td><input type="rdt" name="code" id="code" placeholder="請輸入驗證碼" ></td>
					<td></td>
				</tr>
				<tr>
					<td><input type="submit" value="註冊"></td>
					<td></td>
					<td></td>
				</tr>
			</table>
		</form>

結果圖
在這裡插入圖片描述登入頁面

<form action="#">
			<h3 align="center">登入</h3>
			<table align="center">
				<tr>
					<td><label for="username">使用者名稱：</label></td>
					<td><input type="rdt" name="uname" id="username" placeholder="請輸入手機號或郵箱" /><br></td>
				</tr>
				<tr>
					<td><label for="pwd">密&nbsp;&nbsp;&nbsp;碼：</label></td>
					<td><input type="password" name="password" id="pwd" placeholder="請輸入密碼"/></td>
				</tr>
				<tr>
					<td><input type="submit" value="登入"></td>
					<td><input type="submit" value="註冊"></td>
				</tr>
			</table>
			<a href="./作業1.html#position">註冊</a>
		</form>

結果圖
在這裡插入圖片描述

相關文章