用html来设置一个用户登录网页

这是如何用html标签来写一个网页用户登录的页面,大家可以试着尝试一下多熟悉这些标签




<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="#" method="get">
<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<!-- 写一个交互的id-->
<label for="userEmail">用户名</label>
<span style="color: red;">*</span>
<input type="email" id="userEmail"/>
<span style="color: grey; font-size: 12px;">请使用邮箱的电子邮箱</span>

<br/><br/>
<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<label for="userPassword">&nbsp;&nbsp;密码</label>
<span style="color: red;">*</span>
<!-- 密码框-->
<input type="password" id="userPassword"/>
<span style="color: grey; font-size: 12px;">密码强度:</span>
<span style="color: red;font-size: 12px;">弱</span>
<span style="font-size: 12px;">中</span>
<span style="color: green; font-size: 12px;">强</span>

<br/><br/>
<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<label for="userPassword">&nbsp;&nbsp;确认密码</label>
<span style="color: red">*</span>
<input type="password"id="userPassword1"/>

<br/><br/>
<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<label for="">注册目标</label>
<span style="color: red">*</span>
<!-- 在用input写一个多选的选择器-->
<input type="radio"name="sex"/>会员
<span style="color: gray;font-size:12px">(快速卖出或买进产品)</span>

<br/><br/>
<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<input type="radio" name="sex" />农业经纪人
<span style="color: gray;font-size: 12px;">(为广大会员服务促进农产品交易)</span>

<br/><br/>
<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<input type="radio"name="sex"/>渠道联盟
<span style="color: gray;font-size: 12px">(成为我们的合作伙伴)</span>

<br/><br/>
<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<input type="radio"name="sex"/>信息员
<span style="color: gray;font-size: 12px">(采集发布热点农业信息)</span>

<br/><br/>
<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<span style="color: gray;font-size: 12px">备注:请选择您的主职身份,其他身份可在以后您需要的时候进行扩展</span>

<br/><br/>
<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<label for="username">姓名</label>
<span style="color: red">*</span>
<input type="text"placeholder="姓名" id="username">
<span style="color: gray;font-size: 12px">真实姓名(与身份证件一致)</span>

<br/><br/>
<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<!-- 再定义一个交互的id-->
<label for="userphonenubren">手机</label>
<span style="color: red">*</span>
<!-- 文本框-->
<input type="text"placeholder="手机"id="userphonenubren"/>
<span style="color: gray;font-size: 12px">11位手机号码</span>

<br/><br/>
<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<label for="">所在区域</label>
<span style="color: red">*</span>
<!-- 下拉列表-->
<select name="" >
<option value="">中国</option>
<option value="">美国</option>
<option value="">澳大利亚</option>
<option value="">新加坡</option>
<option value="">马来西亚</option>
</select>
<select name="" >
<option value="">&nbsp;&nbsp;&nbsp;---北&nbsp&nbsp京---</option>
<option value="">&nbsp; ---不知道---</option>
<option value="">&nbsp; ---不知道---</option>
<option value=""> &nbsp;&nbsp;---不知道---</option>
<option value="">&nbsp;&nbsp;---不知道---</option>
</select>
<span style="color: gray;font-size: 12px;">选择您所在的省/市</span>

<br/><br/>
<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<label for="">验证码</label>
<span style="color: red">*</span>
<input type=""id="name4"style="width:50px"/>
<img src="../img/151209173849244246.jpg"/>
<a href="text2.html">看不清楚,换一个</a>

<br/><br/>
<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>

<span>&nbsp;&nbsp;</span>
<input type="button"value="同意以下条款并注册"/>
<!-- 超链接-->
<a href="texe4.html">登入</a>
<span>&nbsp;&nbsp;</span>
<a href="text5.html">找回密码</a>

<br/><br/>
<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<textarea name="" id="" cols="70" rows="10"></textarea>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="#" method="get">
<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<!-- 写一个交互的id-->
<label for="userEmail">用户名</label>
<span style="color: red;">*</span>
<input type="email" id="userEmail"/>
<span style="color: grey; font-size: 12px;">请使用邮箱的电子邮箱</span>

<br/><br/>
<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<label for="userPassword">&nbsp;&nbsp;密码</label>
<span style="color: red;">*</span>
<!-- 密码框-->
<input type="password" id="userPassword"/>
<span style="color: grey; font-size: 12px;">密码强度:</span>
<span style="color: red;font-size: 12px;">弱</span>
<span style="font-size: 12px;">中</span>
<span style="color: green; font-size: 12px;">强</span>

<br/><br/>
<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<label for="userPassword">&nbsp;&nbsp;确认密码</label>
<span style="color: red">*</span>
<input type="password"id="userPassword1"/>

<br/><br/>
<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<label for="">注册目标</label>
<span style="color: red">*</span>
<!-- 在用input写一个多选的选择器-->
<input type="radio"name="sex"/>会员
<span style="color: gray;font-size:12px">(快速卖出或买进产品)</span>

<br/><br/>
<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<input type="radio" name="sex" />农业经纪人
<span style="color: gray;font-size: 12px;">(为广大会员服务促进农产品交易)</span>

<br/><br/>
<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<input type="radio"name="sex"/>渠道联盟
<span style="color: gray;font-size: 12px">(成为我们的合作伙伴)</span>

<br/><br/>
<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<input type="radio"name="sex"/>信息员
<span style="color: gray;font-size: 12px">(采集发布热点农业信息)</span>

<br/><br/>
<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<span style="color: gray;font-size: 12px">备注:请选择您的主职身份,其他身份可在以后您需要的时候进行扩展</span>

<br/><br/>
<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<label for="username">姓名</label>
<span style="color: red">*</span>
<input type="text"placeholder="姓名" id="username">
<span style="color: gray;font-size: 12px">真实姓名(与身份证件一致)</span>

<br/><br/>
<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<!-- 再定义一个交互的id-->
<label for="userphonenubren">手机</label>
<span style="color: red">*</span>
<!-- 文本框-->
<input type="text"placeholder="手机"id="userphonenubren"/>
<span style="color: gray;font-size: 12px">11位手机号码</span>

<br/><br/>
<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<label for="">所在区域</label>
<span style="color: red">*</span>
<!-- 下拉列表-->
<select name="" >
<option value="">中国</option>
<option value="">美国</option>
<option value="">澳大利亚</option>
<option value="">新加坡</option>
<option value="">马来西亚</option>
</select>
<select name="" >
<option value="">&nbsp;&nbsp;&nbsp;---北&nbsp&nbsp京---</option>
<option value="">&nbsp; ---不知道---</option>
<option value="">&nbsp; ---不知道---</option>
<option value=""> &nbsp;&nbsp;---不知道---</option>
<option value="">&nbsp;&nbsp;---不知道---</option>
</select>
<span style="color: gray;font-size: 12px;">选择您所在的省/市</span>

<br/><br/>
<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<label for="">验证码</label>
<span style="color: red">*</span>
<input type=""id="name4"style="width:50px"/>
<img src="../img/151209173849244246.jpg"/>
<a href="text2.html">看不清楚,换一个</a>

<br/><br/>
<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>

<span>&nbsp;&nbsp;</span>
<input type="button"value="同意以下条款并注册"/>
<!-- 超链接-->
<a href="texe4.html">登入</a>
<span>&nbsp;&nbsp;</span>
<a href="text5.html">找回密码</a>

<br/><br/>
<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<textarea name="" id="" cols="70" rows="10"></textarea>
</form>
</body>
</html>
posted @ 2017-05-20 20:21  k欧巴  阅读(7673)  评论(0编辑  收藏  举报