表单元素与多媒体元素的使用

1.表单元素

表单是用户与服务器交互信息的载体（手段）
1.发送方式/请求方式：get/post
2.发送的数据:
2.1 自定义(最灵活): 用户自己输入,文本框（text）,文本域（textarea）,
2.2 预定义(最安全): 由程序员/开发者已经写好了,用户只要做一个选择,复选框（checkbox）/单选框（radio）/下拉列表（select/option）…

类型/属性	描述
`from`	`action`将表单数据提交到服务器的地址; `method`提交表单时所用的HTTP方法，get或post
`get`	数据以键值对方式发送到服务端，常用于查询, 将用户的查询参数,通过url发送到服务器端,且数据在提交的URL问号”?”后面
`post`	用于向服务器提交数据,常用于写操作, 也可以用于读/查询，安全性更好
`input`	根据不同的`type`属性，有不同的用法。`text`单行文本框；`password`密码框；`radio`单选框；`checkbox`复选框
`input`	`name`提交到后端的变量名;`value`默认值；`placeholder`提示信息；`autofocus`页面加载完成后自动获取焦点，布尔类型，非此即彼
`radio`	通过`checked`来设置默认值，布尔类型
`checkbox`	通过`checked`来设置默认值，布尔类型;复选框提交的数据是一组数据,哪怕只有一个值也是数组,所以`name`写成数组的语法: 变量名后加上中括号[]
`select/option`	下拉列表，使用的是预定义的值，最为安全。`selected`设置默认选项，布尔类型；`disabled`禁用当前选项，布尔类型
`button`	默认就是提交类型按钮`<button type="submit">提交</button>`
`label`	`for`属性与`input`中`id`属性绑定，可以实现点击`label`标签时获取文本框的焦点或者单选框/复选框设置的默认值

1.1使用get方式提交数据

代码：

<h2>使用get方式提交表单数据</h2>
<form action="check.php" method="get">
    <div>
        <label for="uname">用户名:</label>
        <input
          type="text"
          id="uname"
          name="username"
          placeholder="用户名不能为空"
          autofocus
        />
    </div>
    <button>提交</button>
</form>

使用get方式提交数据，数据是保存在URL中的
效果如下：

1.2使用post方式提交数据

代码：

<!DOCTYPE html>
<html lang="en">
  <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>使用post方式提交表单数据</title>
  </head>
  <body>
    <h2>使用post方式提交表单数据</h2>
    <form action="check.php" method="post">
      <!-- 单行文本框 -->
      <div>
        <label for="uname">用户名:</label>
        <input type="text" id="uname" name="username" placeholder="用户名不能为空" autofocus />
      </div>
      <!-- 密码框 -->
      <div>
        <label for="psw">密码:</label>
        <input type="password" id="psw" name="password" placeholder="密码不能为空" />
      </div>
      <!-- 单选按钮-->
      <div>
        <label for="secret"> 性别:</label>
        <input type="radio" id="man" name="sex" value="man" /><label for="male">男</label>
        <input type="radio" id="woman" name="sex" value="woman" /><label for="female">女</label>
        <input type="radio" id="secret" name="sex" value="secret" checked /><label for="secret">保密</label>
      </div>
      <!-- 复选框 -->
      <div>
        <label for="secret"> 爱好:</label>
        <input type="checkbox" id="basketBall" name="hobby[]" value="basketBall" /><label for="game">篮球</label>
        <input type="checkbox" id="footBall" name="hobby[]" value="footBall" checked /><label for="trave">足球</label>
        <input type="checkbox" id="badminton" name="hobby[]" value="badminton" checked /><label for="shoot">羽毛球</label>
        <input type="checkbox" id="pingPongBall" name="hobby[]" value="pingPongBall"  /><label for="shoot">乒乓球</label>
      </div>
      </div>
      <!-- 下拉列表 -->
      <div>
        <label for="">学历:</label>
        <select name="edu" id="">
          <option value="0" selected disabled>--请选择--</option>
          <option value="middle">中学</option>
          <option value="university">大学</option>
          <option value="graduateStudent">研究生</option>
          <option value="doctor">博士</option>
          <option value="other">其它</option>
        </select>
      </div>
      <div>
        <button>提交</button>
      </div>
    </form>
  </body>
</html>

使用post方式提交数据，在URL中的是看不到数据的，需要在控制器中查看，此方式安全性更好一些
效果如下：

2.多媒体元素

类型	描述
`video`	`src`音/视频文件的路径；`controls`显示播放控件,布尔属性；`autoplay`自动播放
`iframe`	内联框架标签, 画中画；name给当前的内联框架元素命名, 方便进行引用,相当于窗口名称；`<a>`标签与`iframe`绑定，可以在当前iframe中打开`<a>`中跳转的页面；`srcdoc`支持html标签

使用多媒体标签做一个简单的后台页面

css样式：

 body {
     height: 100vh;
     width: 100vw;
     display: grid;
     grid-template-columns: 10em 1fr;
     grid-template-rows: 6em 1fr;
     margin: 0;
 }
 body .header {
     grid-column-end: span 2;
     border-bottom: 1px solid currentColor;
     background-color: #efe;
     padding: 2em;
     display: flex;
     align-items: center;
}
 body .header div {
     margin-left: auto;
 }
 body .nav {
     background-color: #efc;
     margin: 0;
     padding-top: 1em;
     list-style: none;
 }
 body iframe {
     width: calc(100vw - 10em);
     height: calc(100vh - 6em);
     border-left: 1px solid currentColor;
 }

html代码

<!-- 后台顶部 -->
<div class="header">
    <h1>网站后台管理系统</h1>
<div>
    <em>admin</em>
    <a href="javascript:">退出</a>
</div>
</div>
<!-- 左侧导航 -->
<ul class="nav">
    <li><a href="demo02.html" target="content">表单注册</a></li>
    <li><a href="https://map.baidu.com/@11882921,3056987,13z" target="content">百度地图</a></li>
    <li><a href="https://lol.qq.com/main.shtml" target="content">英雄联盟</a></li>
    <li><a href="video.html" target="content">视频播放</a></li>
</ul>
<!-- 右侧内容区 -->
<iframe src="javascript:" frameborder="1" name="content"></iframe>

效果如下：

表单元素与多媒体元素的使用

表单元素与多媒体元素的使用

1.表单元素

1.1使用get方式提交数据

1.2使用post方式提交数据

2.多媒体元素

使用多媒体标签做一个简单的后台页面

相关文章