search

博客列表 >HTML表格与表单控件及文件域和隐藏域

HTML表格与表单控件及文件域和隐藏域

a.
a.原创
2020年12月10日 00:28:52881浏览

课程表作业

  1. <table border="1" cellspacing="0">
  2.       <caption>
  3.         课程表作业
  4.       </caption>
  5.       <thead>
  6.         <tr>
  7.           <th colspan="2"></th>
  9.           <th>周一</th>
  10.           <th>周二</th>
  11.           <th>周三</th>
  12.           <th>周四</th>
  13.           <th>周五</th>
  14.         </tr>
  15.       </thead>
  16.       <tbody>
  17.         <tr>
  18.           <td rowspan="4">上午</td>
  19.           <td>第一节</td>
  20.           <td>语文</td>
  21.           <td>数学</td>
  22.           <td>英语</td>
  23.           <td>化学</td>
  24.           <td>物理</td>
  25.         </tr>
  26.         <tr>
  27.           <td>第二节</td>
  28.           <td>数学</td>
  29.           <td>英语</td>
  30.           <td>化学</td>
  31.           <td>物理</td>
  32.           <td>生物</td>
  33.         </tr>
  34.         <tr>
  35.           <td>第三节</td>
  36.           <td>体育</td>
  37.           <td>政治</td>
  38.           <td>历史</td>
  39.           <td>数学</td>
  40.           <td>语文</td>
  41.         </tr>
  42.         <tr>
  43.           <td>第四节</td>
  44.           <td>英语</td>
  45.           <td>化学</td>
  46.           <td>物理</td>
  47.           <td>生物</td>
  48.           <td>音乐</td>
  49.         </tr>
  50.         <tr align="center">
  51.           <td colspan="7">中午休息</td>
  52.         </tr>
  53.         <tr>
  54.           <td rowspan="3">下午</td>
  55.           <td>第一节</td>
  56.           <td>体育</td>
  57.           <td>语文</td>
  58.           <td>数学</td>
  59.           <td>英语</td>
  60.           <td>物理</td>
  61.         </tr>
  62.         <tr>
  63.           <td>第二节</td>
  64.           <td>化学</td>
  65.           <td>政治</td>
  66.           <td>体育</td>
  67.           <td>历史</td>
  68.           <td>生物</td>
  69.         </tr>
  70.         <tr>
  71.           <td>第三节</td>
  72.           <td colspan="2">课外活动</td>
  74.           <td>大扫除</td>
  75.           <td colspan="2">班会</td>
  76.         </tr>
  77.       </tbody>
  78.     </table>

表单控件

  • action:处理表单的程序 method:表单提交类型
  • 默认为GET,数据参数直接放在url地址中 POST：表单的数据在请求头中，更安全
  • type：控件类型 text：文本，email：邮箱，password:密码，namber:数字
  • name:数据的变量名 value:表单的默认内容 placeholder:提示 required:必选
  1. <form action="处理程序" method="POST">
  2.       <!--文本框-->
  3.       <label for="username">账号：</label>
  4.       <input
  5.         type="text"
  6.         id="username"
  7.         name="username"
  8.         value="admin"
  9.         placeholder="至少6位"
  10.         autofocus
  11.         required
  12.       />
  13.       <label for="email">邮箱：</label>
  14.       <input
  15.         type="email"
  16.         id="email"
  17.         name="email"
  18.         placeholder="admin@qq.com"
  19.         required
  20.       />
  21.       <label for="age">年龄：</label>
  22.       <input type="number" id="age" name="age" min="10" max="150" required />
  23.       <label for="password">密码：</label>
  24.       <input type="password" id="password" name="password" required />
  25.       <label for="password1">确认：</label>
  26.       <input type="password1" id="password1" name="password1" required />
  27.       <button>提交</button>
  28.     </form>
  29. <!--单选框和复选按钮和下拉列表-->
  30. <form action="" method="POST">
  31.       <label for="">性别：</label>
  32.       <div>
  33.         <!--一组单选框按钮必须用同一个名称的name属性值，否则无法实现值的唯一性-->
  34.         <input type="radio" name="gender" value="male" id="male" />
  35.         <label for="male">男</label>
  36.         <input type="radio" name="gender" value="female" id="female" />
  37.         <label for="female">女</label>
  38.         <input type="radio" name="gender" value="secret" id="secret" />
  39.         <label for="secret">保密</label>
  40.       </div>
  41.       <label for="#">兴趣：</label>
  42.       <div>
  43.         <!--复选框的name属性值应该写数组格式名称，这样才能确保服务器可以接收到一组值 -->
  44.         <input type="checkbox" name="hobby[]" value="game" id="game" />
  45.         <label for="game">打游戏</label>
  46.         <input type="checkbox" name="hobby[]" value="shoot" id="shoot" />
  47.         <label for="shoot">摄影</label>
  48.         <input type="checkbox" name="hobby[]" value="music" id="music" />
  49.         <label for="music">听歌</label>
  51.         <!--下拉列表-->
  53.         <label for="">学历</label>
  55.         <!--multiple size="2"-->
  56.         <select name="edu">
  57.           <option value="1">小学</option>
  58.           <option value="2">初中</option>
  59.           <option value="3" selected>高中</option>
  60.           <option value="4">大学</option>
  61.           <!--label属性的优先级大于 Option内部的文本
  62.             <option value="5" label=“自学“ </option>-->
  63.         </select>
  64.       </div>
  65.   <button>提交</button>
  66.   </form>

文件域隐藏域

文件域

  • 1.请求类型必须是：POST
  • 2.将表单数据编码设置为enctypc=“multipart/form-data”
    1. <form action="cc.php" method="POST" enctypc="multipart/form-data">
    2. <label for="file">选择文件：</label>
    3. <input type="file" name="file" id="file" />
    4. <button>上传文件</button>
    5. </form>

隐藏域

<input type="hidden" name="MAX_FILE_SIZE" value="100000" />

表单的form属性

  • 通过关联绑定FORM标签外的控件也能获取到表单数据
  • Input和button都要绑定才能提交数据
    1. <form action="#" method="POST" id="register">
    2. </form><label for="name">用户名：</label>
    3. <input type="text form="register" name="name" id="name">
    4. <button form="register">提交</button>
  • 尽管form可以将控件写到任意地址，仍然能获取到数据的值，但不要这样做，第一影响布局，第二代码混乱
  • 但是，用在JS中，获取数据将变得非常的方便
上一条：Markdown 语法简介下一条：1209作业-表格课程表|表单和属性
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
a.2020-12-10 08:25:471楼
<option value="5" label=“自学“> </option> 掉了一个尖括号

相关文章

查看更多