用户注册实例及内联后台首页框架实例

HTML中常用的表单元素

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

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

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

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

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

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

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

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

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

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

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

<audio src="XXXX" controls autoplay></audio>
<video src="XXXX" controls autoplay> </video>

用户注册表单实例代码

<!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>
    <h3>用户注册</h3>
    <form action="xxx.php" method="post">
        <div>
            <label for="name">用户名：</label>
            <input type="text" id="name" name="username" placeholder="请输入用户名" required>
        </div>
        <div>
            <label for="psw">密 码：</label>
            <input type="password" name="password" id="psw" placeholder="请输入密码，不小于8位密码" required>
        </div>
        <div>
            <label for="secret">性别：</label>
            <input type="radio" id="male" value="male" name="sec"><label for="male">男</label>
            <input type="radio" id="female" value="female" name="sec"><label for="female">女</label>
            <input type="radio" id="secret" value="secret" name="sec" checked><label for="secret">保密</label>
        </div>
        <div>
            <label for="ball">兴趣爱好：</label>
            <input type="checkbox" id="ball" name="ah[]" value="ball" checked><label for="ball">打球</label>
            <input type="checkbox" id="reading" name="ah[]" value="reading" ><label for="reading">看书</label>
            <input type="checkbox" id="calligraphy" name="ah[]" value="calligraphy"><label for="calligraphy">书法</label>
        </div>
        <div>
            <label for="">学历：</label>
            <select name="look" 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>
            </select>
        </div>
        <div>
            <button>提交</button>
        </div>
    </form>
</body>
</html>

运行效果：

用户注册运行效果

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

<!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>
    <!-- 顶部导航 -->
    <div>
        XXX网站后台管理系统
    </div>
    <div>
        <em>管理员</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>
        <li><a href="#" target="content">友情链接</a></li>
    </ul>
    <!-- 右侧页面 -->
    <iframe src="<a href='javascript:;'>请点击左侧菜单</a>" frameborder="1" name="content" width="500" height="500"></iframe>
</body>
</html>

运行效果：

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