亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 13
粉絲 1
評(píng)論 0
訪問(wèn)量 19026
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
HTML5表單知識(shí)點(diǎn)和實(shí)例
樊天龍的博客
原創(chuàng)
1117人瀏覽過(guò)

HTML5表單知識(shí)點(diǎn)和實(shí)例

1.按鈕常用屬性

  • type:指定按鈕類型,常用的有button,submit,reset
  • form:指定從屬的表單,和對(duì)應(yīng)表單的id進(jìn)行綁定
  • formaction:指定服務(wù)器處理數(shù)據(jù)的腳本地址
  • formmethod:指定向服務(wù)器傳輸數(shù)據(jù)的類型,常用的有POST和GET

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

  • optgroup:對(duì)下拉列表進(jìn)行分組
  • multiple:對(duì)下拉列表進(jìn)行多選
  • onclick事件:當(dāng)鼠標(biāo)點(diǎn)擊下拉列表時(shí)觸發(fā)
  • onchange事件:當(dāng)鼠標(biāo)更改下拉列表的值時(shí)觸發(fā)

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

  • cols:指定文本域的列可以容納多少個(gè)字符
  • rows:指定文本域的行可以容納多少個(gè)字符
  • placeholder:文本域輸入內(nèi)容為空時(shí)顯示,并會(huì)在文本域輸入內(nèi)容不為空時(shí)消失。
  • readonly:只讀
  • disabled:禁用

4.表單域分組元素常用屬性

  • name:分組名
  • form:指定從屬的表單,和對(duì)應(yīng)表單的id進(jìn)行綁定
  • formaction:指定服務(wù)器處理數(shù)據(jù)的腳本地址
  • formmethod:指定向服務(wù)器傳輸數(shù)據(jù)的類型,常用的有POST和GET
  • disabled:禁用

5.實(shí)例

  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>后臺(tái)功能區(qū)</h1>
  62.       <section>
  63.         <form id="free-info"></form>
  64.         <h2>免費(fèi)信息顯示方式</h2>
  65.         <fieldset>
  66.           <legend>☆審核狀態(tài)</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('您已經(jīng)成功改變了一個(gè)類別!')"
  95.         >
  96.           <optgroup label="熱門(mén)">
  97.             <option value="gongyu">--公寓信息--</option>
  98.             <option value="zhaopin" selected>--招聘信息--</option>
  99.             <option value="qiuzhi">--求職信息--</option>
  100.             <option value="peixun">--培訓(xùn)信息--</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">--求購(gòu)信息--</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>付費(fèi)信息顯示方式</h2>
  124.         <fieldset>
  125.           <legend>☆付費(fèi)狀態(tài)</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">已付費(fèi)</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">未付費(fèi)</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('您已經(jīng)成功點(diǎn)擊了一個(gè)類別!')"
  154.         >
  155.           <optgroup label="熱門(mén)">
  156.             <option value="gongyu">--公寓信息--</option>
  157.             <option value="zhaopin">--招聘信息--</option>
  158.             <option value="qiuzhi">--求職信息--</option>
  159.             <option value="peixun">--培訓(xùn)信息--</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">--求購(gòu)信息--</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>企業(yè)廣告顯示方式</h2>
  183.         <fieldset>
  184.           <legend>☆推薦狀態(tài)</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="熱門(mén)">
  210.             <option value="gongyu">--公寓信息--</option>
  211.             <option value="zhaopin">--招聘信息--</option>
  212.             <option value="qiuzhi">--求職信息--</option>
  213.             <option value="peixun">--培訓(xùn)信息--</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">--求購(gòu)信息--</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>公告設(shè)置</legend>
  238.           <textarea
  239.             name="notice"
  240.             id="notice"
  241.             cols="30"
  242.             rows="10"
  243.             form="notice"
  244.             placeholder="請(qǐng)?jiān)诖颂顚?xiě)公告...."
  245.             onselect="alert('您已經(jīng)成功的選擇了一些文字!')"
  246.           ></textarea>
  247.           <p>
  248.             <button form="notice" formaction="notice.php" formmethod="GET">
  249.               發(fā)布
  250.             </button>
  251.           </p>
  252.         </fieldset>
  253.       </section>
  254.     </div>
  255.   </body>
  256. </html>

6.效果圖

7 .總結(jié)

表單時(shí)HTML部分重要的知識(shí)點(diǎn),有表單才能和后端進(jìn)行交互,因此需要好好掌握常用的表單元素和屬性,這一部分并不難,只要記憶和多敲代碼就好.

批改老師：天蓬老師天蓬老師

批改狀態(tài)：合格

老師批語(yǔ)：表單樣式不錯(cuò)
本博文版權(quán)歸博主所有，轉(zhuǎn)載請(qǐng)注明地址！如有侵權(quán)、違法，請(qǐng)聯(lián)系admin@php.cn舉報(bào)處理！
全部評(píng)論 文明上網(wǎng)理性發(fā)言，請(qǐng)遵守新聞評(píng)論服務(wù)協(xié)議
0條評(píng)論
關(guān)于我們 免責(zé)申明 意見(jiàn)反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長(zhǎng)！
關(guān)注服務(wù)號(hào) 技術(shù)交流群
PHP中文網(wǎng)訂閱號(hào)
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號(hào)
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)