PPC的C/C++和人工智能学习笔记
每一篇学习笔记,都只是为了更好地掌握和理解

Web前端(3)_HTML(3)练习

用html写一个简单的注册页面,熟悉html标签和属性的使用。

第一页,是否同意注册协议:(1.html)

<!DOCTYPE html>
<html>
 <head>
 <meta http-equiv="content-type" content="text/html;charset=gbk">
 <title>vsppc.com注册协议</title>
 </head>
 <body>
 <div style="width:401px;height:400px;border:1px solid red;">
 <form action="2.html" method="post">
 <textarea rows="22" cols="54" readonly="readonly">
 欢迎加入vsppc.com。
 
请仔细阅读该协议内容,可以选择同意,也不选择不同意。

不得发布违法国家法律法规的内容。
 </textarea> 
 <div style="width:399px;height 50px;border:1px solid green;">
 <input type="submit" value="同意"/>
 <input type="button" value="不同意"/>
 </div>
 </form>
 </div>
 </body>
</html>

第二页,注册页面:(2.html)

<!DOCTYPE html>
<html>
 <head>
 <meta http-equiv="content-type" content="text/html;charset=gbk">
 <title>vsppc.com注册页面</title>
 </head>
 <body>
 <div style="height:48px; background-color:pink;">注册页面</div>
 <div style="background-color:#ddd;">
 <div style="width:20%; height:550px; float:left; background-color:aquamarine;">填写注册内容:</div>
 <div style="width:80%; height:550px; float:left; background-color:rosybrown;"> <!--右边注册内容-->
 <form action="http://www.vsppc.com/reg.php" method="post" enctype="multipart/form-data">
 <p>
 姓名:<input name="name" type="text" /><br/>
 密码:<input name="pass1" type="password" /><br/>
 再输一次密码:<input name="pass2" type="password" /><br/>
 </p>
 <p>
 城市:
 <select name="city">
 <optgroup label="江苏省">
 <option value="1">南京</option>
 <option value="2" selected="selected">无锡</option>
 <option value="3">苏州</option>
 <optgroup label="浙江省">
 <option value="4">杭州</option>
 <option value="5">温州</option>
 </select>
 </p>
 <div> <!-- 性别 -->
 性别:
 <label for="genderid1">男:</label>
 <input id="genderid1" name="gender" type="radio" value='1' checked="checked"/>
 <label for="genderid2">女:</label>
 <input id="genderid2" name="gender" type="radio" value='0'/>
 </div>
 <div> <!--爱好 多选 -->
 <h5>爱好:</h5>
 <ul>
 <li>
 <label for="favor1">御姐:</label>
 <input id="favor1" name="favor" type="checkbox" value="1"/>
 </li>
 <li>
 <label for="favor2">萝莉:</label>
 <input id="favor2" name="favor" type="checkbox" value="2"/>
 </li>
 <li>
 <label for="favor3">凤姐:</label>
 <input id="favor3" name="favor" type="checkbox" value="3"/>
 </li>
 </ul>
 </div>
 <div> <!--自我介绍-->
 <table border="1">
 <thead>
 <tr>
 <th>学习经历</th>
 <th>工作经历</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td><textarea rows="6"></textarea></td>
 <td><textarea rows="6"></textarea></td>
 </tr>
 </tbody>
 </table>
 </div>
 <br/>
 请选择头像文件上传:
 <input name="filehead" type="file"/>
 <br/><br/>
 <div style="width:90px;border:1px solid blue;">
 <input name="submit" type="submit" value="注册"/>
 <input name="button" type="reset" value="重置"/>
 </div>
 </form>
 </div>
 </div>
 </body>
</html>

 

(2017-05-05 www.vsppc.com)

学习笔记未经允许不得转载:PPC的C/C++和人工智能学习笔记 » Web前端(3)_HTML(3)练习

分享到:更多 ()

评论 73

评论前必须登录!