表单提交与内联框架及列表集（内置课程表及表单提交示例）

程序员文章站 2022-04-17 18:54:34

...

今日随堂学习代码集合篇:

列表

无序列表
ul>li*5
代码示例:


<ul>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
</ul>

有序列表
ol>li*5
代码示例:


<ol>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
</ol>

自定义列表
dt{用户名}+dd{老王}+dt{性别}+dd{男}+dd{有头发}
代码示例:
```
<dt>用户名</dt>
<dd>老王</dd>
<dt>性别</dt>
<dd>男</dd>
<dd>有头发</dd>
```
其中无需列表ul应用场景较为广泛,例如导航,幻灯片,瀑布流页面等图文信息,自定义列表也较广泛,例如热点帖子,用户信息等

表格

今日学习表格由4部分组成,标题,表头,主体,表尾

其中标题代码为:
<caption>表格标题</caption>
表头代码为:
代码知识点:
<thead></thead>
<th></th>


<thead>
 <th>id</th>
 <th>name</th>
 <th>email</th>
 <th>password</th>
</thead>

主体代码为:
代码知识点为:
<tbody></tbody>


<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>

表尾代码为:
代码知识点:
<tfoot></tfoot>


          <tfoot>
              <tr>
                  <td>x</td>
                  <td>x</td>
                  <td>x</td>
                  <td>x</td>
              </tr>
          </tfoot>

表单较为重点(初步较难理解)

最常见的有用户注册,用户登录,提交表单等重要信息

常见有form + input + select + button
form自己理解为主体部分,提交信息部分.
参数:action
提交的信息,例如提交给某个php文件
参数2:method
提交的形式,如get,post
参数3:type
提交数据的值是什么形式,例如是文本形式,还是密码形式,常见的值为txt,password
参数4:button
是按钮的意思,经常使用为按钮携带参数的值提交到某个php文件
参数5:name(name：作为可与服务器交互数据的HTML元素的服务器端的标示。)
是提交的参数,例如name=”username”,提交的是username的值,name=”password”,password的值,value=”admin”,参数balue一般会一起出现,起到默认值的左右,例如用户名默认值为admin,具体看下面代码.
示例代码(get方式(明文)/post方式)


  <h2>用户注册</h2>
    <!-- form + input + select + button ...  -->
    <!-- action: 处理表单的程序 -->
    <form action="verify.php" method="get" style="display: grid; gap: 10px">
      <!-- name: 变量/js选择, value: 默认值 -->
      <!-- <input type="text" name="username" value="admin" />
      <input type="password" name="password" /> -->
      <!-- http://127.0.0.1:5500/1222/verify.php?username=admin&password=123456 -->
      <!-- <button>提交</button> -->

      <!-- 提交的数据,直接在url中 , 这叫: get 请求 -->
      <!-- post: 数据不会出现在url中, 而是随着请求体发送 -->
      <!-- http://127.0.0.1:5500/1222/verify.php   ? username=admin -->
      <!-- http://127.0.0.1:5500/1222/verify.php?username=zhu+lao+shi
      zhu lao shi 
      zhu+lao+shi -->

      <!-- 二种请求类型： get, post 
      form的二个属性： action, method  -->

文本框:


      <!-- 文本框 -->
      <div>
        <label for="usernaem">用户名:</label>
        <input
          type="text"
          name="usernaem"
          value="admin"
          id="usernaem"
          placeholder="至少8位"
          required
        />
      </div>

新参数:id,一般为标识符
新参数2:placeholder,为提示符
新参数3:required,意思是其字段是必填字段,光标选中文本框后消失.
新参数4: label里面的for字段,绑定了id标识,点击其label触动标识for,光标自动点入input

密码框:


      <!-- 密码框 -->
      <div>
        <label for="password">密码:</label>
        <input
          type="password"
          name="password"
          id="password"
          placeholder="数字+字母,至少6位"
        />
        <button onclick="showPassword(this,this.form.password)" type="button">
          查看
        </button>
      </div>

其中密码框的onclick点击事件为老师直接拿的,不作为参考依据.

邮件示例:


<div>
        <label for="email">邮箱:</label>
        <input type="email" name="email" id="email" />
      </div>

跟密码框大致意思一直,但是邮箱type可以直接使用email值,系统带了type参数email值,让用户必须使用邮箱.

单选框:


