Community Learn Tools Library Leisure
search
English
Home > List of blog posts > HTML中from表单的常用控件/内联框架的使用
Blogger Information
Blog 43
fans 4
comment 0
visits 19368
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
HTML中from表单的常用控件/内联框架的使用
汇享科技
Original
427 people have browsed it

表单中的常用控件

  • 表单中的标签
标签 描述
form 在HTML中创建一个表单使用一对form
input 用于搜集用户信息，可以通过type属性定义形式例如文本框，单选按钮，复选框等
select 用于创建一个下拉列表 内有一对option 提供选项
button 用于创建一个按钮
  • input中的属性
    • text：单行文本框，输入什么就显示什么
    • password：密码文本框，输入字符后不会明文显示
    • radio：单选按钮，定义多个单选按钮name属性值需要相等
    • checkbox：复选框：定义复选框name属性应当为一个数组
    • reset：重置按钮，重置表单中的数据

用户注册表单案例：

l5ad7ies.png

  1.   <body>
  2.     <div>
  3.       <form action="username.php" method="post">
  4.         <div class="a">
  5.           <label for="username">账 号：</label>
  6.           <input
  7.             type="text"
  8.             name="username"
  9.             id="username"
  10.             placeholder="请输入十一位账号"
  11.           />
  12.         </div>
  13.         <div class="b">
  14.           <label for="psw">密 码：</label>
  15.           <input
  16.             type="password"
  17.             name="userpsw"
  18.             id="psw"
  19.             placeholder="请输入密码"
  20.           />
  21.         </div>
  22.         <div class="c">
  23.           <label for="aemail">邮 箱：</label>
  24.           <input
  25.             type="email"
  26.             name="xemail"
  27.             id="aemail"
  28.             placeholder="请输入邮箱"
  29.           />
  30.         </div>
  31.         <div class="d">
  32.             <label for="male">性  别：</label>
  33.             <input type="radio" name="sex" id="male"  value="male" checked ><label for="male">男</label>
  34.             <input type="radio" name="sex" id="female" value="female"><label for="female">女</label>
  35.         </div>
  36.         <div class="e">
  37.             <label for="">爱  好：</label>
  38.             <input type="checkbox" name="aihao[]" id="lq" value="lq"><label for="lq">篮球</label>
  39.             <input type="checkbox" name="aihao[]" id="zq" value="zq"><label for="zq">足球</label>
  40.             <input type="checkbox" name="aihao[]" id="ppq" value="ppq"><label for="ppq">乒乓球</label>
  41.             <input type="checkbox" name="aihao[]" id="ymq" value="ymq"><label for="ymq">羽毛球</label>
  42.         </div>
  43.         <div class="f">
  44.             <label for="">学  历：</label>
  45.             <select name="edu" id="">
  46.                 <option value="0" disabled selected>==请选择==</option>
  47.                 <option value="1">小学</option>
  48.                 <option value="1">中学</option>
  49.                 <option value="1">高中</option>
  50.                 <option value="1">大学</option>
  51.                 <option value="1">其他</option>
  52.             </select>
  53.         </div>
  54.         <div class="g">
  55.             <button>注册</button>
  56.             <input type="reset" value="重置">
  57.         </div>
  58.       </form>
  59.     </div>
  60.   </body>

内联框架标签

iframe：内联框架标签（可以将另一个页面在当前heml文档中展现出来) 通常用来写后台使用

l5aepnlv.png

简易后台案例

  1.     <style>
  2.         *{
  3.             padding: 0;
  4.             margin: 0;
  5.             list-style: none;
  6.         }
  7.         .a{
  8.             width: 100%;
  9.             height: 80px;
  10.             background-color: bisque;
  11.         }
  12.         .title{
  13.             margin-left: 95%;
  14.             margin-top: 10;
  15.         }
  16.         .c{
  17.             width: 90%;
  18.             height: 700px;
  19.             border: 1px solid #000;
  20.         }
  21.         .b{
  22.             height: 700px;
  23.             background-color: aqua;
  24.         }
  25.         .f{
  26.             display: flex;
  27.             padding: 10px;
  28.         }
  29.     </style>
  30. </head>
  31. <body>
  33. <div class="e">
  34.     <div class="a">
  35.         <div class="title">
  36.             <span>admin</span>
  37.             <a href="">退出</a>
  38.         </div>
  39.     </div>
  40.     <div class="f">
  41.         <div class="b">
  42.             <ul>
  43.                 <li><a href="https://www.hui-xiang.cn/" target="d">个人博客</a></li>
  44.                 <li><a href="https://j.map.baidu.com/1d/w" target="d">我的地址</a></li>
  45.                 <li><a href="demo1.html" target="d">用户注册</a></li>
  46.             </ul>
  47.         </div>
  48.         <div class="c">
  49.             <iframe srcdoc="" frameborder="0" name="d" width="100%" height="700px"></iframe>
  50.         </div>
  51.     </div>
  53. </div>
  54. </body>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post