简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 用户注册实例及内联后台首页框架实例
Blogger Information
Blog 36
fans 1
comment 0
visits 26084
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
用户注册实例及内联后台首页框架实例
早晨
Original
1003 people have browsed it

HTML中常用的表单元素

1.input元素定义输入框，根据不同的type属性，可以变化为多种形态。
例如：

  1. <input type="text">  //表示文本输入框
  2. <input type="password">   //表示密码输入框
  3. <input type="radio">      //表示单选输入框
  4. <input type="checkbox">    //表示复选输入框

2.select元素定义下拉列表,option元素定义待选择的选项；列表通常会把首个选项显示为被选选项。能够通过添加select属性来定义预定义选项。
例如：

  1. <select name="gg" id="">
  2.           <option value="0" selected disabled>--请选择--</option>
  3.           <option value="1">本科</option>
  4.           <option value="2">研究生</option>
  5.           <option value="3">博士</option>
  6.           <option value="4">其它</option>
  7.         </select>

3.textarea元素定义多行输入字段（文本域）。
例如：

  1. <textarea name="" id="" cols="30" rows="10"></textarea>

4.button元素定义可点击的按钮。
例如：

  1. <button type="submit">提交</button>

5.iframe内联框架元素属性。
例如：

  1. <iframe src="XXX" frameborder="0" name="XXX"></iframe>

6.video音/视频元素属性。
例如：

  1. <audio src="XXXX" controls autoplay></audio>
  2. <video src="XXXX" controls autoplay> </video>

用户注册表单实例代码

  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>
  10.     <h3>用户注册</h3>
  11.     <form action="xxx.php" method="post">
  12.         <div>
  13.             <label for="name">用户名：</label>
  14.             <input type="text" id="name" name="username" placeholder="请输入用户名" required>
  15.         </div>
  16.         <div>
  17.             <label for="psw">密 码：</label>
  18.             <input type="password" name="password" id="psw" placeholder="请输入密码，不小于8位密码" required>
  19.         </div>
  20.         <div>
  21.             <label for="secret">性别：</label>
  22.             <input type="radio" id="male" value="male" name="sec"><label for="male">男</label>
  23.             <input type="radio" id="female" value="female" name="sec"><label for="female">女</label>
  24.             <input type="radio" id="secret" value="secret" name="sec" checked><label for="secret">保密</label>
  25.         </div>
  26.         <div>
  27.             <label for="ball">兴趣爱好：</label>
  28.             <input type="checkbox" id="ball" name="ah[]" value="ball" checked><label for="ball">打球</label>
  29.             <input type="checkbox" id="reading" name="ah[]" value="reading" ><label for="reading">看书</label>
  30.             <input type="checkbox" id="calligraphy" name="ah[]" value="calligraphy"><label for="calligraphy">书法</label>
  31.         </div>
  32.         <div>
  33.             <label for="">学历：</label>
  34.             <select name="look" id="">
  35.                 <option value="0" selected disabled>----请选择----</option>
  36.                 <option value="1">小学</option>
  37.                 <option value="2">初中</option>
  38.                 <option value="3">高中</option>
  39.                 <option value="4">大学</option>
  40.                 <option value="5">其他</option>
  41.             </select>
  42.         </div>
  43.         <div>
  44.             <button>提交</button>
  45.         </div>
  46.     </form>
  47. </body>
  48. </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=device-width, initial-scale=1.0">
  7.     <title>后台管理内联框架实例</title>
  8. </head>
  9. <body>
  10.     <!-- 顶部导航 -->
  11.     <div>
  12.         XXX网站后台管理系统
  13.     </div>
  14.     <div>
  15.         <em>管理员</em>
  16.         <a href="javascript:;">退出</a>
  17.     </div>
  18.     <!-- 左侧菜单 -->
  19.     <ul>
  20.         <li><a href="#" target="content">基本设置</a></li>
  21.         <li><a href="#" target="content">文章管理</a></li>
  22.         <li><a href="#" target="content">用户管理</a></li>
  23.         <li><a href="#" target="content">广告管理</a></li>
  24.         <li><a href="#" target="content">友情链接</a></li>
  25.     </ul>
  26.     <!-- 右侧页面 -->
  27.     <iframe src="<a href='javascript:;'>请点击左侧菜单</a>" frameborder="1" name="content" width="500" height="500"></iframe>
  28. </body>
  29. </html>

运行效果：

后台管理内联框架运行效果

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！