简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >HTML5表单知识点和实例

HTML5表单知识点和实例

樊天龙的博客
樊天龙的博客原创
2020年04月05日 16:22:00912浏览

HTML5表单知识点和实例

1.按钮常用属性

  • type:指定按钮类型,常用的有button,submit,reset
  • form:指定从属的表单,和对应表单的id进行绑定
  • formaction:指定服务器处理数据的脚本地址
  • formmethod:指定向服务器传输数据的类型,常用的有POST和GET

2.下拉列表常用属性和事件

  • optgroup:对下拉列表进行分组
  • multiple:对下拉列表进行多选
  • onclick事件:当鼠标点击下拉列表时触发
  • onchange事件:当鼠标更改下拉列表的值时触发

3.文本域常用属性和事件

  • cols:指定文本域的列可以容纳多少个字符
  • rows:指定文本域的行可以容纳多少个字符
  • placeholder:文本域输入内容为空时显示,并会在文本域输入内容不为空时消失。
  • readonly:只读
  • disabled:禁用

4.表单域分组元素常用属性

  • name:分组名
  • form:指定从属的表单,和对应表单的id进行绑定
  • formaction:指定服务器处理数据的脚本地址
  • formmethod:指定向服务器传输数据的类型,常用的有POST和GET
  • disabled:禁用

