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

搜索
博主信息
博文 16
粉絲 0
評論 0
訪問量 17320
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
HTML表單和常用屬性
大碗寬面
原創(chuàng)
714人瀏覽過

一.form表單常用類型

類型 描述 示例
text 文本框 <input type="text">
password 暗文文本框 <input type="password">
email 有驗證的郵箱表單 <input type="email">
number 數(shù)字文本框，只能輸入數(shù)字 <input type="number">
date 年月日的數(shù)字滾輪 <input type="date">
radio 單選框 <input type="radio">
checkbox 復(fù)選框 <input type="checkbox">
image 圖形化 submit 按鈕 <input type="image">

下拉列表

select元素用來創(chuàng)建下拉列表</select>
<select> 元素中的 <option> 標(biāo)簽定義了列表中的可用選項。
示例

  1.         <div>
  2.         <select>
  3.             <option value="0" required disabled>--請選擇--</option>
  4.             <option value="1">唱</option>
  5.             <option value="2">跳</option>
  6.             <option value="3">Rap</option> 
  7.             <option value="4" selected>籃球</option> 
  8.         </select>
  9.         </div>

二.form表單常用屬性

類型 描述 示例
name 控件名稱，作為鍵值對的一部分與表單一同提交 name="password"
value 控件的初始值 value="18"
max 最大值 max="2023-03-13"
min 最小值 min="1997-05-08"
maxlength value的最小長度(字符數(shù)) maxlength="18"
minlength value的最小長度(字符數(shù)) minlength="18"
size 控件的尺寸 size="18"
selected 預(yù)先選定該選項。 selected
placeholder 出現(xiàn)在控件上的文字 placeholder="請?zhí)顚懹脩裘?
chenked 控件是否選中 chenked
required 布爾值。如果存在，這個值是必需的 required
disabled 布爾值。表單控件是否禁用 disabled

ps:

radio單選按鈕允許在多個擁有相同 name 值的選項中選中其中一個。

  1.          <div>
  2.           <label for="sex">性別: 
  3.             <input type="radio" name="gender" value="sex" id="sex" />男
  4.             <input type="radio" name="gender" value="sex" id="sex" />女
  5.             <input type="radio" checked name="secrecy" value="sex" id="sex" />保密
  6.           </label>
  7.         </div>

checkbox復(fù)選框需要返回多個值，需要在name屬性中加[]。

  1.  <!-- 復(fù)選框 -->
  2.         <div>
  3.         <label for="hobby">愛好:</label>
  4.           <label for="hobby"><input type="checkbox" value="hobby" name="hobby[]" id="hobby"/>唱</label>
  5.           <label for="hobby"><input type="checkbox" value="hobby" name="hobby[]" id="hobby"/>跳</label>
  6.           <label for="hobby"><input type="checkbox" value="hobby" name="hobby[]" id="hobby"/>Rap</label>
  7.           <label for="hobby"><input checked type="checkbox" value="hobby" name="hobby[]" id="hobby"/>籃球</label>
  8.         </div>

三.用戶注冊表實例

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.   </head>
  9.   <body>
  10.     <form action="0313.php" method="post">
  11.       <fieldset>
  12.         <legend style="text-align: center">用戶注冊</legend>
  14.         <input type="text">
  15.         <!-- 文本框 -->
  16.         <div>
  17.           <label for="usname">賬戶:
  18.             <input type="text" placeholder="不少于6位數(shù)" name="usname" id="usname" maxlength="12"/></label>
  19.         </div>
  21.         <!-- 暗文文本框 -->
  22.         <div>
  23.           <label for="password">密碼:
  24.             <input type="password" placeholder="輸入密碼" name="password" id="password" minlength="8"/></label>
  25.         </div>
  27.         <!-- 郵箱表單 -->
  28.         <div>
  29.           <label for="email">郵箱:
  30.             <input type="email" placeholder="注意郵箱格式@" name="email" id="email"/></label>
  31.         </div>
  33.         <!-- 數(shù)字 -->
  34.         <div>
  35.             <label for="age">年齡:
  36.                 <input type="number" name="age" id="age" value="18" min="18" max="20">
  37.             </label>
  38.         </div>
  40.         <!-- 日期 -->
  41.         <div>
  42.             <label for="birthday">
  43.                 <input type="date" name="birthday" id="birthday" value="1997-05-08" min="1997-05-08" max="2023-03-13">
  44.             </label>
  45.         </div>
  47.         <!-- 單選框 -->
  48.         <!-- check = "chcked"表示默認(rèn)選擇，應(yīng)用于單選和復(fù)選 -->
  49.         <!-- name需統(tǒng)一才可以單選，唯一選項-->
  50.         <div>
  51.           <label for="sex">性別: 
  52.             <input type="radio" name="gender" value="sex" id="sex" />男
  53.             <input type="radio" name="gender" value="sex" id="sex" />女
  54.             <input type="radio" checked name="secrecy" value="sex" id="sex" />保密
  55.           </label>
  56.         </div>
  58.         <!-- 復(fù)選框 -->
  59.         <div>
  60.         <label for="hobby">愛好:</label>
  61.           <label for="hobby"><input type="checkbox" value="hobby" name="hobby[]" id="hobby"/>唱</label>
  62.           <label for="hobby"><input type="checkbox" value="hobby" name="hobby[]" id="hobby"/>跳</label>
  63.           <label for="hobby"><input type="checkbox" value="hobby" name="hobby[]" id="hobby"/>Rap</label>
  64.           <label for="hobby"><input checked type="checkbox" value="hobby" name="hobby[]" id="hobby"/>籃球</label>
  65.         </div>
  67.         <!-- 下拉框 -->
  68.         <div>
  69.         <select>
  70.             <option value="0" required disabled>--請選擇--</option>
  71.             <option value="1">唱</option>
  72.             <option value="2">跳</option>
  73.             <option value="3">Rap</option> 
  74.             <option value="4" selected>籃球</option> 
  75.         </select>
  76.         </div>
  78.         <!-- 多行文本框 -->
  79.         <div>
  80.             <label for="">個人簡介: 
  81.                 <br>
  82.                 <textarea name="" id="" cols="30" rows="7" placeholder="老師好，我是練習(xí)時長兩年半的個人練習(xí)生ikun。喜歡唱、跳、rap、籃球。"></textarea>
  83.             </label>
  84.         </div>
  86.         <!-- 圖片 -->
  87.         <div>
  88.             <label for="picture">
  89.                 <input type="image" src="./0313image/1.png" alt="同意" width="220px" id="picture" onclick="alert('密碼輸入正確')">
  90.             </label>
  91.         </div>
  93.         <div>
  94.             <button>提交</button>
  95.             <input type="reset" value="重置">
  96.         </div>
  100.       </fieldset>
  101.     </form>
  102.   </body>
  103. </html>
批改老師：PHPzPHPz

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

老師批語：完成的很好，只是在提交的時候要在狀態(tài)那一欄選擇作業(yè)進(jìn)行提交
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！
全部評論 文明上網(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
隨時隨地碎片化學(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+教程免費學(xué)