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

搜索
博主信息
博文 145
粉絲 7
評論 7
訪問量 198514
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
html5表單相關(guān)（input、fieldset分組、textarea、seclect預(yù)定義列表）知識點(diǎn)案例演示
李東亞1??3????12?
原創(chuàng)
1016人瀏覽過

作業(yè)一：實(shí)操部分

1、代碼練習(xí)和演示

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>表單相關(guān)</title>
  7.     <style>
  8.       form {
  9.         width: 400px;
  10.         /* height: 400px; */
  11.         padding: 20px;
  12.         margin: auto;
  13.         background-color: #0ad4b9;
  14.         display: grid;
  15.         grid-gap: 15px;
  16.       }
  17.       form:hover {
  18.         box-shadow: 0 0 3px #616161;
  19.       }
  20.       h2 {
  21.         width: 400px;
  22.         margin: auto;
  23.         text-align: center;
  24.       }
  25.       section {
  26.         display: grid;
  27.         grid-template-columns: 80px 1fr;
  28.       }
  29.       section:last-child {
  30.         display: grid;
  31.         grid-template-columns: 1fr 1fr;
  32.       }
  33.       button {
  34.         height: 30px;
  35.         width: 60px;
  36.         border: none;
  37.         outline: none;
  38.         background-color: lightblue;
  39.         margin: auto;
  40.       }
  41.       button:hover {
  42.         background-color: red;
  43.         color: white;
  44.       }
  46.       fieldset > .other {
  47.         display: grid;
  48.         grid-template-columns: 80px repeat(6, 1fr);
  49.       }
  50.       legend {
  51.         text-align: center;
  52.       }
  53.       textarea {
  54.         width: 300px;
  55.       }
  56.     </style>
  57.   </head>
  58.   <body>
  59.     <h2>用戶登陸</h2>
  60.     <form action="login.php" method="POST">
  61.       <section>
  62.         <label for="username">用戶名：</label>
  63.         <input
  64.           type="text"
  65.           id="username"
  66.           name="username"
  67.           placeholder="用戶名"
  68.           required
  69.           autofocus
  70.         />
  71.       </section>
  72.       <section>
  73.         <label for="pwd">密&nbsp;&nbsp;&nbsp;碼：</label>
  74.         <input
  75.           type="password"
  76.           id="pwd"
  77.           name="password"
  78.           placeholder="不少于6位密碼"
  79.           required
  80.         />
  81.       </section>
  82.       <section>
  83.         <button type="submit">登陸</button>
  84.         <button type="reset">重置</button>
  85.       </section>
  86.     </form>
  87.     <hr />
  88.     <h2>用戶注冊</h2>
  89.     <form action="" enctype="multipart/form-data">
  90.       <fieldset>
  91.         <legend>基本信息</legend>
  92.         <section>
  93.           <label for="username">用戶名：</label>
  94.           <input
  95.             type="text"
  96.             id="username"
  97.             name="username"
  98.             placeholder="用戶名"
  99.             required
  100.           />
  101.         </section>
  102.         <section>
  103.           <label for="pwd">密&nbsp;&nbsp;&nbsp;碼：</label>
  104.           <input
  105.             type="password"
  106.             id="pwd"
  107.             name="password"
  108.             placeholder="不少于6位密碼"
  109.             required
  110.           />
  111.         </section>
  112.         <section class="other">
  113.           <label for="">性別:</label>
  114.           <input type="radio" name="sex" value="1" />男
  115.           <input type="radio" name="sex" value="0" checked />女
  116.           <input type="radio" name="sex" value="2" />保密
  117.         </section>
  118.       </fieldset>
  119.       <fieldset>
  120.         <legend>德智體美</legend>
  121.         <section class="other">
  122.           <label for="">愛好：</label>
  123.           <input type="checkbox" name="like[]" value="" checked />跑步
  124.           <input type="checkbox" name="like[]" value="" checked />游泳
  125.           <input type="checkbox" name="like[]" value="" />玩游戲
  126.         </section>
  127.         <section>
  128.           <label for="">特長</label>
  129.           <input type="text" list="course" name="course" />
  130.           <datalist id="course">
  131.             <option value="html">html</option>
  132.             <option value="css">css</option>
  133.             <option value="javascript">javascript</option>
  134.           </datalist>
  135.         </section>
  136.         <section>
  137.           <label for="php">科目</label>
  138.           <select name="php" id="php">
  139.             <optgroup label="前端">
  140.               <option value="html">html</option>
  141.               <option value="css">css</option>
  142.               <option value="javascript">javascript</option>
  143.             </optgroup>
  145.             <optgroup label="后端">
  146.               <option value="php" label="php"></option>
  147.               <option value="composer" label="composer" selected></option>
  148.               <option value="laravel">laravel</option>
  149.             </optgroup>
  150.           </select>
  151.         </section>
  152.         <section>
  153.           <label for="">頭像：</label>
  154.           <input type="hidden" name="MAX_FILE_SIZE" value="800000" />
  155.           <input type="file" name="" id="" />
  156.         </section>
  157.         <section>
  158.           <label for="">圖片域：</label>
  159.           <input type="image" src="dy.png" width="80px" height="30px" />
  160.         </section>
  162.         <section>
  163.           <h4>個(gè)人介紹</h4>
  164.           <textarea
  165.             name=""
  166.             id=""
  167.             cols=""
  168.             rows="10"
  169.             placeholder="自我介紹……"
  170.           ></textarea>
  171.         </section>
  172.       </fieldset>
  173.       <section>
  174.         <button
  175.           type="submit"
  176.           formaction="login"
  177.           formmethod="POSt"
  178.           formtarget="_blank"
  179.         >
  180.           登陸
  181.         </button>
  182.         <button type="submit" formaction="">發(fā)送</button>
  183.       </section>
  184.     </form>
  185.   </body>
  186. </html>

