Community Learn Tools Library Leisure
search
English
Home > List of blog posts > HTML5表单知识点和实例
Blogger Information
Blog 13
fans 1
comment 0
visits 14931
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
HTML5表单知识点和实例
樊天龙的博客
Original
913 people have browsed it

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

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：表单样式不错
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post