实例用户注册及内联框架常用元素代码

发布于：2022-07-06 17:50:57  栏目：技术文档

• 常用表单元素

  <form><label><input><datalist><select><textarea><button>

• 内联框架元素属性

  <iframe src="xxx" name="xxx">,常用于后台布局或前端跨域

• 音/视频元素属性

    <video src="xxx" controls><audio src="xxx" controls>

  实例用户注册表单代码

  <h2>用户注册</h2>
    <form action="1.php" method="post">
    <div>
        <label for="name">用户名：</label>
        <input type="text" id="name" placeholder="admin" required>
    </div>
    <div>
        <label for="email">邮箱：</label>
        <input type="email" id="email" placeholder="admin@qq.com" required>
    </div>
    <div>
        <label for="password">密码：</label>
        <input type="password" id="password" placeholder="至少8位" required>
    </div>
    <div>
        <label for="secret">性别：</label>
        <input type="radio" id="male" value="male" name="secret"><label for="male">男</label>
        <input type="radio" id="female" value="female" name="secret"><label for="female">女</label>
        <input type="radio" id="secret" value="secret" name="secret" checked><label for="secret">保密</label>
    </div>
    <div>
        <label for="game">爱好：</label>
        <input type="checkbox" id="gane" name="hobby[]" value="game" checked><label for="game">游戏</label>
        <input type="checkbox" id="trave" name="hobby[]" value="trava"><label for="trave">旅游</label>
        <input type="checkbox" id="shoot" name="hobby[]" value="shoot"><label for="shoot">摄影</label>
    </div>
    <div>
        <label for="">学历</label>
        <select name="" id="">
            <option value="0" selected disabled>--请选择--</option>
            <option value="1">中学</option>
            <option value="2">高中</option>
            <option value="3">本科</option>
            <option value="4">研究生</option>
            <option value="5">博士</option>
            <option value="6">其他</option>
        </select>
    </div>
    <div>
        <button>提交</button>
    </div>
    </form>

  效果图：

  

  实例内联框架网站后台管理代码

  <!-- 后台顶部 -->
    <div>
         <h2>网站后台管理系统</h2>
    </div>
    <div>
        <em>admin</em>
        <a href="javascript:;">退出</a>
    </div>
    <!-- 左侧导航 -->
    <ul>
        <li><a href="" target="content">后台顶部</a></li>
        <li><a href="" target="content">后台左侧</a></li>
        <li><a href="" target="content">后台右侧</a></li>
        <li><a href="" target="content">后台主体</a></li>
    </ul>
    <!-- 右侧导航 -->
    <iframe srcdoc="<a href='javascript:;'>请点击左侧菜单</a>" frameborder="1" name="content" width="300"></iframe>

  效果图：

  

相关推荐