简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >表单常用标签的总结、制作简单注册表单、运用iframe内联框架制作简单后台

表单常用标签的总结、制作简单注册表单、运用iframe内联框架制作简单后台

Feel Lonely
Feel Lonely原创
2022年07月06日 16:41:34811浏览

表单标签的定义和总结

创建表单时常用的标签和使用说明

标签 描述
form form 标签用于创建HTML 表单的起始标签
input input标签解析到浏览器有多种表现形式，可通过type属性定义类型
textarea textarea标签用语创建是多行文本输入框
select select标签用来创建下拉列表
option option标签通常用在select标签内，为select标签提供选择项
label lable标签通常用于定义相关联表单标签的说明
button button标签是一个定义按钮的标签

HTML中常见的布尔类型的属性

属性 描述
noshade 用来表示有无阴影，多用在hr标签当中
checker 用来表示是否默认选中，多用于单选按钮（type=”radio”），多选框（type=”checkbox”），单选按钮和多选框的name属性值必须相同，且多选框的name属性值必须为数组形式
selected 用在下拉列表的option标签内，表示是否优先显示
autofocus 多用在input标签内，表示是否自动获取焦点
readonly 表示只读属性，可以获取焦点，数据会传输给后台，适用于可以输入文本框
disabled 是禁用属性，可以使标签无法获取焦点，多用于只需提示功能，不带有其他功能的标签
require 用来表示必须选择、多用于input标签中 
  1.   <style>
  2.     .reg {
  3.       width: 320px;
  4.       border: 1px solid #333;
  5.       margin: 100px auto;
  6.     }
  8.     h3 {
  9.       height: 60px;
  10.       line-height: 60px;
  11.       text-align: center;
  12.       margin: 0 10px;
  13.       border-bottom: 2px solid #999;
  14.     }
  16.     .must, .choose {
  17.       padding-inline-start: 0;
  18.     }
  20.     li {
  21.       list-style: none;
  22.       height: 40px;
  23.       padding: 0 5px;
  24.       margin: 2px 10px;
  25.     }
  27.     .must li label {
  28.       margin: 0 10px;
  29.       line-height: 40px;
  30.     }
  32.     .must li input {
  33.       height: 25px;
  34.       line-height: 25px;
  35.       padding-left: 5px;
  36.       outline: none;
  37.       border: 1px solid #999;
  38.     }
  39.     hr{
  40.       margin: 0 10px;
  41.     }
  42.     .opt{
  43.       text-align: center;
  44.       height: 30px;
  45.       line-height: 30px;
  46.       font-size: 12px;
  47.       color: #ccc;
  48.     }
  49.     .choose li select{
  50.       height: 30px;
  51.       line-height: 30px;
  52.       text-align: center;
  53.       outline: none;
  54.     }
  55.     .choose li textarea{
  56.       resize: none;
  57.       outline: none;
  58.       height: 80px;
  59.     }
  60.     button {
  61.     width: 120px;
  62.     height: 40px;
  63.     margin-left: 120px;
  64. }
  65.   </style>
  66.   <div class="reg">
  67.     <h3>会员注册</h3>
  68.     <form action="">
  69.       <ul class="must">
  70.         <li>
  71.           <label for="user">用 户：</label>
  72.           <input type="text" id="user" name="username" placeholder="请输入用户名称" autofocus />
  73.         </li>
  74.         <li>
  75.           <label for="psw">密 码：</label>
  76.           <input type="password" id="psw" name="password" placeholder="请输入用户密码" />
  77.         </li>
  78.         <li>
  79.           <label for="pswt">确 认：</label>
  80.           <input type="password" id="pswt" name="password" placeholder="请确认用户密码" />
  81.         </li>
  82.       </ul>
  83.       <hr>
  84.       <div class="opt">以下是可选内容~~~可以不填</div>
  85.       <hr>
  86.       <ul class="choose">
  87.         <li>
  88.           <label for="secret">性 别：</label>
  89.           <input type="radio" id="male" name="sex" value="male" checked><label for="male">男</label>
  90.           <input type="radio" id="female" name="sex" value="female"><label for="female">女</label>
  91.           <input type="radio" id="secret" name="sex" value="secret"><label for="secret">保密</label>
  92.         </li>
  93.         <li>
  94.           <label for="">学 历：</label>
  95.           <select name="edu" id="">
  96.             <option value="0" selected disabled> -- 请选择 -- </option>
  97.             <option value="1">高中</option>
  98.             <option value="2">大专</option>
  99.             <option value="3">学生</option>
  100.             <option value="4">硕士</option>
  101.             <option value="5">博士</option>
  102.             <option value="6">其他</option>
  103.           </select>
  104.         </li>
  105.         <li>
  106.           <label for="">爱 好：</label>
  107.           <input type="checkbox" id="male" name="hobby[]" value="film" ><label for="film">电影</label>
  108.           <input type="checkbox" id="music" name="hobby[]" value="music"><label for="music">音乐</label>
  109.           <input type="checkbox" id="motion" name="hobby[]" value="motion" checked><label for="motion">运动</label>
  110.           <input type="checkbox" id="game" name="hobby[]" value="game" checked><label for="game">游戏</label>
  111.         </li>
  112.         <li style="height: 100px;">
  113.           <label for="" style="float: left;">简 介：</label>
  114.           <textarea name="" id="" cols="30" rows="10"></textarea>
  115.         </li>
  116.         <button type="submit">提交</button>
  117.       </ul>
  118.     </form>
  119.   </div>

