2022年0705表单与后台框架轻量级开发演示

1、表单与后台框架轻量级开发演示

1.1、效果图

表单效果示例图

1.2、代码演示

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head>
<body>
    <form action="check.php" method="post"  onsubmit="return false">
<div>
<!--for和id属性值相同，进行绑定，展示为一行-->
<label for="uname"> 用户名： </label>
<input type="text" id="uname" autofocus>
</div>
<div>
<label for="psw">密  码：
    <input type="password" id="psw" name="password">
    <button onclick="showpassword">查看密码</button>
</label>
</div>
<!--文本框-->
<div>
<label for="sercit">性  别：</label>
    <input type="radio" id="male" name="sex" value="male" checked> <label for="male">男</label>
    <input type="radio" id="female" name="sex" value="female"> <label for="female">女</label>
    <input type="radio" id="sercit" name="sex" value="sercit"> <label for="sercit">保密</label>
</div>
<div>
    <label for="sercit">爱  好：</label>
        <input type="checkbox" id="male" name="hobby[]" value="male" checked> <label for="male">语文</label>
        <input type="checkbox" id="female" name="hobby[]" value="female"> <label for="female">数学</label>
        <input type="checkbox" id="sercit" name="hobby[]" value="sercit" checked> <label for="sercit">化学</label>
    </div>
    <div>
        <label for="">搜索来源：</label>
        <select name="" id="">
        <option value="1">百度</option>
        <option value="2">谷歌</option>
        <option value="3">搜狗</option>
        <option value="4" selected>360搜索</option>
        </select>
    </div>
    <div>
<label for="mail">电子邮箱：</label>
<input type="text" name="mail">
    </div>
<div>
    <button type="submit">提交</button>
</div>
    </form>
    <div>
        <video src="https://v.youku.com/v_show/id_XNTIwMTQzOTM4NA==.html?spm=a2ha1.14919748_WEBHOME_GRAY.drawer7.d_zj4_1&s=fcdd382e1d1f40ba8572&scm=20140719.manual.29095.show_fcdd382e1d1f40ba8572" width="400px" height="300px" controls autoplay poster="https://img.php.cn/upload/aroundimg/000/000/001/62b2806382aa1939.png"></video>
        </div>
<hr>
<!----通过name属性和target进行标签绑定
srcdoc支持html标签
-->
        <a href="https://map.baidu.com/@12609384.2,2631450.58,12z" target="map">深圳市地图</a>
    <br>
        <iframe src="https://map.baidu.com/@12609384.2,2631450.58,12z" name="map" width="400px" height="300px" frameborder="0"></iframe>
</body>
</html>

2、网站后台框架结构演示

2.1、后台框架图片展示效果

后台框架图片展示效果

2.2、后台框架图片展示代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网站后台内容管理系统演示</title>
    <style>
body{weight:auto;width:auto}
    </style>
</head>
<body bgcolor="#fff">
    <a href="https://www.php.cn/static/images/new/logo.png"  target="menu"> <img src="https://www.php.cn/static/images/new/logo.png" height="15px" alt="logo"></a>
    <a href="https://www.php.cn/" target="menu">首页</a>
    <a href="https://www.php.cn/course.html" target="menu">视频教程 </a>
    <a href="https://www.php.cn/course/type/3.html" target="menu">学习路径</a>
    <a href="https://www.php.cn/k.html" target="menu">PHP培训</a>
    <a href="https://www.php.cn/xiazai/" target="menu">资源下载</a>
    <a href="https://www.php.cn/article.html" target="menu">技术文章</a>
    <a href="" target="menu">社区</a>  
     <a href="https://www.php.cn/app/" target="menu">APP下载</a>
<br>
     <iframe src="" frameborder="1" name="menu" height="100px" width="500px"></iframe>
<p><img src="https://www.php.cn/static/images/bg-teacher.png" height="50px" alt=""></p>
 <p>用户名：西门瑶雪 <span>退出登录</span></p>
<hr>
<ul>
    <li><a href="https://www.php.cn/" target="nav">主页</a></li>
    <li><a href="https://www.php.cn/course.html" target="nav">课程</a></li>
    <li><a href="https://www.php.cn/member/1043975/asks.html" target="nav"> 社区</a></li>
    <li><a href="https://www.php.cn/blog/rankyun.html" target="nav">博客</a></li>
    <li><a href="https://www.php.cn/user/order.html" target="nav">订单</a></li>
    <li><a href="https://www.php.cn/user/wages.html" target="nav">赚钱</a></li>
    <li><a href="https://www.php.cn/user/vip/" target="nav">会员</a></li>
</ul>
<iframe src="" frameborder="1" name="nav" height="100px" width="500px"></iframe>
</body>
</html>

1、表单与后台框架轻量级开发演示

1.1、效果图

1.2、代码演示

2、网站后台框架结构演示

2.1、后台框架图片展示效果

2.2、后台框架图片展示代码

更多相关文章

随机推荐