<!-- 单选按钮 -->
      <div>
        <label for="secret">性别:</label>
        <!-- name发表一致 -->
        <!-- gender = male  -->
        <!-- checked: 默认 -->
        <input type="radio" name="gender" id="male" value="male" /><label
          for="male"
          >男</label
        >
        <!-- gender = female  -->
        <input type="radio" name="gender" id="female" value="female" /><label
          for="female"
          >女</label
        >

        <input
          type="radio"
          name="gender"
          id="secret"
          value="secret"
          checked
        /><label for="secret">保密</label>
      </div>

注意单选框type的值为radio,上面的意思是这样的,性别哪里,for的值为secret,默认选中id为secret,也就是保密选项,当鼠标点到性别的时候,会自动点中保密选项,checked意思是默认,也就是打开这个页面的时候,默认就是选中了保密.

复选框:


<!-- 复选框 -->
      <div>
        <label>爱好: </label>
        <!-- name 是一个数组名称 -->
        <input
          type="checkbox"
          name="hobby[]"
          id="game"
          value="game"
          checked
        /><label for="game">游戏</label>
        <input type="checkbox" name="hobby[]" id="trave" value="trave" /><label
          for="trave"
          >旅游</label
        >
        <input
          type="checkbox"
          name="hobby[]"
          id="shoot"
          value="shoot"
          checked
        /><label for="shoot">摄影</label>
      </div>

复选框老师没有在爱好哪里进行鼠标点击爱好选中某个爱好,而是默认选中了俩,游戏跟蛇形,因为在input里面,放入了默认参数:checked,这里注意的两个部分是,复选框type的值为checkbox,还要注意的是name传输给服务器的值是一个数组,例如:name=”hobby[]”,name=”hobby[]”name=”hobby[]”,刚刚发现,虽然点爱好,并没有默认某个爱好,但是点,游戏,旅游,摄影,这几组字的时候,会默认选中,因为老师在label中的for里面的值为相应的id.

下拉列表:


<!-- 下拉列表 -->
      <!-- name 与 value 写到二个标签中 -->
      <select name="level" id="">
        <option value="1">铜牌会员</option>
        <option value="2">金牌会员</option>
        <option value="3" selected>永久会员</option>
      </select>

      <!-- 默认提交 -->
      <button type="submit">提交</button>
      <button type="button">按钮</button>
      <!-- 重置不是清空，只是恢复到默认值状态 -->
      <button type="reset">重置</button>
    </form>

    <script>
      function showPassword(btn, ele) {
        if (ele.type === "password") {
          ele.type = "text";
          btn.textContent = "隐藏";
        } else {
          ele.type = "password";
          btn.textContent = "显示";
        }
      }
    </script>
  </body>
</html>

以上代码是整个页面的代码.可以从上往下拼凑,学习时间为12月23日
上面为下拉先说按钮的意思,其中看到重置的下面有个form,就是在这个表单里面,所有按钮,点击提交会提交到action的值,也就是那个php文件里面,因为提交的type的值为submit,第二个按钮,type=”button” 同学说,以后异步的时候会用到,重置,type=”reset”就是恢复打开页面的初始状态,一定一定记住,name的值是提交给服务器的字段,划重点, selected,是默认值的意思,就是打开这个页面,默认选中的就是永久会员.
下拉列表中js部分不为参考对象,因为还没有学,

复选框隐藏折叠系列

常用,因为经常进行菜单的折叠和下拉


<title>checkbox复选框做一个下拉菜单/折叠</title>
    <style>
      /* 将复选框隐藏起 */
      input[type="checkbox"] {
        display: none;
      }
      input[type="checkbox"]:checked ~ ul {
        display: none;
      }
    </style>
  </head>
  <body>
    <label for="menu">菜单</label>
    <input type="checkbox" id="menu" />
    <ul>
      <p>Hellllllldlddddddddddd</p>
      <p>Hellllllldlddddddddddd</p>
      <p>Hellllllldlddddddddddd</p>
      <p>Hellllllldlddddddddddd</p>
      <p>Hellllllldlddddddddddd</p>
      <p>Hellllllldlddddddddddd</p>
    </ul>
  </body>

划重点:


<label for="menu">菜单</label>
    <input type="checkbox" id="menu" />

for的值一定等于id的值,type=”checkbox”一定记住是复选框的意思,其余的没啥说的,display: none;用他隐藏过文字.