运用ul>li>a标签和内联框架标签iframe制作的简单后台页面

  1.   <style>
  2.     .main {
  3.       width: 1200px;
  4.       height: 1000px;
  5.       margin: 0 auto;
  6.       border: 2px solid #333;
  7.     }
  8.     a{
  9.       text-decoration: none;
  10.     }
  11.     .main ul,
  12.     .main li {
  13.       padding-inline-start: 0;
  14.     }
  16.     .user {
  17.       width: 1200px;
  18.       height: 100px;
  19.       border-bottom: 2px solid #333;
  20.       background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2020-08-10%2F5f310c1c3109f.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659687209&t=fc856f892533c350f7fea3d85290472e) 0 0;
  21.     }
  23.     .title {
  24.       float: left;
  25.       width: 500px;
  26.       height: 100px;
  27.       line-height: 100px;
  28.       font-size: 35px;
  29.       color: #fff;
  30.       padding-left: 30px;
  31.     }
  33.     .login {
  34.       float: right;
  35.       width: 120px;
  36.       height: 100px;
  37.       line-height: 100px;
  38.     }
  40.     .lumn {
  41.       float: left;
  42.       width: 200px;
  43.       height: 900px;
  44.       overflow: overlay;
  45.     }
  47.     .lumn li {
  48.       width: 180px;
  49.       margin: 10px;
  50.       height: 40px;
  51.       text-align: center;
  52.       line-height: 40px;
  53.       border: 1px solid #333;
  54.       list-style: none;
  55.       background: #1276b1;
  56.     }
  58.     .lumn li a {
  59.       color: #fff;
  60.       font-size: 18px;
  61.       text-decoration: none;
  62.     }
  64.     .cont {
  65.       float: right;
  66.       width: 1000px;
  67.       height: 900px;
  68.       background: green;
  69.     }
  70.     iframe{
  71.       width: 1000px;
  72.       height: 900px;
  73.     }
  74.     iframe img{
  75.       width: 1000px;
  76.       height: 900px;
  77.     }
  78.   </style>
  79.   <div class="main">
  80.     <div class="user">
  81.       <div class="title">
  82.         风景聚焦后台管理
  83.       </div>
  84.       <div class="login">
  85.         <a href="#" style="margin-right: 20px; color: red;">admin</a> <a href="#">退出</a>
  86.       </div>
  87.     </div>
  88.     <div class="lumn">
  89.       <ul>
  90.         <li><a href="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.51tietu.net%2Fpic%2F2019-091407%2Fw1ljfh0pkl0w1ljfh0pkl0.jpg&refer=http%3A%2F%2Fimg9.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659687209&t=9bd3faa5819c4589e2ecd916e1c10b54" target="camera">1 号监控</a></li>
  91.         <li><a href="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.51tietu.net%2Fpic%2F2019-091113%2Favzuenqrczuavzuenqrczu.jpg&refer=http%3A%2F%2Fimg9.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659687209&t=f117961845340c03ce4d644fa33346de" target="camera">2 号监控</a></li>
  92.         <li><a href="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2020-10-12%2F5f83b7c13d0b9.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659687209&t=ba0ac97a3f0089ad3ab693bcd2731dc4" target="camera">3 号监控</a></li>
  93.         <li><a href="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.51tietu.net%2Fpic%2F2019-091407%2F1urclbp0bq51urclbp0bq5.jpg&refer=http%3A%2F%2Fimg9.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659687209&t=34664d5cb8f9d171072976c8a4179c41" target="camera">4 号监控</a></li>
  94.         <li><a href="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg13.51tietu.net%2Fpic%2F20200118%2Fnt4cdvjgs4nnt4cdvjgs4n.jpg&refer=http%3A%2F%2Fimg13.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659687209&t=be30ae3d23d24f27c1d9ad4844adfb5b" target="camera">5 号监控</a></li>
  95.         <li><a href="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2F911%2F0G216122520%2F160G2122521-15.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659687209&t=3fcffd4125d90dea7ded0dde960a07a4" target="camera">6 号监控</a></li>
  96.         <li><a href="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2018-04-12%2F5aced110692f4.jpg%3Fdown&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659687209&t=139e6180fe22e49c52b30fa6594612d7" target="camera">7 号监控</a></li>
  97.         <li><a href="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.51tietu.net%2Fpic%2F2019-091400%2Fozwpb5agcfwozwpb5agcfw.jpg&refer=http%3A%2F%2Fimg9.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659687209&t=64f7d73eeba8248b8adee51584ea6cf8" target="camera">8 号监控</a></li>
  98.         <li><a href="https://pic.rmb.bdstatic.com/ca93cb63d4851e64c1dae1e90388ac25.jpeg" target="camera">9 号监控</a></li>
  99.         <li><a href="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic3.zhimg.com%2Fv2-ff08dfe37b12dfa19719d96a68419f6d_1440w.jpg%3Fsource%3D172ae18b&refer=http%3A%2F%2Fpic3.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659687209&t=3278639ca1d28e50545ef48231b74db7" target="camera">10 号监控</a></li>
  100.         <li><a href="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F5%2F53acdca30d49a.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659687995&t=fccb1a39abe5af11ef45e33f79f78c17" target="camera">11 号监控</a></li>
  101.         <li><a href="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F5%2F53acdcaa11291.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659687995&t=d497414055c9c2ae53f3504c9af2cec5" target="camera">12 号监控</a></li>
  102.         <li><a href="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.51tietu.net%2Fpic%2F2019-091111%2Finhzpuovotiinhzpuovoti.jpg&refer=http%3A%2F%2Fimg9.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659687209&t=d958cb673f8d6af1aa6506a6162bd846" target="camera">13 号监控</a></li>
  103.         <li><a href="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F5%2F53acdca6a0bcc.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659687995&t=40d0c47a197af8596d5f3e60874d14c7" target="camera">14 号监控</a></li>
  104.         <li><a href="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.51tietu.net%2Fpic%2F2019-091004%2Fuwzujvqjoy3uwzujvqjoy3.jpg&refer=http%3A%2F%2Fimg9.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659687209&t=e82bef00be7046b814f95b1259cfdb23" target="camera">15 号监控</a></li>
  105.         <li><a href="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F5%2F53acdcb191dc2.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659687995&t=3f707d6d13c65bec99059bfe9f4ebcfb" target="camera">16 号监控</a></li>
  106.         <li><a href="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1115%2F0ZR1095111%2F210ZP95111-11-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659687209&t=9f3adac8e31094571532bff7ac7af22d" target="camera">17 号监控</a></li>
  107.         <li><a href="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.51tietu.net%2Fpic%2F2019-091211%2Fl2d5i5rhrltl2d5i5rhrlt.jpg&refer=http%3A%2F%2Fimg9.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659687209&t=47bd7c29fa076a5ea675f57ddeecd40e" target="camera">18 号监控</a></li>
  108.         <li><a href="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.51tietu.net%2Fpic%2F2019-091322%2F343cums5fl0343cums5fl0.jpg&refer=http%3A%2F%2Fimg9.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659687209&t=839d251ac0f50a18a392948827aa2f95" target="camera">19 号监控</a></li>
  109.         <li><a href="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.51tietu.net%2Fpic%2F2019-091116%2Fhn0njbasvoohn0njbasvoo.jpg&refer=http%3A%2F%2Fimg9.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659687209&t=4568bfe7322445636165cf1f8e6272b3" target="camera">20 号监控</a></li>
  110.       </ul>
  111.     </div>
  112.     <div class="cont">
  113.       <iframe srcdoc="<a href='javascript:;'>请点击左侧菜单,看世界风景！！</a>" frameborder="1" name="camera"></iframe></div>
  114.   </div>

上一条：用户注册表单，多媒体标签，链接与内联框架元素下一条：表单及内联框架应用
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多