ASCII码 ASCII码

html基础：表单元素及多媒体标签学习及实战

发布于：2022-07-06 18:06:29  栏目：技术文档

课后小实例

注册页面

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>用户注册</title>
  8. </head>
  9. <body>
  11.     <form action="check.php" method="post">
  12.         <div>
  13.             <h3>用户注册</h3>
  14.             <label for="emaii">&nbsp;邮&nbsp;&nbsp;&nbsp;&nbsp;箱：&nbsp;</label>
  15.             <input type="email" name="email" placeholder="admin@admin.cn"><br>
  16.             <label for="username">用&nbsp;户&nbsp;&nbsp;名：</label>
  17.             <input type="text" name="user" id="username" placeholder="请输入用户名"><br>
  18.             <label for="pwd">用户密码:</label>
  19.             <input type="password" name="paswd" id="pwd" placeholder="请输入密码"><br>
  20.             <label for="sex3">&nbsp;性&nbsp;&nbsp;&nbsp;&nbsp;别&nbsp;：</label>
  21.             <input type="radio" name="sex" id="sex1" value="nan"><label for="sex1">男</label>
  22.             <input type="radio" name="sex" id="sex2" value="nv"><label for="sex2">女</label>
  23.             <input type="radio" name="sex" id="sex3" checked><label for="sex3">保密</label>
  24.             <br><label for="hobby">&nbsp;爱&nbsp;&nbsp;&nbsp;&nbsp;好：&nbsp;</label>
  25.             <input type="checkbox" name="hobby[]" id="hobby" value="muisc"><label for="hobby">音乐</label>
  26.             <input type="checkbox" name="hobby[]" id="hobby1" value="geme"><label for="hobby1">游戏</label>
  27.             <input type="checkbox" name="hobby[]" id="hobby2" value="pc"><label for="hobby2">电脑</label><br>
  28.              &nbsp;地&nbsp;&nbsp;&nbsp;&nbsp;区：&nbsp;
  29.             <select name="diqu" id="">
  30.                <option value="">---请选择---</option>
  31.                 <option value="北京">北京</option>
  32.                 <option value="上海">上海</option>
  33.                 <option value="江苏">江苏</option>
  34.                 <option value="浙江">浙江</option>
  35.                 <option value="浙江">湖南</option>
  36.                 <option value="浙江">湖北</option>
  37.                 <option value="浙江">河南</option>
  38.             </select>
  39.         </div>
  40.         <div>
  41.             <button style="width: 100px; ">点击注册</button>
  42.             <input style="width: 100px;" type="reset" value="重新填写">
  43.         </div>
  45.     </form>
  46. </body>
  47. </html>

简单的后台管理

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=ui, initial-scale=1.0">
  7.     <title>简单的后台管理</title>
  8. </head>
  9. <body>
  10.     <ul>
  11.         <li><a href="https://j.map.baidu.com/60/J" target="baidu">百度地图</a></li>
  12.         <li><a href="dome.html" target="baidu">dome1</a></li>
  13.         <li><a href="dome2.html" target="baidu">dome2</a></li>
  15.     </ul>
  16.     <iframe width="400px" height="300px" srcdoc="<a style='color:red;'>点击查看</a>" frameborder="1" name="baidu"></iframe>
  17. </body>
  18. </html>

效果图：

相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行