内联框架与多媒体


 <title>内联框架与多媒体</title>
  </head>
  <body>
    <!-- 内联框架标签: 画中画  -->
    <!-- <iframe
      src="https://j.map.baidu.com/84/AXtc"
      frameborder="1"
      width="500"
      height="500"
    ></iframe> -->

    <!-- <a href="https://j.map.baidu.com/84/AXtc" target="map">合肥市</a>
    <iframe src="" frameborder="1" width="500" height="500" name="map"></iframe> -->

    <!-- 多媒体 -->
    <!-- controls: 添加控制功能 -->
    <!-- autoplay: 自动播放 -->
    <video
      src="images/ztx.mp4"
      width="300"
      controls
      poster="images/fm.jpg"
    ></video>
  </body>
</html>

这里要记住的是,iframe里面的,target的作用,他与name的值要一直,当a标签target=”map”时,iframe的name=”map”时,点击a标签后,a标签的url链接会嵌入到iframe当中.
下面为后台示例代码:
与dedecms,帝国cms后台相似,也是用了内联做的,贴代码,最后一步了,搞完睡觉了,明天搞表单


<!-- 后台顶部 -->
    <div class="header">
      <h1>网站后台管理</h1>
      <div>
        <span>admin</span>
        <a href="logout.php">退出</a>
      </div>
    </div>

    <!-- 左侧导航 -->
    <ul class="nav">
      <li><a href="demo1.html" target="content">菜单项1</a></li>
      <li><a href="demo2.html" target="content">菜单项2</a></li>
      <li><a href="demo3.html" target="content">菜单项3</a></li>
      <li><a href="demo4.html" target="content">菜单项4</a></li>
      <li><a href="demo5.html" target="content">菜单项5</a></li>
    </ul>

    <!-- 右侧内容 -->
    <iframe src="" frameborder="0" name="content"></iframe>
  </body>
</html>

作业1

课程表图片展示:
表单提交与内联框架及列表集（内置课程表及表单提交示例）
课程表代码示例:


<!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>
    <style>
      td {
        width: 80px;
      }
      .c {
        background-color: bisque;
      }
      .time {
        background-color: chartreuse;
      }
      .center {
        text-align: center;
      }
    </style>
    <table border="1">
      <caption>
        小学六年级课程表
      </caption>
      <thead>
        <tr class="c">
          <th>时间</th>
          <th>周1</th>
          <th>周2</th>
          <th>周3</th>
          <th>周4</th>
          <th>周5</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="time" rowspan="4">上午</td>
          <td>数学</td>
          <td>语文</td>
          <td>英语</td>
          <td>化学</td>
          <td>历史</td>
        </tr>
        <tr>
          <td>历史</td>
          <td>化学</td>
          <td>英语</td>
          <td>数学</td>
          <td>政治</td>
        </tr>
        <tr>
          <td>政治</td>
          <td>历史</td>
          <td>语文</td>
          <td>俄语</td>
          <td>巴基斯坦语</td>
        </tr>
        <tr>
          <td>中文</td>
          <td>语文</td>
          <td>历史</td>
          <td>政治</td>
          <td>政治</td>
        </tr>
        <tr>
          <td class="center" colspan="6">中午休息</td>
        </tr>
        <tr>
          <td class="time" rowspan="3">下午</td>
          <td>体育</td>
          <td>政治</td>
          <td>语文</td>
          <td>音乐</td>
          <td>舞蹈</td>
        </tr>
        <tr>
          <td>语文</td>
          <td>中文</td>
          <td>巴基斯坦语</td>
          <td>俄语</td>
          <td>政治</td>
        </tr>
        <tr>
          <td>历史</td>
          <td>中文</td>
          <td>俄语</td>
          <td>政治</td>
          <td>中文</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td class="c">备注:</td>
          <td class="c" colspan="5">每天下午15:30-17:30在校写完作业才可以回家</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

作业2

代码示例成品图：
表单提交与内联框架及列表集（内置课程表及表单提交示例）

代码：


<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>找回密码</title>
</head>

<body>
    <div>
        <form action="login.php" method="post">
            <div>
                <label for="name">用户名：</label>
                <input type="text" id="name" name="name" value="admin" />
            </div>
            <div>
                <label for="password">过去密码：</label>
                <input type="password" id="password" name="password" required />
            </div>
            <div>
                <label for="email">找回邮箱：</label>
                <input type="email" id="email" name="email" placeholder="请认真填写找回邮箱字段" required />
            </div>
            <div>
                <button type="submit">找回密码</button>
                <button type="button">提交</button>
                <button type="reset">重置信息</button>
            </div>
        </form>
    </div>
</body>

</html>

上一篇： JS深度拷贝Object Array实例分析_javascript技巧

下一篇： Page + Hexo 搭建个人博客