简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 表单以及简单的后台页面
Blogger Information
Blog 25
fans 1
comment 0
visits 12887
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
表单以及简单的后台页面
xueblog9的进阶之旅
Original
361 people have browsed it

表单以及简单的后台页面

源码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>表单</title>
  9. </head>
  11. <body>
  12.     <h3>用户快速注册</h3>
  13.     <form action="check.php" method="post">
  14.         <div>
  15.             <label for="uname">登陆名:</label>
  16.             <br>
  17.             <input type="text" id="uname" name="username" placeholder="登陆名不能为空">
  18.         </div>
  19.         <div>
  20.             <label for="psw">密码:</label>
  21.             <br>
  22.             <input type="password" id="psw" name="password" placeholder="密码不空">
  23.             <button onclick="showPassword(this,this.from.Password)">看密码1</button>
  24.         </div>
  25.         <div>
  26.             <label for="psw">确认密码:</label>
  27.             <br>
  28.             <input type="password" id="psw" name="password" placeholder="密码不空">
  29.             <button onclick="showPassword(this,this.from.Password)">看密码2</button>
  30.         </div>
  31.         <br>
  32.         <div>
  33.             <label for="3ge">你有几个兄弟姐妹:</label>
  34.             <input type="radio" id="1ge" name="bbb" value="1ge"><label for="1ge">1个</label>
  35.             <input type="radio" id="2ge" name="bbb" value="2ge"><label for="1ge">2个</label>
  36.             <input type="radio" id="3ge" name="bbb" value="3ge" checked><label for="1ge">3个</label>
  37.         </div>
  38.         <br>
  39.         <div>
  40.             <label for="ls">你的兄弟姐妹叫什么名字:</label>
  41.             <input type="checkbox" id="zs" name="name[]" value="zs"><label for="zs">张三</label>
  42.             <input type="checkbox" id="ls" name="name[]" value="ls"><label for="ls">李四</label>
  43.             <input type="checkbox" id="ww" name="name[]" value="ww" checked><label for="ww">王五</label>
  44.         </div>
  45.         <br>
  46.         <div>
  47.             <label for="">兄弟姐妹中最高的学历:</label>
  48.             <select name="edu" id="">
  49.                 <option value="0" selected disabled>--请选择--</option>
  50.                 <option value="1">研究生</option>
  51.                 <option value="2">博士</option>
  52.                 <option value="3">博士后</option>
  53.             </select>
  54.         </div>
  55.         <div>
  56.             <button>提交</button>
  57.         </div>
  58.     </form>
  59.     <br>
  60.     <br>
  61.     <div class="header">
  62.         <h3>简单的小后台</h3>
  63.         <div>
  64.             <b><em>root</em></b>
  65.             <a href="logout.php">退出</a>
  66.         </div>
  67.     </div>
  68.     <ol class="nav">
  69.         <li><a href="../0705/demo1.html" target="area">页面1</a></li>
  70.         <li><a href="../0705/demo2.html" target="area">页面2</a></li>
  71.         <li><a href="../0705/demo3.html" target="area">页面3</a></li>
  72.         <li><a href="../0705/test.mp4" target="area">页面4</a></li>
  73.     </ol>
  74.     <iframe srcdoc="<b><em><a href='javascript:;'>请点击页面菜单</a></em></b>" frameborder="1" name="area" width="500px" height="400px"></iframe>
  75. </body>
  77. </html>

效果图

总结

1. 发送的数据：

1.1 自定义（最灵活）：用户自己输入，input的type为text，文本框/文本域，用户登录注册

1.2 预定义（最安全）：由程序员/开发者已经写好，用户做选择，复选框/单选框/下拉菜单类似选择题

1.3 用户提交的方式：form标签的预置属性action=”xxx.php”,向服务器中xxx.php文件提交，method决定了提交方式

  • 1.3.1 method=”get”时，通过url提交，体现在网页跳转地址中
  • 1.3.2 method=”post”时，直接提交到服务器，可以在载荷中检查到，应该是对接接口的
  • 1.3.3 onsubmit=”return false”: 将表单的默认提交行为禁用

    1.4 <label>标签预置属性for用于绑定input中的id，页面中存在绑定关系，input中的type类型决定了什么类型的表单；

  • 1.4.1 单行文本框input的type类型为”text”,”password”等
  • 1.4.2 单选按钮input的type类型为”radio”
  • 1.4.3 复选框input的type类型为”checkbox”
  • 1.4.4 下拉列表用select标签(变量名name在此)，下拉选项option（变量值value在此）,selected disabled：表示默认首选但不可用，用来提示用户作用

    1.5 <button>标签默认提交，<button>=<button type="submit">

    1.6 多媒体标签<video>,<audio>

  • 1.6.1 controls:显示播放控件，布尔属性
  • 1.6.2 autoplay：自动播放
  • 1.6.3 poster:链接封面图片

    1.7 内联框架标签<iframe>-画中画

  • 1.7.1 <a>标签中target指向与iframe的变量名一直，即完成绑定
  • 1.7.2 a标签链接指定在iframe定义的区域中打开
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！