form表单标签及常用属性应用

用户注册表单

 <form action="regit.php" method="post" align="center">
        <h2>用户注册界面</h2>
        <div>
            <label for="username">用户名：</label>
            <input type="text" id="username" name="username" placeholder="用户名不能为空" autofocus>
        </div>
        <div style="margin-left: 15px;">
            <label for="psw">密码：</label>
            <input type="password" name="password" id="psw" placeholder="6位不含特殊字符">
        </div>
        <div style="margin-left: 15px;">
            <label for="male">性别：</label>
            <input type="radio" name="sex" id="male" value="male" checked><label for="male"> 男</label>
            <input type="radio" name="sex" id="female" value="female"><label for="female"> 女</label>
            <input type="radio" name="sex" id="secret" value="secret"><label for="secret"> 不想说</label>
        </div>
        <div style="margin-left: -70px;">
            <label for="">学历：</label>
            <select name="edu" id="">
                <option value="" selected disabled>--请选择--</option>
                <option value="hs">高中</option>
                <option value="ug">大学</option>
                <option value="mas">硕士</option>
                <option value="doc">博士</option>
            </select>
        </div>
        <div>
            <label for="">特长：</label>
            <input type="checkbox" name="spi[]" id="sing" value="sing" checked><label for="sing"> 唱歌</label>
            <input type="checkbox" name="spi[]" id="dance" value="dance"><label for="dance"> 跳舞</label>
            <input type="checkbox" name="spi[]" id="eat" value="eat"><label for="eat"> 吃饭</label>
            <input type="checkbox" name="spi[]" id="joke" value="joke"><label for="joke"> 吹牛</label>
        </div>
        <div>
            <button>注册</button>
        </div>
    </form>

后台首页

    <style>
      .header {
        width: 100%;
        height: 70px;
        background: rgb(93, 206, 235);
        text-align: center;
        font-size: 30px;
        font-weight: bolder;
        padding-top: 15px;
      }
      .header.nav {
        text-align: right;
        font-size: smaller;
        font-weight: 100;
      }
      .content{
        width: 100%;
        margin-top: 35px;
      }
      .content.left{
        float: left;
        width: 20%;
        background: rgb(241, 151, 237);
        height: 500px;
      }
      .content.right{
        float: right;
        width: 80%;
        background: rgb(126, 247, 166);
        height: 500px;
      }
    </style>
    <div class="header">
      CMS后台管理系统
      <div class="header nav">
        <em>admin</em>&nbsp;<a href="">注销</a>
      </div>
    </div>
    <br>
    <div class="content left">
        <dl>
            <dt></dt>
            <dd><a href="../0704/demo3.html" target="content">表格元素</a></dd>
            <dd><a href="../0704/demo5.html" target="content">列表图片</a></dd>
            <dd><a href="../0704/demo6.html" target="content">标题元素</a></dd>
            <dd><a href="../0704/demo3.html" target="content">表格元素</a></dd>
        </dl>
    </div>
    <div class="content right">
        <iframe srcdoc=" <a href='javascript:;'>请点击左边导航栏试试看</a>" frameborder="0" width="100%" height="100%" name="content"></iframe>
    </div>