5.实例

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <style>
  7.       * {
  8.         margin: 0;
  9.         padding: 0;
  10.       }
  12.       .container {
  13.         width: 300px;
  14.         border: 1px solid #cccccc;
  15.         padding: 10px;
  16.         border-radius: 10px;
  17.         box-shadow: 5px 0 5px #cccccc;
  18.         text-align: center;
  19.         background: linear-gradient(to right bottom, lightpink, lightblue);
  20.         color: lightslategray;
  21.       }
  23.       section {
  24.         margin: 5px 0;
  25.       }
  27.       h1 {
  28.         font-size: 16px;
  29.       }
  30.       h2 {
  31.         font-size: 12px;
  32.       }
  34.       h2::before {
  35.         content: "";
  36.         display: inline-block;
  37.         width: 10px;
  38.         height: 10px;
  39.         background-color: lightsteelblue;
  40.       }
  42.       button {
  43.         width: 50px;
  44.         height: 30px;
  45.         background-color: linen;
  46.         border: none;
  47.         outline: none;
  48.         border-radius: 5px;
  49.       }
  51.       button:hover {
  52.         background-color: lightblue;
  53.         color: #ffffff;
  54.         cursor: pointer;
  55.       }
  56.     </style>
  57.     <title>Document</title>
  58.   </head>
  59.   <body>
  60.     <div class="container">
  61.       <h1>后台功能区</h1>
  62.       <section>
  63.         <form id="free-info"></form>
  64.         <h2>免费信息显示方式</h2>
  65.         <fieldset>
  66.           <legend>☆审核状态</legend>
  67.           <input
  68.             type="radio"
  69.             name="check_status"
  70.             id="check-status-one"
  71.             value="1"
  72.             form="free-info"
  73.           /><label for="check-status-one">已审核</label>
  74.           <input
  75.             type="radio"
  76.             name="check_status"
  77.             id="check-status-zero"
  78.             value="0"
  79.             form="free-info"
  80.             checked
  81.           /><label for="check-status-zero">未审核</label>
  82.           <input
  83.             type="radio"
  84.             name="check_status"
  85.             id="check-status-two"
  86.             value="2"
  87.             form="free-info"
  88.           /><label for="check-status-two">全部</label>
  89.         </fieldset>
  90.         信息类别:<select
  91.           name="category"
  92.           id="category"
  93.           form="free-info"
  94.           onchange="alert('您已经成功改变了一个类别!')"
  95.         >
  96.           <optgroup label="热门">
  97.             <option value="gongyu">--公寓信息--</option>
  98.             <option value="zhaopin" selected>--招聘信息--</option>
  99.             <option value="qiuzhi">--求职信息--</option>
  100.             <option value="peixun">--培训信息--</option>
  101.             <option value="jiajiao">--家教信息--</option>
  102.             <option value="fangwu">--房屋信息--</option>
  103.           </optgroup>
  104.           <optgroup label="推荐">
  105.             <option value="cheliang">--车辆信息--</option>
  106.             <option value="qiugou">--求购信息--</option>
  107.             <option value="chushou">--出售信息--</option>
  108.             <option value="zsyz">--招商引资--</option>
  109.             <option value="xr_xu">--寻人/物启事--</option>
  110.           </optgroup>
  111.         </select>
  112.         <button
  113.           type="submit"
  114.           form="free-info"
  115.           formaction="free_info.php"
  116.           formmethod="GET"
  117.         >
  118.           检索
  119.         </button>
  120.       </section>
  121.       <section>
  122.         <form id="pay-info"></form>
  123.         <h2>付费信息显示方式</h2>
  124.         <fieldset>
  125.           <legend>☆付费状态</legend>
  126.           <input
  127.             type="radio"
  128.             name="pay_status"
  129.             id="pay-status-one"
  130.             value="1"
  131.             form="pay-info"
  132.           /><label for="pay-status-one">已付费</label>
  133.           <input
  134.             type="radio"
  135.             name="pay_status"
  136.             id="pay-status-zero"
  137.             value="0"
  138.             checked
  139.             form="pay-info"
  140.           /><label for="pay-status-zero">未付费</label>
  141.           <input
  142.             type="radio"
  143.             name="pay_status"
  144.             id="pay-status-two"
  145.             value="2"
  146.             form="pay-info"
  147.           /><label for="pay-status-two">全部</label>
  148.         </fieldset>
  149.         信息类别:<select
  150.           name="category"
  151.           id="category"
  152.           form="pay-info"
  153.           onclick="alert('您已经成功点击了一个类别!')"
  154.         >
  155.           <optgroup label="热门">
  156.             <option value="gongyu">--公寓信息--</option>
  157.             <option value="zhaopin">--招聘信息--</option>
  158.             <option value="qiuzhi">--求职信息--</option>
  159.             <option value="peixun">--培训信息--</option>
  160.             <option value="jiajiao">--家教信息--</option>
  161.             <option value="fangwu" selected>--房屋信息--</option>
  162.           </optgroup>
  163.           <optgroup label="推荐">
  164.             <option value="cheliang">--车辆信息--</option>
  165.             <option value="qiugou">--求购信息--</option>
  166.             <option value="chushou">--出售信息--</option>
  167.             <option value="zsyz">--招商引资--</option>
  168.             <option value="xr_xw">--寻人/物启事--</option>
  169.           </optgroup>
  170.         </select>
  171.         <button
  172.           type="submit"
  173.           form="pay-info"
  174.           formaction="pay_info.php"
  175.           formmethod="POST"
  176.         >
  177.           检索
  178.         </button>
  179.       </section>
  180.       <section>
  181.         <form id="adv-info"></form>
  182.         <h2>企业广告显示方式</h2>
  183.         <fieldset>
  184.           <legend>☆推荐状态</legend>
  185.           <input
  186.             type="radio"
  187.             name="adv_status"
  188.             id="adv-status-one"
  189.             value="1"
  190.             form="adv-info"
  191.           /><label for="adv-status-one">已推荐</label>
  192.           <input
  193.             type="radio"
  194.             name="adv_status"
  195.             id="adv-status-zero"
  196.             checked
  197.             value="0"
  198.             form="adv-info"
  199.           /><label for="adv-status-zero">未推荐</label>
  200.           <input
  201.             type="radio"
  202.             name="adv_status"
  203.             id="adv-status-two"
  204.             value="2"
  205.             form="adv-info"
  206.           /><label for="adv-status-two">全部</label>
  207.         </fieldset>
  208.         信息类别:<select name="category" id="category" form="adv-info">
  209.           <optgroup label="热门">
  210.             <option value="gongyu">--公寓信息--</option>
  211.             <option value="zhaopin">--招聘信息--</option>
  212.             <option value="qiuzhi">--求职信息--</option>
  213.             <option value="peixun">--培训信息--</option>
  214.             <option value="jiajiao">--家教信息--</option>
  215.             <option value="fangwu">--房屋信息--</option>
  216.           </optgroup>
  217.           <optgroup label="推荐">
  218.             <option value="cheliang">--车辆信息--</option>
  219.             <option value="qiugou">--求购信息--</option>
  220.             <option value="chushou">--出售信息--</option>
  221.             <option value="zsyz" selected>--招商引资--</option>
  222.             <option value="xr_xw">--寻人/物启事--</option>
  223.           </optgroup>
  224.         </select>
  225.         <button
  226.           type="submit"
  227.           form="adv-info"
  228.           formaction="adv_info.php"
  229.           formmethod="POST"
  230.         >
  231.           检索
  232.         </button>
  233.       </section>
  234.       <section>
  235.         <form id="notice"></form>
  236.         <fieldset>
  237.           <legend>公告设置</legend>
  238.           <textarea
  239.             name="notice"
  240.             id="notice"
  241.             cols="30"
  242.             rows="10"
  243.             form="notice"
  244.             placeholder="请在此填写公告...."
  245.             onselect="alert('您已经成功的选择了一些文字!')"
  246.           ></textarea>
  247.           <p>
  248.             <button form="notice" formaction="notice.php" formmethod="GET">
  249.               发布
  250.             </button>
  251.           </p>
  252.         </fieldset>
  253.       </section>
  254.     </div>
  255.   </body>
  256. </html>

6.效果图

7 .总结

表单时HTML部分重要的知识点,有表单才能和后端进行交互,因此需要好好掌握常用的表单元素和属性,这一部分并不难,只要记忆和多敲代码就好.

上一条：HTML 表单中按钮、下拉列表、文本域、表单域的常用属性与事件下一条：作业-html基础-表单制作
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多