表单几个常用元素
元素属性
| 类型 | 描述 |
|---|---|
| 表单元素 | <form><label><input><datalist><select><textarea><button> |
| 内联框架 | <iframe src="xxx" name="xxx">,常用于后台布局或前端跨域 |
| 音/视频 | <video src="xxx" controls><audio src="xxx" controls> |
案例一：利用表单元素制作简单的用户注册页面
代码如下
<!-- required必填字段 placeholder="" 内置内容--><h1 style="text-align:center" border="2" align="center">用户注册</h1><form action="check.php" method="post" style="text-align:center" align="center"><!-- value编辑框内默认值 --><!-- 用户名 --><div><label for="user">用户名：</label><input type="text" id="user" name="useradmin" placeholder="请输入用户名" required></div><br><br><!-- 用户密码 --><div><label for="pwd">密  码：</label><input type="password" id="pwd" name="password" placeholder="请输入密码" required></div><br><br><div><!-- 性别 --><label for="nan">性  别：</label><label><input type="radio" name="sex" id="nan" value="man" checked>男   </label><label><input type="radio" name="sex" id="wman" value="nv">女   </label><label><input type="radio" name="sex" id="yao" value="renyao">人妖</label></div><br><br><div><!-- 爱好 --><label for="trave">       爱  好：</label><label><input type="checkbox" name="hobby[]" id="book" value="book">看书</label><label><input type="checkbox" name="hobby[]" id="game" value="game">打游戏</label><label><input type="checkbox" name="hobby[]" id="shop" value="shop">购物</label><label><input type="checkbox" name="hobby[]" id="trave" value="trave">旅游</label></div><br><br><div><label for="0">居住城市：      </label><select name="City" id=""><option name="" id="0" selected disabled>--请选择城市--  </option><option name="beijin" id="">北京</option><option name="guangxi" id="3">广西</option><option name="guangdong" id="4">广东</option><option name="hunan" id="5">湖南</option></select></div><br><br><div><button type="submit" style="background-color:aqua">注册</button><button type="reset" style="background-color:greenyellow;">重置</button><br><br><button >已有账号！点击登录</button></div></form>效果图如下
案例二：使用链接与内联框架元素写一个简单的后台首页
代码如下
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>简单网站小后台</title></head><body><ul><li><a href="http://tp.itxxs.cn/view.php/8c460c9d62059bf07e93050cf103442a.mp4" target="video">演示视频</a></li><li><a href="https://www.php.cn/" target="video">PHP中文网</a></li></ul><iframe width='800;' height="800" frameborder="1" name="video" >点击查看</iframe></body></html>效果图如下
