原创前端,HTML5

表单中的常用控件/内联框架的使用

本文阅读 2 分钟
首页 前端,HTML5 正文

表单中的常用控件

  • 表单中的标签
标签描述
form在HTML中创建一个表单使用一对form
input用于搜集用户信息,可以通过type属性定义形式例如文本框,单选按钮,复选框等
select用于创建一个下拉列表 内有一对option 提供选项
button用于创建一个按钮
  • input中的属性

    1. text:单行文本框,输入什么就显示什么
    2. password:密码文本框,输入字符后不会明文显示
    3. radio:单选按钮,定义多个单选按钮name属性值需要相等
    4. checkbox:复选框:定义复选框name属性应当为一个数组
    5. reset:重置按钮,重置表单中的数据

用户注册表单案例:

l5ad7ies.png

  <body>
    <div>
      <form action="username.php" method="post">
        <div class="a">
          <label for="username">账 号:</label>
          <input
            type="text"
            name="username"
            id="username"
            placeholder="请输入十一位账号"
          />
        </div>
        <div class="b">
          <label for="psw">密 码:</label>
          <input
            type="password"
            name="userpsw"
            id="psw"
            placeholder="请输入密码"
          />
        </div>
        <div class="c">
          <label for="aemail">邮 箱:</label>
          <input
            type="email"
            name="xemail"
            id="aemail"
            placeholder="请输入邮箱"
          />
        </div>
        <div class="d">
            <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>
        </div>
        <div class="e">
            <label for="">爱  好:</label>
            <input type="checkbox" name="aihao[]" id="lq" value="lq"><label for="lq">篮球</label>
            <input type="checkbox" name="aihao[]" id="zq" value="zq"><label for="zq">足球</label>
            <input type="checkbox" name="aihao[]" id="ppq" value="ppq"><label for="ppq">乒乓球</label>
            <input type="checkbox" name="aihao[]" id="ymq" value="ymq"><label for="ymq">羽毛球</label>
        </div>
        <div class="f">
            <label for="">学  历:</label>
            <select name="edu" id="">
                <option value="0" disabled selected>==请选择==</option>
                <option value="1">小学</option>
                <option value="1">中学</option>
                <option value="1">高中</option>
                <option value="1">大学</option>
                <option value="1">其他</option>
            </select>
        </div>
        <div class="g">
            <button>注册</button>
            <input type="reset" value="重置">
        </div>
      </form>
    </div>
  </body>

内联框架标签

iframe:内联框架标签(可以将另一个页面在当前heml文档中展现出来 )一般在写后台框架的时候用的较多

l5aepnlv.png

  • 简易后台
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .a{
            width: 100%;
            height: 80px;
            background-color: bisque;
        }
        .title{
            margin-left: 95%;
            margin-top: 10;
        }
        .c{
            width: 90%;
            height: 700px;
            border: 1px solid #000;
        }
        .b{
            height: 700px;
            background-color: aqua;
        }
        .f{
            display: flex;
            padding: 10px;
        }
    </style>
</head>
<body>

<div class="e">
    <div class="a">
        <div class="title">
            <span>admin</span>
            <a href="">退出</a>
        </div>
    </div>
    <div class="f">
        <div class="b">
            <ul>
                <li><a href="https://www.hui-xiang.cn/" target="d">个人博客</a></li>
                <li><a href="https://j.map.baidu.com/1d/w" target="d">我的地址</a></li>
                <li><a href="demo1.html" target="d">用户注册</a></li>
            </ul>
        </div>
        <div class="c">
            <iframe srcdoc="" frameborder="0" name="d" width="100%" height="700px"></iframe>
        </div>
    </div>

</div>
</body>
原创文章,作者:huixiang,如若转载,请注明出处:https://www.hui-xiang.cn/archives/49.html
-- 展开阅读全文 --
HTML常用标签属性以及应用场景/怎么用表格做一个课程表
« 上一篇 07-04
自定义样式的来源和优先级/css常用选择器和选择器权重分析
下一篇 » 07-06

相关推荐