Blogger Information
Blog 17
fans 1
comment 0
visits 8758
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
html表单元素以及多媒体标签
P粉933302309
Original
356 people have browsed it

表单几个常用元素

元素属性

类型 描述
表单元素 <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>

效果图如下

图片

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