2、代碼運(yùn)行結(jié)果圖

作業(yè)：總結(jié)

1、相關(guān)知識總結(jié)
1、表單相關(guān)常見標(biāo)簽：
表單：<form></form>、
控件：<label></label>和<input/>、
按鈕：<botton></botton>、
自定義列表：<select><optgroup label="分組"><option>自定義列表項(xiàng)<option/><optgroup></select>、
預(yù)定義輸入：<input list="course"/>和<datalist id="course"> <option>預(yù)定義選項(xiàng)</option></datalist>
分組標(biāo)簽：<fieldset></fieldset>和<legend></legend>
2、表單相關(guān)屬性：
a、form: action=”請求處理地址”，method=”請求發(fā)送方式（GET|POST）”,target=”打開方式（_blank）” ,name=”表單名稱”,enctype=”application/x-www-form-urlencoded | multipart/form-data”
b、input: type=”控件類型見c項(xiàng)”、name=”空間名字”，value=”控件值”，form=”空間所屬表單”，placeholder=”提示信息占位符（text和password）”, autofocus:自動(dòng)獲取焦點(diǎn)，checked:默認(rèn)選項(xiàng)（radio和checkbox）等等
c、input空間類型：text password radio checkbox file image hidden email data和datatime-local tel url number range(范圍拖動(dòng)條) search color等
d、button type=”submit|reset|button”,name=”名字”，value=”按鈕文本值”，form相關(guān)屬性：formaction和form……
e、select : name=”請求參數(shù)名稱”，multiple:是否多選（布爾值） size=”允許顯示的列表數(shù)量”
3、表單相關(guān)事件：

序號 事件屬性 描述
1 onfocus 獲取焦點(diǎn)時(shí)觸發(fā)
2 onblur 失去焦點(diǎn)時(shí)觸發(fā)
3 onchange 失去焦點(diǎn),且值發(fā)生變化時(shí)觸發(fā)
4 oninput 值發(fā)生變化(不等失去焦點(diǎn))時(shí)觸發(fā)
5 onkeydown 按下鍵盤時(shí)觸發(fā)
6 onkeyup 抬起鍵盤時(shí)觸發(fā)
7 onclick 鼠標(biāo)單擊時(shí)觸發(fā)
8 onselect 選擇內(nèi)容文本時(shí)觸發(fā)
批改老師：天蓬老師天蓬老師

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

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

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

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