1. 程式人生 > 實用技巧 >表單標籤

表單標籤

 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>表單標籤</title>
 7 </head>
 8 <body>
 9     <h3>&lt;input&gt;表單元素</
h3> 10 <form action="xxx.php" method="get"> 11 <!-- text 文字框 使用者可以裡面輸入任何文字 --> 12 使用者名稱:<input type="text" name="username" value="請輸入使用者名稱" maxlength="6"> <br/> 13 <!-- password 密碼框 使用者看不見輸入的密碼 --> 14 密碼:<input type="password" name
="pwd"> <br/> 15 <!-- radio 單選按鈕 可以實現多選 --> 16 <!-- name 是表單元素名字 這裡性別單選按鈕必須有相同的名字name 才可以實現多選1 --> 17 <!-- 單選按鈕和複選框可以設定checked屬性,當頁面開啟的時候就可以預設選中這個按鈕 --> 18 性別:男 <input type="radio" name="sex" value="男" checked="checked"><input type
="radio" name="sex" value="女"><br> 19 <!-- checkbox 複選框 可以實現多選 --> 20 愛好:吃飯 <input type="checkbox" name="hobby" value="吃飯"> 睡覺 <input type="checkbox" name="hobby" value="睡覺"> 打豆豆 <input type="checkbox" name="hobby" value="打豆豆" checked="checked"> <br> 21 <!-- 點選了提交按鈕,可以把表單域 form 裡面的表單元素裡面的值 提交給後臺伺服器 --> 22 <input type="submit" value="免費註冊"> 23 <!-- 重置按鈕可以還原表單元素初始的預設狀態 --> 24 <input type="reset" value="重新填寫"> 25 <!-- 普通按鈕 button 後期結合js 搭配使用 --> 26 <input type="button" value="獲取簡訊驗證碼"> <br> 27 <!-- 檔案域 使用場景 上傳檔案使用的 --> 28 上傳頭像:<input type="file"> 29 </form> 30 31 </body> 32 </html>