ASCII码 ASCII码

html表单元素以及多媒体标签

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

表单几个常用元素

元素属性

类型 描述
表单元素 <form><label><input><datalist><select><textarea><button>
内联框架 <iframe src="xxx" name="xxx">,常用于后台布局或前端跨域
音/视频 <video src="xxx" controls><audio src="xxx" controls>

案例一：利用表单元素制作简单的用户注册页面

代码如下

  1.     <!-- required必填字段 placeholder="" 内置内容-->
  2.     <h1 style="text-align:center" border="2" align="center">用户注册</h1>
  3.     <form action="check.php" method="post" style="text-align:center" align="center">
  4.         <!-- value编辑框内默认值 -->
  5.         <!-- 用户名 -->
  6.         <div>
  7.             <label for="user">用户名：</label>
  8.             <input type="text" id="user" name="useradmin" placeholder="请输入用户名" required>
  9.         </div>
  10.         <br><br>
  11.         <!-- 用户密码 -->
  12.         <div>
  13.             <label for="pwd">密&ensp;&ensp;码：</label>
  14.             <input type="password" id="pwd" name="password" placeholder="请输入密码" required>
  15.         </div>
  16.         <br><br>
  17.         <div>
  18.         <!-- 性别 -->
  19.         <label for="nan">性&ensp;&ensp;别：</label>
  20.         <label><input type="radio" name="sex" id="nan" value="man" checked>男&ensp;&ensp;&ensp;</label>
  21.         <label><input type="radio" name="sex" id="wman" value="nv">女&ensp;&ensp;&ensp;</label>
  22.         <label><input type="radio" name="sex" id="yao" value="renyao">人妖</label>
  23.         </div>
  24.         <br><br>
  25.         <div>
  26.         <!-- 爱好 -->
  27.         <label for="trave">&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;爱&ensp;&ensp;好：</label>
  28.         <label><input type="checkbox" name="hobby[]" id="book" value="book">看书</label>
  29.         <label><input type="checkbox" name="hobby[]" id="game" value="game">打游戏</label>
  30.         <label><input type="checkbox" name="hobby[]" id="shop" value="shop">购物</label>
  31.         <label><input type="checkbox" name="hobby[]" id="trave" value="trave">旅游</label>
  32.         </div>
  33.         <br><br>
  34.         <div>
  35.             <label for="0">居住城市：&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;</label>
  36.             <select name="City" id="">
  37.                 <option name="" id="0" selected disabled>--请选择城市--&ensp;&ensp;</option>
  38.                 <option name="beijin" id="">北京</option>
  39.                 <option name="guangxi" id="3">广西</option> 
  40.                 <option name="guangdong" id="4">广东</option>
  41.                 <option name="hunan" id="5">湖南</option>
  42.             </select>
  43.         </div><br><br>
  44.         <div>
  45.             <button type="submit" style="background-color:aqua">注册</button>
  46.             <button type="reset" style="background-color:greenyellow;">重置</button><br><br>
  47.             <button >已有账号！点击登录</button>
  48.         </div>
  49.     </form>

效果图如下用户注册效果图

案例二：使用链接与内联框架元素写一个简单的后台首页

代码如下

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>简单网站小后台</title>
  8. </head>
  9. <body>
  10.     <ul>
  11.         <li>
  12.             <a href="http://tp.itxxs.cn/view.php/8c460c9d62059bf07e93050cf103442a.mp4" target="video">演示视频</a>
  13.         </li>
  14.         <li><a href="https://www.php.cn/" target="video">PHP中文网</a></li>
  15.     </ul>
  16.     <iframe width='800;' height="800" frameborder="1" name="video" >点击查看</iframe>
  17. </body>
  18. </html>

效果图如下

图片

相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行